Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                		<header>
			<h1>
                <img src='https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/diamond.png' id='diamond1'>
                <img src='https://res.cloudinary.com/ahmedagadir/image/upload/v1530727624/retro-rock-paper-scissors/sword.png' id='sword1'>
                 Rock Paper Scissors 
                 <img src='https://res.cloudinary.com/ahmedagadir/image/upload/v1530727624/retro-rock-paper-scissors/sword.png' id='sword2'>
                 <img src='https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/diamond.png' id='diamond2'>
             </h1>
		</header>

		<!-- Icon made by Flaticon Basic License from www.flaticon.com  -->

        <!-- <div>Icons made by <a href="https://www.flaticon.com/authors/roundicons-freebies" title="Roundicons Freebies">Roundicons Freebies</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> -->


        <p class='message'> Select your move. </p>


		<div class='choices'>
				<img src='https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/rock.png' alt='rock'>
				<!-- Created by Maciej Swierczek from Noun Project -->
				<img src='https://res.cloudinary.com/ahmedagadir/image/upload/v1530727624/retro-rock-paper-scissors/paper.png' alt='paper'>
				<!-- Created by Maciej Swierczek from Noun Project -->
				<img src='https://res.cloudinary.com/ahmedagadir/image/upload/v1530727624/retro-rock-paper-scissors/scissors.png' alt='scissors'>
				<!-- Created by Maciej Swierczek from Noun Project -->
		</div> 

        
        <div class='result'>
            <p class='result-outcome'>...</p>
            <p class='result-winner'>...</p>
        </div>

        
        <table>
            <tr>
                <th colspan='2' scope='col'>Scoreboard</th>
            </tr>
            <tr>
                <th scope='col'>Player</th>
                <th scope='col'>Computer</th>
            </tr>
            <tr>
                <td id='user-score'>0</td>
                <td id='computer-score'>0</td>
            </tr>
        </table>


        <button> START AGAIN </button>

        <!-- autoplay not working? -->
        <!-- <audio autoplay loop controls="false"> - looks ugly -->
        <audio>
            <source src="https://res.cloudinary.com/ahmedagadir/video/upload/v1531525919/retro-rock-paper-scissors/8_Bit_March.mp3" type="audio/mp3">
            <source src="https://res.cloudinary.com/ahmedagadir/video/upload/v1531526056/retro-rock-paper-scissors/8_Bit_March_2.ogg" type="audio/ogg">
        </audio>

        <!-- 8-Bit March by Twin Musicom is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
        Artist: http://www.twinmusicom.org/ -->
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=VT323');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: monospace;
}

html {
	margin: 1.5vh 1.5vw;
	min-height: 97vh;
	border: 5px solid #212121;
  padding: 10px;
  background-color: #edeff2;
  min-width: 500px;
  max-width: 1000px;
}

@media (min-width: 1000px) {
	html {
		margin: 1.5vh auto;
	}
}

/* header styling */

header {
	transition: 0.2s all smooth; 
}

header h1 {
	font-family: 'VT323', monospace;
	font-weight: lighter;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #25272E;
	text-align: center;
	position: relative;
  margin: 0 auto;
	padding: 5px;
	width: 400px;
}

header h1 #sword1, header h1 #sword2, #diamond1, #diamond2 {
	position: absolute;
	transition: 0.3s all ease;
	height: 40px;
}

header h1 #sword1 {
  top: 0;
  left: 0;
}

header h1 #sword2 {
	top: 0;
	right: 0;
}

header h1 #diamond1 {
  top: 0;
  left: -55px;
}

header h1 #diamond2 {
  top: 0;
  right: -55px;
}

/* choices styling */

.choices {
	margin: 10px auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.choices img {
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 8px;
	width: 150px;
	height: 150px;
	transition: 0.2s all;
	background-color: #212121;
}

.choices img:hover, .choices img:focus {
	filter: hue-rotate(90deg);
	cursor: pointer;
	margin-top: 8px;
	margin-bottom: 0;
}

@media (max-width: 580px) {
	.choices {
		flex-direction: column;
	}
  .choices img {
		margin: 10px auto;
	}
	.choices img:hover, .choices img:focus {
		margin-top: 0;
		margin-bottom: 20px;
  }
}

/* message and results styling */

.message, .result {
	margin: 20px auto;
	width: 178px;
	background: #CCC;
	text-align: center;
	font-size: 15px;
	transition: 0.2s all ease;
}

.result {
	width: 250px;
}

/* scoreboard styling */

table {
	margin: 0 auto;
	border: 4px solid #212121;
	font-size: 20px;
	color: #212121;
}

table th[colspan='2'] {
  border-bottom: 3px solid #212121;
  text-transform: uppercase;
}

table th, table td {
	padding: 15px;
}

table tr:nth-of-type(2) th{
	padding-bottom: 0;
}

table td#user-score, table td#computer-score {
	text-align: center;
	font-size: 17px;
	font-weight: bolder;
}

/* button styling */
/* note: hovered button styling is in main.js*/
button {
	display: block;
	margin-right: auto;
	margin-left: auto;
  margin-top: 20px;
	background: #edeff2;
	outline: none;
	color: black;
	font-family: 'VT323', monospace;
	font-size: 20px;
	letter-spacing: 0.2px;
	padding: 2px 2px;
	border: 11px solid black;
	background-clip: padding-box;
	border-image-source: url(https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/border-img.png);
	border-image-slice: 9;
	border-image-repeat: round;
	transition: 0.2s all ease;
}

@media (max-width: 580px) {  
  button {
  	margin-top: 25px;
  	margin-bottom: 20px;
  }
}
              
            
!

JS

              
                let choices = document.querySelectorAll('.choices img');
let result_outcome = document.querySelector('.result-outcome');
let result_winner = document.querySelector('.result-winner');
let user_score = document.querySelector('#user-score');
let comp_score = document.querySelector('#computer-score');


choices.forEach(choice => choice.addEventListener('click', play));

function play(event) {
	let user_choice = event.target.alt;
	let comp_choice = generateCompChoice();
	console.log('user choice: ' + user_choice, '. computer choice: ' + comp_choice);
	if (user_choice === comp_choice) draw(user_choice);
	else switch (user_choice) {
		case 'rock': comp_choice === 'scissors'? win(user_choice) : lose(user_choice);
		break;
		case 'paper': comp_choice === 'rock'? win(user_choice) : lose(user_choice);
		break;
		case 'scissors': comp_choice === 'paper'? win(user_choice) : lose(user_choice);
	}
}

function generateCompChoice() {
	let rand_index = Math.floor(Math.random() * 3);
	let choices = ['rock', 'paper', 'scissors'];
	return choices[rand_index];
}

function draw(user_choice) {
	result_outcome.textContent = `${user_choice} draws with ${user_choice}`;
	result_winner.textContent = 'Its a tie.';
}

function win(user_choice) {
	getOutcome(user_choice, 'win');
	result_winner.textContent = 'You win!!';
	user_score.textContent = Number(user_score.textContent) + 1;
}

function lose(user_choice) {
	getOutcome(user_choice, 'lose')
	result_winner.textContent = 'You Lose :('
	comp_score.textContent = Number(comp_score.textContent) + 1;
}

function getOutcome(user_choice, outcome) {
	if (outcome == 'win') {
		switch (user_choice) {
			case 'rock': result_outcome.textContent = 'rock crushes scissors';
			break;
			case 'paper': result_outcome.textContent = 'paper covers rock';
			break;
			case 'scissors': result_outcome.textContent = 'scissors cuts paper';
		}
	} else if (outcome == 'lose') {
		switch (user_choice) {
			case 'rock': result_outcome.textContent = 'paper covers rock';
			break;
			case 'paper': result_outcome.textContent = 'scissors cuts paper';
			break;
			case 'scissors': result_outcome.textContent = 'rock crushes scissors';		
		}
	}
}

// button styling

let button = document.querySelector('button');

button.addEventListener('click', reset);

function reset() {
	user_score.textContent = '0';
	comp_score.textContent = '0';
	result_outcome.textContent = '...';
	result_winner.textContent = '...';
}

 button.addEventListener('mouseover', colorOn);
 button.addEventListener('mouseout', colorOff);

function colorOn() {
 	if (user_score.textContent === comp_score.textContent) 
 		styleButton('black', 'url(https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/border-img-hover.png)')
 	else if (user_score.textContent > comp_score.textContent) 
 		styleButton('#00FF21', 'url(https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/border-img-winning.png)')
 	else if (user_score.textContent < comp_score.textContent) 
 		styleButton('#FF0000', 'url(https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/border-img-losing.png)');	
}

function styleButton(background_color, backgroud_url) {
 	button.style.color = 'white';
	button.style.background = background_color;
	button.style.borderImageSource = backgroud_url;
	button.style.borderImageSlice = '9';
 	button.style.marginTop = '25px';
 	button.style.cursor = 'pointer';
}

function colorOff() {
 	button.style.background = '#edeff2';
 	button.style.color = 'black';
 	button.style.borderImageSource = 'url(https://res.cloudinary.com/ahmedagadir/image/upload/v1530727623/retro-rock-paper-scissors/border-img.png)';
 	button.style.borderImageSlice = '9';
 	button.style.marginTop = '20px';
 	button.style.cursor = 'default';
}

// header styling

let heading = document.getElementsByTagName('h1')[0];

heading.addEventListener('mouseover',() => {
	heading.style.cssText = 'cursor: default; filter: contrast(200%);';
})

heading.addEventListener('mouseout',() => {
	heading.style.cssText = 'transition: 0.2s all smooth; cursor: ;';
});

// find a way for the audio to autoplay 

window.addEventListener('click', playAudio);

function playAudio() {
	document.querySelector('audio').play();
	document.querySelector('audio').loop = true;
  window.removeEventListener('click', playAudio);
}








              
            
!
999px

Console