Scribd
Upload
13 views1 page

Rock Webpage Code

This document contains code for a rock-paper-scissors webpage. It includes HTML, CSS, and JavaScript code. The HTML defines the page structure and buttons to choose rock, paper, or scissors. The CSS styles the page layout and elements. The JavaScript contains functions to get a random computer choice, determine the winner based on the game rules, and display the results.

Uploaded by

mongggo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views1 page

Rock Webpage Code

This document contains code for a rock-paper-scissors webpage. It includes HTML, CSS, and JavaScript code. The HTML defines the page structure and buttons to choose rock, paper, or scissors. The CSS styles the page layout and elements. The JavaScript contains functions to get a random computer choice, determine the winner based on the game rules, and display the results.

Uploaded by

mongggo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Rock, Paper, Scissors: code for webpage

[Link]:

htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0"> <title> Rock, Paper,
Scissors </title> <link rel="stylesheet" href="[Link]"> </head> <body> <div
class="container"> <h1> Rock, Paper, Scissors </h1> <div class="choices"> <button
onclick="makeChoice('rock')"> Rock </button> <button
onclick="makeChoice('paper')"> Paper </button> <button
onclick="makeChoice('scissors')"> Scissors </button> </div> <div id="result"></div>
</div> <script src="[Link]"></script> </body> </html>

[Link]:

cssCopy code
body { font-family : 'Arial' , sans-serif; background-color : #f4f4f4 ; margin : 0 ; display :
flex; align-items : center; justify-content : center; height : 100vh ; } .container { text-align :
center; background-color : #fff ; padding : 20px ; border-radius : 8px ; box-shadow : 0 0
10px rgba ( 0 , 0 , 0 , 0.1 ); } .choices button { padding : 10px ; margin : 5px ; cursor :
pointer; } #result { font-size : 18px ; margin-top : 20px ; }

[Link]:

jsCopy code
const choices = [ 'rock' , 'paper' , 'scissors' ]; function makeChoice ( playerChoice ) { const
computerChoice = getRandomChoice (); const result = determineWinner (playerChoice,
computerChoice); displayResult (playerChoice, computerChoice, result); } function
getRandomChoice () { const randomIndex = Math . floor ( Math . random () *
choices. length ); return choices[randomIndex]; } function determineWinner ( playerChoice,
computerChoice ) { if (playerChoice === computerChoice) { return 'It\'s a tie!' ; } if
( (playerChoice === 'rock' && computerChoice === 'scissors' ) || (playerChoice === 'paper'
&& computerChoice === 'rock' ) || (playerChoice === 'scissors' && computerChoice ===
'paper' ) ) { return 'You win!' ; } return 'Computer wins!' ; } function
displayResult ( playerChoice, computerChoice, result ) { const resultElement =
document . getElementById ( 'result' ); resultElement. textContent = `You chose $
{playerChoice}. Computer chose ${computerChoice}. ${result}` ; }

This code sets up a basic webpage where the user can click buttons to choose
rock, paper, or scissors. The computer's choice is randomly generated, and the
winner is determined based on the game rules. The result is displayed below
the buttons.

You might also like