timer added + css upadates

finalpage.html

@@ -12,7 +12,9 @@ <h1>GAME END </h1>
 </div>
 
 <p id="final"> YOUR SCORE IS </p> 
-<a href="./front-page/index.html"><button class="level-1">RESTART GAME</button></a>
+ <a href="./front-page/index.html"> 
+    <button class="restart-game">RESTART GAME</button>
+ </a> 
 
 
 <style> 
@@ -22,6 +24,8 @@ <h1>GAME END </h1>
     background-image: url('https://images.squarespace-cdn.com/content/v1/5d122e0d694a030001ef945a/2c436b73-d614-4506-bb8f-463f0b80b00e/possible+memoir+1.gif');
     background-size: cover;
     z-index: -2;
+    width: 100vw;
+    height: 100vh;
 }
 
 .heading h1 { 
@@ -36,21 +40,43 @@ <h1>GAME END </h1>
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 } 
-.level-1 {
+.restart-game {  
     background-color: rgb(235, 162, 213);
     color: rgb(7, 6, 6);
     padding: 20px;
+    margin-left: 35%;
     font-size: 24px;
     border: none;
     cursor: pointer;
     box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
+   display: flex;
+   justify-content: center;
+   align-items: center;
+    text-decoration: none;
+    width: 30vw;
 }
 
+#final{
+    text-align: center; 
+    top: 10vh;
+    font-size: 30px;
+    font-weight: bold;
+    color: rgb(24, 17, 17);
+    font-family: 'Unicorn Regular';
+    text-shadow: 2px 2px rgb(19, 16, 16);
+    background: -webkit-linear-gradient(red, blue);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+
     </style> 
 <script>
-    var name = localStorage.getItem('playerName');
+    window.onload=()=>{
+        var name = localStorage.getItem('playerName');
     var score = localStorage.getItem('score');
-    document.getElementById("final").innerText= "Thank you " + name + ", your score is " + score;
+    document.getElementById("final").innerHTML= `Thankyou ${name}, your score is ${score}`;
+    }
 
 </script>
 </body>

front-page/instruction.html

@@ -11,23 +11,26 @@
         <h1>INSTRUCTIONS </h1>
 </div>
 
-    <section class="instructions"><pre>
-Click on the "Play" button to begin the game.
+    <section class="instructions"><p>
+Click on the "Let's Begin" button to begin the game.
 Select the level which you are comfortable with.
-A scrambled word will be presented to you.
-Unscramble the letters to form a valid word.
-Time Limit:
-You have 30 seconds to unscramble each word.
-The countdown timer is displayed in the "Time Left" section.
+Unscramble the letters to form a valid word.<br>
+TIME LIMIT:
+You have max 30 seconds to unscramble each word and 1 minute for a level. After a mintue page the game 
+will end and you'll be presented with your scores.
 Type your answer into the text input box.
-Make sure your word is valid and correctly spelled.
-Checking Your Answer:
+Make sure your word is correctly spelled.<br>
+CHECKING THE ANSWER:
 Click on the "Check Word" button to validate your answer.
 Need a new challenge? Click on the "New Word" button to get a new scrambled word.
 The game continues until you run out of time or successfully unscramble all words.
+SCORE: <br>
+Score will be displayed at the right side. +10 points for every correct answer.
+-END GAME button will be present in the right bottom of the page 
+which will redirect to the level selection page.<br>
 
-Best of luck!</pre> 
-<a href="../front-page/index.html"><button class="level-1">Let's Begin</button></a>
+Best of luck!</p> 
+<a href="../front-page/index.html"><button class="lets-begin">Let's Begin</button></a>
 </section> 
 
 
@@ -38,11 +41,12 @@ <h1>INSTRUCTIONS </h1>
     background-image: url('https://gifdb.com/images/high/pastel-sky-background-3garh8rnc14jym78.gif');
     background-size: cover;
     z-index: -2;
+    font-weight: 600;
 }
 
 .heading h1 { 
     text-align: center; 
-    top: 10vh;
+    top: 3vh;
     font-size: 80px;
     font-weight: bold;
     color: rgb(24, 17, 17);
@@ -54,15 +58,15 @@ <h1>INSTRUCTIONS </h1>
 } 
 
 .instructions { 
-    text-align: left;
+    text-align: center;
     width: 80%;
     margin: 0 auto;
     padding: 20px;
     font-size: 18px;
     line-height: 1.5;
 }
 
-.level-1 {
+.lets-begin {
     background-color: rgb(235, 162, 213);
     color: rgb(7, 6, 6);
     padding: 20px;
@@ -71,5 +75,17 @@ <h1>INSTRUCTIONS </h1>
     cursor: pointer;
     box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
 }
+@media screen and (max-width: 768px) {
+            .heading {
+                font-size: large;
+            }
 
-    </style>
+            .instructions {
+                font-size: large;
+            }
+        }
+
+    </style>
+
+    </body>
+    </html>

front-page/name.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TWISTED WORDS</title>
-    <link rel="stylesheet" href="style.css">
 
 </head>
 <body> 
@@ -48,14 +47,12 @@ <h1>TWISTED WORDS</h1>
     </script>
 
 <style>
-            body {
+body {
+
     font-family: Arial, sans-serif; 
     background-image: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExaDI2N2l1dmE3emgxbDBrM2loYmZscmdrMHpnMDE0YWMxMGVzbTdnZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GiXBNzilzkHH1GY7Vc/giphy.gif');
     background-repeat: no-repeat;
     background-size: cover;
-    padding: 20px;
-    z-index: -2;
-
 }
 h1 { 
 text-align: center;
@@ -79,8 +76,6 @@ <h1>TWISTED WORDS</h1>
             max-width: 400px;
             margin: 30px auto;
             padding: 20px;
-            border: 1px solid #fdfdfd;
-            border-radius: 4px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             font-weight: 700;
         }

front-page/styles.css

@@ -75,3 +75,4 @@ button {
 }
 
 
+

scramble word/index1.html

@@ -8,7 +8,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   </head>
-  <body>
+  <body> 
+    <span id="time"></span>
     <audio src='./../assests/8-bit-background-music-for-arcade-game-come-on-mario-164702.mp3' style="display: none;" autoplay loop preload="auto"></audio>
     <div class="container">
         <h2>LEVEL 1</h2>

scramble word/js/script1.js

@@ -3,7 +3,32 @@ hintText = document.querySelector(".hint span"),
 timeText = document.querySelector(".time b"),
 inputField = document.querySelector("input"),
 refreshBtn = document.querySelector(".new-word"),
-checkBtn = document.querySelector(".check-word");
+checkBtn = document.querySelector(".check-word"); 
+
+
+function startTimer(duration, display) {
+
+    var timer = duration, minutes, seconds;
+    setInterval(function () {
+        minutes = parseInt(timer / 60, 10);
+        seconds = parseInt(timer % 60, 10);
+
+        minutes = minutes < 10 ? "0" + minutes : minutes;
+        seconds = seconds < 10 ? "0" + seconds : seconds;
+
+        display.textContent = minutes + ":" + seconds;
+
+        if (--timer <= 0) {
+            location.href='../finalpage.html'
+        }
+    }, 1000);
+}
+
+window.onload = function () {
+    var duration = 1 * 60, // time in seconds
+        display = document.querySelector('#time');
+    startTimer(duration, display);
+};
 
 let correctWord, timer, score = 0;
 

scramble word/style1.css

@@ -130,7 +130,9 @@ body{
   width: 100px;
   height: 100px;
   position: relative;
-  background-color: transparent;
+  background-color: transparent; 
+  right: 15vh;
+  top: 5vh;
 }
 #score {
   width: 50%;
@@ -172,4 +174,12 @@ body{
  #end-game:hover {
   background-color: #ff7961;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-}
+} 
+ #time {
+font-size: 60px;
+color: #161511;
+text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+position:absolute;
+right: 89vw;
+bottom:90vh;
+ }

scramble word2/index2.html

@@ -9,6 +9,7 @@
 
   </head>
   <body>
+    <span id="time"></span>
     <audio src='./../assests/8-bit-background-music-for-arcade-game-come-on-mario-164702.mp3' style="display: none;" autoplay loop preload="auto"></audio>
     <div class="container">
         <h2>LEVEL 2</h2>

scramble word2/js/script2.js

@@ -6,6 +6,31 @@ inputField = document.querySelector("input"),
 refreshBtn = document.querySelector(".new-word"),
 checkBtn = document.querySelector(".check-word");
 
+//whole-page timer
+function startTimer(duration, display) {
+
+    var timer = duration, minutes, seconds;
+    setInterval(function () {
+        minutes = parseInt(timer / 60, 10);
+        seconds = parseInt(timer % 60, 10);
+
+        minutes = minutes < 10 ? "0" + minutes : minutes;
+        seconds = seconds < 10 ? "0" + seconds : seconds;
+
+        display.textContent = minutes + ":" + seconds;
+
+        if (--timer <= 0) {
+            location.href='../finalpage.html'
+        }
+    }, 1000);
+}
+
+window.onload = function () {
+    var duration = 1 * 60, // time in seconds
+        display = document.querySelector('#time');
+    startTimer(duration, display);
+};
+
 let correctWord, timer;
 
 const initTimer = maxTime => {

scramble word2/style2.css

@@ -131,6 +131,8 @@
     height: 100px;
     position: relative;
     background-color: transparent;
+    right: 15vh;
+    top: 5vh;
   }
   #score {
     width: 50%;
@@ -172,4 +174,12 @@
    #end-game:hover {
     background-color: #ff7961;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-  }
+  }
+  #time {
+    font-size: 60px;
+    color: #161511;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    position:absolute;
+    right: 89vw;
+    bottom:90vh;
+     }

scramble word3/index3.html

@@ -10,6 +10,7 @@
     <script src="js/script3.js" defer></script>
   </head>
   <body>
+    <span id="time"></span>
     <audio src='./../assests/8-bit-background-music-for-arcade-game-come-on-mario-164702.mp3' style="display: none;" autoplay loop preload="auto"></audio>
     <div class="container">
         <h2>LEVEL 3</h2>

scramble word3/js/script3.js

@@ -7,6 +7,32 @@ checkBtn = document.querySelector(".check-word");
 
 let correctWord, timer;
 
+//whole-page timer
+function startTimer(duration, display) {
+
+    var timer = duration, minutes, seconds;
+    setInterval(function () {
+        minutes = parseInt(timer / 60, 10);
+        seconds = parseInt(timer % 60, 10);
+
+        minutes = minutes < 10 ? "0" + minutes : minutes;
+        seconds = seconds < 10 ? "0" + seconds : seconds;
+
+        display.textContent = minutes + ":" + seconds;
+
+        if (--timer <= 0) {
+            location.href='../finalpage.html'
+        }
+    }, 1000);
+}
+
+window.onload = function () {
+    var duration = 1 * 60, // time in seconds
+        display = document.querySelector('#time');
+    startTimer(duration, display);
+};
+
+
 const initTimer = maxTime => {
     clearInterval(timer);
     timer = setInterval(() => {

scramble word3/style3.css

@@ -131,6 +131,8 @@
     height: 100px;
     position: relative;
     background-color: transparent;
+    right: 15vh;
+    top: 5vh;
   }
   #score {
     width: 50%;
@@ -172,4 +174,12 @@
    #end-game:hover {
     background-color: #ff7961;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-  }
+  }
+  #time {
+    font-size: 60px;
+    color: #161511;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+    position:absolute;
+    right: 89vw;
+    bottom:90vh;
+     }