Rock Paper Scissors

Developer
Scott Dawson
Size
2,428 Kb
Views
8,096
  1. Rock Paper Scissors Previews
  2. Rock Paper Scissors HTML Codes
  3. Rock Paper Scissors CSS Codes
  4. Rock Paper Scissors JS Codes

How do I make an rock paper scissors?

Font Awesome introduced 66 new icons in 4.4, including these three that inspired this pen. Just because. . What is a rock paper scissors? How do you make a rock paper scissors? This script and codes were developed by Scott Dawson on 02 January 2023, Monday.

Rock Paper Scissors Previews
IQ Test

Rock Paper Scissors - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rock Paper Scissors</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Exo+2:400,800'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="playContainer"> <div class="ready"> <i class="fa fa-circle-o-notch fa-spin"></i> <p class="readyContainer"><span class="ready1">Rock ... </span><span class="ready2">Paper ... </span><span class="ready3">Scissors ... </span></p> </div> <div class="hand hand-1"> <i class="fa fa-hand-rock-o"></i> <p>Rock!</p> </div> <div class="hand hand-2"> <i class="fa fa-hand-paper-o"></i> <p>Paper!</p> </div> <div class="hand hand-3"> <i class="fa fa-hand-scissors-o"></i> <p>Scissors!</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Rock Paper Scissors - Script Codes CSS Codes

body { background: #121212; color: white; margin-top: 150px; font-family: 'Exo 2', sans-serif;
}
.playContainer { width: 100%; text-align: center;
}
.hand i { display: block; margin: 0 auto; font-size: 9em;
}
.ready i { font-size: 4em; margin-bottom: 20px; margin-top: 20px; color: #444;
}
.ready p, .hand p { font-size: 2em; margin-top: 20px;
}
.ready1 { color: #F54863; }
.ready2 { color: #39C9E7; }
.ready3 { color: #70CF31; }
.bg1 { background-color: #F54863; }
.bg2 { background-color: #39C9E7; }
.bg3 { background-color: #70CF31; }

Rock Paper Scissors - Script Codes JS Codes

function revealReady(i) { if (i <= 3) { // counting down $(".readyContainer span").hide(); $(".ready" + i).show(); i++; setTimeout(function(){ revealReady(i); }, 1000); } else { // get random 1-3 var randomHand = Math.floor((Math.random() * 3) + 1); // show the result $(".hand-" + randomHand).show(); // add body bg color $("body").addClass("bg" + randomHand); // hide the ready section $(".ready").hide(); // start over every 5 sec setTimeout(function(){ startOver(); }, 5000); }
}
function startOver() { $("body").removeClass('bg1'); $("body").removeClass('bg2'); $("body").removeClass('bg3'); $(".ready").show(); $(".hand").hide(); $(".readyContainer span").hide(); revealReady(1);
}
startOver();
Rock Paper Scissors - Script Codes
Rock Paper Scissors - Script Codes
Home Page Home
Developer Scott Dawson
Username DawsonMediaD
Uploaded January 02, 2023
Rating 3
Size 2,428 Kb
Views 8,096
Do you need developer help for Rock Paper Scissors?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Scott Dawson (DawsonMediaD) Script Codes
Name
Bootstrap 3 Variable-Width Modal
Simple CSS for Disabled Buttons
Photo Gallery POC
Fading Message Notification
Integrating Bounce.js with Angular.js
Animate Page Transition Using jQuery and CSS3 Scale Transforms
CSS Regions for Codepen.io Pattern Rodeo
Bookmarklet for Searching Google from Current URL
Problem with Chrome Row Hover
Beveled corners using CSS border attribute
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!