added count down timer

index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="style.css">
   <!-- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-  <title> HORRORDLE </title>
+  <title> test </title>
 </head>
 <div class="topnav">
   <div class="subnav">
@@ -16,7 +16,7 @@
   <a class="wideInfo" href="#support"><i class="fa fa-heart"></i></a>
   </div>
 
-  <img class="title"  width="300" src="title.png" alt="horrordle">
+  <img class="title"  width="300" src="title.png" alt="horror">
 
   <!-- <a href="#news">News</a>
   <a href="#contact">Contact</a> -->
@@ -156,13 +156,15 @@
     <div class="autocomplete">
         <!-- <label for="guess">Movie:</label> -->
         <input type="text" id="guess" placeholder="Movie">
+        <input type="button" id="submitGuess" value="Submit Guess">
     </div>
-    <input type="button" id="submitGuess" value="Submit Guess">
+    
   </form>
-
+  <h1 id="movieName"></h1>
   <p id="feedback"></p>
   <h2 id="countDown"></h2>
   <div class="result">
+    <div id="resultText"></div>
     <input onclick="copyToClipboard()" type="button" id="shareResult" value="Share Result">
   </div>
   <div class="bottomContainer">
@@ -173,14 +175,14 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <script src="main.js"></script>
 
-<footer class="footer">
+<!-- <footer class="footer">
-  <!-- <p>Designed with ❤️ by <a href="https://ko-fi.com/Gorkem">Görkem</a></p> -->
+  <p>Designed with ❤️ by <a href="https://ko-fi.com/Gorkem">Görkem</a></p>
 
 
   <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />
 
 
-</footer>
+</footer> -->
 
 </body>
 

main.js

@@ -10,10 +10,10 @@ for (var i = 0; i < localStorage.length; i++){
 
 
 
-  var movies = ["a nightmare on elm street","Friday the 13th","Event Horizon","Hellraiser","The Cabin in the Woods","American Psycho","It Follows","Candyman","Child's Play","The Texas Chain Saw Massacre","Alien","Halloween"];
+  var movies = ["A Nightmare on Elm Street","Friday the 13th","Event Horizon","Hellraiser","The Cabin in the Woods","American Psycho","It Follows","Candyman","Child's Play","The Texas Chain Saw Massacre","Alien","Halloween"];
   var pix = [];
   autocomplete(document.getElementById("guess"), movies);
-  var gameBeginning = new Date('September 10, 2022 13:02:00');
+  var gameBeginning = new Date('September 9, 2022 24:00:00');
   var countDownTime =  new Date();
   var present_date = new Date();
 
@@ -110,10 +110,10 @@ streakNumber.textContent = localStorage.getItem('streak');
   console.log(localStorage.getItem('secondGuess'));
   if(localStorage.getItem('guessNo')){guessNo=localStorage.getItem('guessNo')};
   feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
-  if(localStorage.getItem('result')) {localStorage.setItem('result', textResult);}
+  if(localStorage.getItem('result')) {localStorage.setItem('result', textResult);document.getElementById("resultText").innerHTML =textResult}
   if(localStorage.getItem('firstGuess')){firstGuess.textContent = "❌" + localStorage.getItem('firstGuess');document.getElementById("firstGuess").style.display = "block";}
   if(localStorage.getItem('secondGuess')){secondGuess.textContent = "❌" + localStorage.getItem('secondGuess');document.getElementById("secondGuess").style.display = "block";}
-  if(localStorage.getItem('winningGuess')){feedback.textContent = "You got it right!";document.getElementById("shareResult").style.display = "block";document.getElementById("countDown").style.display = "block";document.getElementById("guessForm").style.display = "none";document.getElementById("firstGuess").style.display = "none";document.getElementById("secondGuess").style.display = "none";}else {document.getElementById("shareResult").style.display = "none";document.getElementById("guessForm").style.display = "block";};
+  if(localStorage.getItem('winningGuess')){document.getElementById("feedback").innerHTML = "Next movie will reveal at <b>midnight!</b> 🕛";document.getElementById("shareResult").style.display = "block";document.getElementById("countDown").style.display = "block";document.getElementById("guessForm").style.display = "none";document.getElementById("firstGuess").style.display = "none";document.getElementById("secondGuess").style.display = "none";}else {document.getElementById("shareResult").style.display = "none";document.getElementById("guessForm").style.display = "block";};
   secondGuess.textContent = "❌" + localStorage.getItem('secondGuess');
 }else {
 clearGuess();
@@ -152,7 +152,7 @@ console.log("day count:" + dayCount);
       console.log(localStorage.getItem('day'+dayCount));
       streakNumber.textContent = " " + localStorage.getItem('streak');
       document.getElementById("guessForm").style.display = "none";
-      feedback.textContent = "You got it right!";
+      document.getElementById("movieName").innerHTML = "✔️ " + movieOfTheDay + " ✔️";
       document.getElementById("countDown").style.display = "block";
       document.getElementById("shareResult").style.display = "block";
       localStorage.setItem("winningGuess", guess.value);
@@ -164,8 +164,11 @@ console.log("day count:" + dayCount);
         textResult = textResult + "⬛";
       }
       localStorage.setItem('result', textResult);
+      document.getElementById("feedback").innerHTML = "Next movie revealed at midnight! 🕛 <br>";
+      document.getElementById("resultText").innerHTML = textResult;
       dates[dayCount-1].classList.add('won');
 
+
     } else if(guessNo==1){
       guessNo = guessNo + 1;
       localStorage.setItem('guessNo', guessNo);
@@ -368,9 +371,10 @@ const config = {
 };
 
 var x = setInterval(function() {
-  countDownTime.setDate(Math.floor((present_date - gameBeginning) / (1000 * 60 * 60 * 24))+2);
+  // countDownTime.setDate(Math.floor((present_date - gameBeginning) / (1000 * 60 * 60 * 24))+2);
-  countDownTime.setHours(13);
+  countDownTime.setDate(present_date.getDate()+1);
-  countDownTime.setMinutes(02);
+  countDownTime.setHours(24);
+  countDownTime.setMinutes(0);
   countDownTime.setSeconds(0);
   var now = new Date();
   var remainingTime = countDownTime - now;

style.css

@@ -81,7 +81,7 @@ align-items: center;
 .footer{
   font-family: 'Arial', sans-serif;
   font-size: 12px;
-  position: absolute;
+  position: relative;
   bottom: 10px;
   left: 0;
   right: 0;
@@ -181,13 +181,16 @@ figure{
 }
 .autocomplete {
   /*the container must be positioned relative:*/
-  width: 60%;
+  width: 100%;
   text-align:left;
   position: relative;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
 }
 #guessForm {
-  width: 50%;
+  width: 40%;
   left: 0;
   right: 0;
   margin: 0 auto;
@@ -210,7 +213,18 @@ input[type=button] {
   background-color: #B91C1C;
   color: #fff;
 }
+
+/* .autocomplete{
+  display:flex;
+} */
+#submitGuess{
+margin-left: 8px;
+}
 .autocomplete-items {
+  margin-bottom: 40px;
+}
+.autocomplete-items {
+  align-self:flex-end;
   position: absolute;
   border: 1px solid #d4d4d4;
   color: black;
@@ -218,11 +232,12 @@ input[type=button] {
   border-top: none;
   z-index: 99;
   /*position the autocomplete items to be the same width as the container:*/
-  top: 100%;
+  /* top: 100%; */
   left: 0;
   right: 0;
 }
 .autocomplete-items div {
+  align-self:flex-end;
   padding: 10px;
   cursor: pointer;
   background-color: #fff;
@@ -295,9 +310,7 @@ input[type=button] {
     width: 100%;
   }
 
-  #guessForm {
+
-    width: 100%;
-  }
   #firstGuess , #secondGuess{
 
     width: 100%;
@@ -452,7 +465,7 @@ input[type=button] {
   color: #fff;
 }
 #guessForm {
-  width: 100%;
+  width: 90%;
 }
 
 }