finished editing responsive design css

Author: cosmicCode42

assets/css/style.css

@@ -45,10 +45,6 @@ h1,h2,h3,h4,h5,h6 {
     float: inline-start;
 }
 
-#start:hover  {
-    opacity: 0.85;
-}
-
 .button-left {
     left: 25%;
 }
@@ -82,6 +78,10 @@ h1,h2,h3,h4,h5,h6 {
     top: 30%;
 }
 
+#start:hover  {
+    opacity: 0.85;
+}
+
 /* ---------------- button reactiveness */
 
 .light {
@@ -92,6 +92,10 @@ h1,h2,h3,h4,h5,h6 {
     border: 5px inset #000000;
 }
 
+.hide {
+    visibility: hidden;
+}
+
 /* ---------------- responsive design for different screen sizes */
 
 @media screen and (max-width: 1024px) {
@@ -138,4 +142,61 @@ h1,h2,h3,h4,h5,h6 {
         top: 25%;
         left: 40%;
     }
+}
+
+@media screen and (max-width: 426px) {
+    h1,h2,h3,h4,h5,h6 {
+        padding: 0rem;
+    }
+
+    .button-left {
+        left: 8%;
+    }
+
+    .button-right {
+        left: 30%;
+    }
+
+    #start {
+        left: 35%;
+    }
+}
+
+@media screen and (max-width: 376px) {
+
+    .button-left {
+        left: 4%;
+    }
+
+    .button-right {
+        left: 24%;
+    }
+
+    #start {
+        left: 32.5%;
+    }
+}
+
+@media screen and (max-width: 321px) {
+
+    h4 {
+        font-size: 0.9rem;
+    }
+
+    .heading-container {
+        height: 6rem;
+        padding-left: 18%;
+    }
+
+    .button-left {
+        left: 1%;
+    }
+
+    .button-right {
+        left: 15%;
+    }
+
+    #start {
+        left: 28.5%;
+    }
 }

assets/js/script.js

@@ -35,7 +35,7 @@ const newGame = () => {
 
     gameReset();
 
-    // we want to hide the Start Game button after clicking it. That code will go here.
+    document.querySelector('#start').classList.add("hide");
 
     // start the game. This entire part was copied from the Simon game codealong challenge () and edited for my purposes.
     for (const node of listOfNodes) {
@@ -150,7 +150,7 @@ const playerTurn = () => {
             document.querySelector('#maxlength').innerHTML = gameConfig.patternCount;
         };
         gameReset();
-        // we want code to resummon the start button.
+        document.querySelector('#start').classList.remove("hide");
     };
 };
 

assets/js/tests/script.test.js

@@ -150,7 +150,6 @@ describe("scores are updating properly", () => {
         gameConfig.currentPat = [4, 6, 1, 7, 2, 3, 5];
         gameConfig.playerInput = [4, 6, 1, 7, 2, 3, 2];
         gameConfig.score = 27;
-        playerTurn();
     });
     test("high score is correctly updated", () => { 
         expect(document.querySelector('#highscore').innerHTML).toBe("27");