├── index.html ├── styles.css └── index.js /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rock paper scissors 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Computer : 0

15 |

You : 0

16 |
17 |
18 | 21 | 24 | 27 |
28 |
29 |

30 |

31 |

32 |
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | padding: 0; 5 | margin: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | height: 100vh; 11 | background: linear-gradient(135deg, #ffcf1b, #ff8b1b); 12 | } 13 | 14 | .container { 15 | width: 45%; 16 | min-width: 500px; 17 | background-color: #ffffff; 18 | padding: 40px 30px; 19 | position: absolute; 20 | transform: translate(-50%, -50%); 21 | top: 50%; 22 | left: 50%; 23 | border-radius: 10px; 24 | box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15); 25 | } 26 | 27 | .scores { 28 | margin-bottom: 50px; 29 | text-align: right; 30 | } 31 | 32 | .weapons { 33 | width: 90%; 34 | margin: auto; 35 | display: flex; 36 | justify-content: space-around; 37 | } 38 | 39 | .weapons button { 40 | background-color: #ffd51b; 41 | color: #000000; 42 | border: none; 43 | font-size: 50px; 44 | height: 100px; 45 | width: 100px; 46 | border-radius: 50%; 47 | outline: none; 48 | cursor: pointer; 49 | } 50 | 51 | .details { 52 | margin-top: 30px; 53 | text-align: center; 54 | } 55 | 56 | .scores, 57 | .details { 58 | font-family: 'Poppins', sans-serif; 59 | font-weight: 400; 60 | font-size: 15px; 61 | } 62 | 63 | #result { 64 | width: 180px; 65 | padding: 10px 0; 66 | margin: 30px auto; 67 | font-weight: 600; 68 | letter-spacing: 0.5px; 69 | } 70 | 71 | #user_choice, 72 | #computer_choice { 73 | font-weight: 400; 74 | margin-bottom: 10px; 75 | } 76 | 77 | span { 78 | font-weight: 600; 79 | } -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | let [computer_score, user_score] = [0, 0]; 2 | let result_ref = document.getElementById("result"); 3 | let choices_object = { 4 | 'rock': { 5 | 'rock': 'draw', 6 | 'scissor': 'win', 7 | 'paper': 'lose' 8 | }, 9 | 'scissor': { 10 | 'rock': 'lose', 11 | 'scissor': 'draw', 12 | 'paper': 'win' 13 | }, 14 | 'paper': { 15 | 'rock': 'win', 16 | 'scissor': 'lose', 17 | 'paper': 'draw' 18 | } 19 | } 20 | 21 | function checker(input) { 22 | var choices = ["rock", "paper", "scissor"]; 23 | var num = Math.floor(Math.random() * 3); 24 | 25 | document.getElementById("comp_choice").innerHTML = 26 | ` Computer chose ${choices[num].toUpperCase()} `; 27 | 28 | document.getElementById("user_choice").innerHTML = 29 | ` You chose ${input.toUpperCase()} `; 30 | 31 | let computer_choice = choices[num]; 32 | 33 | switch (choices_object[input][computer_choice]) { 34 | case 'win': 35 | result_ref.style.cssText = "background-color: #cefdce; color: #689f38"; 36 | result_ref.innerHTML = "YOU WIN"; 37 | user_score++; 38 | break; 39 | case 'lose': 40 | result_ref.style.cssText = "background-color: #ffdde0; color: #d32f2f"; 41 | result_ref.innerHTML = "YOU LOSE"; 42 | computer_score++; 43 | break; 44 | default: 45 | result_ref.style.cssText = "background-color: #e5e5e5; color: #808080"; 46 | result_ref.innerHTML = "DRAW"; 47 | break; 48 | } 49 | 50 | document.getElementById("computer_score").innerHTML = computer_score; 51 | document.getElementById("user_score").innerHTML = user_score; 52 | } 53 | 54 | // Add event listeners to the buttons 55 | document.getElementById("rock").addEventListener("click", () => checker("rock")); 56 | document.getElementById("paper").addEventListener("click", () => checker("paper")); 57 | document.getElementById("scissors").addEventListener("click", () => checker("scissor")); 58 | --------------------------------------------------------------------------------