Visual improvements

DavidStaus · Oct 13, 2024 · 2dfbdb1 · 2dfbdb1
1 parent 3659c84
commit 2dfbdb1
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -6,19 +6,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script defer src="./script.js"></script>
+    <link rel="stylesheet" href="style.css">
+
 </head>
 
 <body>
 
-    <div id="buttons">
-        <button id="rock">Rock</button>
-        <button id="paper">Paper</button>
-        <button id="scissors">Scissors</button>
+    <div class="container">
+        <div id="buttons">
+            <button id="rock">Rock</button>
+            <button id="paper">Paper</button>
+            <button id="scissors">Scissors</button>
+        </div>
+        <div id="results"></div>
+        <div id="score"></div>
     </div>
 
-    <div id="results"></div>
-    <div id="score"></div>
-
 </body>
 
 </html>
diff --git a/script.js b/script.js
@@ -145,6 +145,23 @@ function playRound(e) {
     console.log('You lost to a bad javascript. Humiliating.');
     alert('You lost to a bad javascript. Humiliating.');
     }
+
+    if (humanScore === 5 || computerScore === 5) {
+        buttons.removeEventListener('click', playRound);
+        const reset = document.createElement('button');
+        reset.className = 'reset';
+        reset.textContent = 'Reset';
+        document.querySelector('.container').appendChild(reset);
+        reset.addEventListener('click', (e) => {
+            humanScore = 0;
+            computerScore = 0;
+            buttons.addEventListener('click', playRound);
+            scoreBox.textContent = `You: ${humanScore} \n Computer: ${computerScore}`;
+            resultOfRound.textContent = ``;
+            comChoiceText.textContent = ``;
+            reset.remove();
+        })
+    }
 }
 
 function getComputerChoice() {

diff --git a/style.css b/style.css
@@ -0,0 +1,55 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    border: red 1px solid
+}
+
+.container {
+    margin: 50px auto;
+    width: fit-content;
+    padding: 20px;
+}
+
+button {
+    padding: 4px;
+    width: 100px;
+    margin: 0 5px 20px;
+    font-weight: 700;
+    background-color: lightskyblue;
+    border: royalblue;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    transition: 0.2s;
+}
+
+button:hover {
+    background-color: lightblue;
+    cursor: pointer;
+}
+
+button:active {
+    box-shadow: inset 0px 0px 5px #91919191;
+}
+
+button:disabled {
+    background-color: #a8a8a8;
+}
+
+.container p {
+    margin-bottom: 10px;
+    text-align: center;
+}
+#score {
+    border: 1px solid gray;
+    text-align: center;
+}
+
+.reset {
+    background-color: rgb(240, 128, 128);
+    margin: 20px 120px;
+}
+
+.reset:hover {
+    background-color: rgb(241, 162, 162); 
+
+}