added function to preload images

autoComplete.css

@@ -0,0 +1,128 @@
+.autoComplete_wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.autoComplete_wrapper > input {
+  height: 40px;
+  width: 100%;
+  margin: 0;
+  padding: 0 2rem 0 3rem;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  font-size: 1rem;
+  text-overflow: ellipsis;
+  color: black;
+  outline: none;
+  /* border-radius: 10rem; */
+  /* border: 0.05rem solid rgba(255, 0, 9, 0.5); */
+  background-image: url(./images/search.svg);
+  background-size: 1.4rem;
+  background-position: left 0.8rem top 0.5rem;
+  background-repeat: no-repeat;
+  background-origin: border-box;
+  background-color: #fff;
+  transition: all 0.4s ease;
+  -webkit-transition: all -webkit-transform 0.4s ease;
+}
+
+.autoComplete_wrapper > input::placeholder {
+  color: grey;
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:hover::placeholder {
+  color: grey;
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:focus::placeholder {
+  padding: 0.1rem 0.6rem;
+  font-size: 0.95rem;
+  color: rgb(224, 224, 224);
+}
+
+.autoComplete_wrapper > input:focus::selection {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > input::selection {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > input:hover {
+  color: grey;
+  transition: all 0.3s ease;
+  -webkit-transition: all -webkit-transform 0.3s ease;
+}
+
+.autoComplete_wrapper > input:focus {
+  color: grey;
+  border: 0.06rem solid grey;
+}
+
+.autoComplete_wrapper > ul {
+  position: absolute;
+  max-height: 226px;
+  overflow-y: scroll;
+  box-sizing: border-box;
+  left: 0;
+  right: 0;
+  margin: 0.5rem 0 0 0;
+  padding: 0;
+  z-index: 1;
+  list-style: none;
+  border-radius: 0.6rem;
+  background-color: #fff;
+  border: 1px solid rgba(33, 33, 33, 0.07);
+  box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
+  outline: none;
+  transition: opacity 0.15s ease-in-out;
+  -moz-transition: opacity 0.15s ease-in-out;
+  -webkit-transition: opacity 0.15s ease-in-out;
+}
+
+.autoComplete_wrapper > ul[hidden],
+.autoComplete_wrapper > ul:empty {
+  display: block;
+  opacity: 0;
+  transform: scale(0);
+}
+
+.autoComplete_wrapper > ul > li {
+  margin: 0.3rem;
+  padding: 0.3rem 0.5rem;
+  text-align: left;
+  font-size: 1rem;
+  color: #212121;
+  border-radius: 0.35rem;
+  background-color: rgba(255, 255, 255, 1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.2s ease;
+}
+
+.autoComplete_wrapper > ul > li mark {
+  background-color: transparent;
+  color: #B91C1C;
+  font-weight: bold;
+}
+
+.autoComplete_wrapper > ul > li:hover {
+  cursor: pointer;
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+.autoComplete_wrapper > ul > li[aria-selected="true"] {
+  background-color: rgba(255, 122, 122, 0.15);
+}
+
+/* @media only screen and (max-width: 600px) {
+  .autoComplete_wrapper > input {
+    width: 18rem;
+  }
+} */

images/search.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" focusable="false" x="0px" y="0px" width="30" height="30" viewBox="0 0 171 171" style=" fill:#000000;">
+    <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+        <path d="M0,171.99609v-171.99609h171.99609v171.99609z" fill="none"></path>
+        <g fill="grey">
+            <path d="M74.1,17.1c-31.41272,0 -57,25.58728 -57,57c0,31.41272 25.58728,57 57,57c13.6601,0 26.20509,-4.85078 36.03692,-12.90293l34.03301,34.03301c1.42965,1.48907 3.55262,2.08891 5.55014,1.56818c1.99752,-0.52073 3.55746,-2.08067 4.07819,-4.07819c0.52073,-1.99752 -0.0791,-4.12049 -1.56818,-5.55014l-34.03301,-34.03301c8.05215,-9.83182 12.90293,-22.37682 12.90293,-36.03692c0,-31.41272 -25.58728,-57 -57,-57zM74.1,28.5c25.2517,0 45.6,20.3483 45.6,45.6c0,25.2517 -20.3483,45.6 -45.6,45.6c-25.2517,0 -45.6,-20.3483 -45.6,-45.6c0,-25.2517 20.3483,-45.6 45.6,-45.6z"></path>
+        </g>
+    </g>
+</svg>

index.html

@@ -7,6 +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">
+  <link rel="stylesheet" href="autoComplete.css">
   <title> test </title>
 </head>
 <div class="topnav">
@@ -40,17 +41,20 @@
         <div class="InstructionText">
         <p>Use the death scene provided to guess the name of the movie.</p>
         </div>
-
+      </div>
+      <div class="content">
         <i class="fas fa-skull"></i>
         <div class="InstructionText">
         <p>If you guess wrong a new death
          scene from the movie is revealed but you will use 1 point.</p>
         </div>
-
+      </div>
+      <div class="content">
       <i class="fas fa-tint"></i>
       <div class="InstructionText">
         <p>You have a maximum of 3 guesses to find the movie.</p>
       </div>
+    </div>
    </div>
   	</div>
   </div>
@@ -58,7 +62,7 @@
   <div id="stats" class="overlay">
     <div class="popup">
       <h2>Stats</h2>
-      <div>
+      <div class="chartNumber">
         <canvas id="myChart"></canvas>
       </div>
       <a class="close" href="#">&times;</a>
@@ -147,7 +151,7 @@
 
   <!-- <h1>Guess the Movie!</h1> -->
   <figure class="movie-img">
-<img src="" id="movieFrame" alt="movie death frame" class="center">
+<img src="images/images.png" id="movieFrame" alt="movie death frame" class="center">
   </figure>
 
 
@@ -155,8 +159,8 @@
   <form id="guessForm" autocomplete="off">
     <div class="autocomplete">
         <!-- <label for="guess">Movie:</label> -->
-        <input type="text" id="guess" placeholder="Movie">
+        <input class="guess" type="text" id="autoComplete" placeholder="Movie">
-        <input type="button" id="submitGuess" value="Submit Guess">
+        <input type="button" id="submitGuess" value="Submit">
     </div>
     
   </form>
@@ -173,6 +177,8 @@
   <div id="thirdGuess"></div>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
+
   <script src="main.js"></script>
 
 <!-- <footer class="footer">

main.js

@@ -1,12 +1,16 @@
 //<TO-DO>
-//-FIX TIMER
 //-FIX IMAGE RATIOS
 //-FIX CALENDAR
-//
+//-ADD SUPPORT PAGE
+//archive doesn't work constanlt refreshing
 // var fake_date = new Date("September 19, 2022 23:58:00");
 // Date = function(){return fake_date;}; 
 // Date.now = () => fake_date.getTime();
-window.onload = deathOftheDay;
+//json sitrgifiy local objects
+//pre-load images
+//image placeholder
+// gameover movie name
+
 var playedBefore = false;
 var sameDay = false;
 for (var i = 0; i < localStorage.length; i++){
@@ -20,7 +24,7 @@ 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 pix = [];
   // autocomplete(document.getElementById("guess"), movies);
-  var gameBeginning = new Date('September 18, 2022 00:00:00');
+  var gameBeginning = new Date('September 24, 2022 00:00:00');
   var countDownTime =  new Date();
   var present_date = new Date();
 
@@ -62,9 +66,10 @@ function markCalendar() {
           dates[j].classList.add('past');
           dates[j] = document.createElement('a');
           //dates[j].setAttribute('href','#');
-          dates[j].setAttribute('onclick','getArchive(' + (j+1) + ')');
+          if(localStorage.getItem("playedToday")){
-          dates[j] = "<a href='#'>" + dates[j] + "</a>";
+          // dates[j].setAttribute('onclick','getArchive(' + (j+1) +')');
-
+          // dates[j] = "<a href='#'>" + dates[j] + "</a>";
+            }
           }
           // dates[j] = "<a href='" + dayCount + "'>" + dates[j] + "</a>";
           //tag[j].appendChild(dates[j]);
@@ -100,6 +105,7 @@ function clearGuess() {
   localStorage.removeItem('secondGuess');
   localStorage.removeItem('guessNo');
   localStorage.removeItem('winningGuess');
+  localStorage.removeItem("playedToday");
   // localStorage.removeItem('result');
   document.getElementById("firstGuess").style.display = "none";
   document.getElementById("secondGuess").style.display = "none";
@@ -108,6 +114,8 @@ function clearGuess() {
   document.getElementById("countDown").style.display = "none"
   
 }
+
+
 function checkingGuess() {
   
 
@@ -125,26 +133,28 @@ streakNumber.textContent = localStorage.getItem('streak');
   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')){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";};
+  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";document.getElementById("resultText").style.display="block";}else {document.getElementById("shareResult").style.display = "none";document.getElementById("guessForm").style.display = "block";document.getElementById("resultText").style.display="none";};
   secondGuess.textContent = "❌" + localStorage.getItem('secondGuess');
 }else {
 clearGuess();
 localStorage.setItem('day', dayCount);
 }
+markCalendar();
 }
 checkingGuess();
-
+window.onload = deathOftheDay();
-  console.log(dayCount);
+  // console.log(dayCount);
 
 
 
 
-  function deathOftheDay(){
+  function deathOftheDay(x=dayCount){
     pix = [];
-   movieOfTheDay = movies[dayCount-1];
+   movieOfTheDay = movies[x-1];
 
     for (let i = 1; i < 4; i++) {
       pix.push("images/"+movieOfTheDay+"/"+i+".png");
+      preloadImage("images/"+movieOfTheDay+"/"+i+".png");
     }
     console.log('Movie: ', movieOfTheDay);
     console.log('Array: ', pix);
@@ -169,6 +179,7 @@ console.log("day count:" + dayCount);
       document.getElementById("countDown").style.display = "block";
       document.getElementById("shareResult").style.display = "block";
       localStorage.setItem("winningGuess", guess);
+      localStorage.setItem("playedToday", "yes");
         document.getElementById("firstGuess").style.display = "none";
   document.getElementById("secondGuess").style.display = "none";
       
@@ -209,11 +220,13 @@ console.log("day count:" + dayCount);
       localStorage.setItem('guessNo', guessNo);
       localStorage.setItem('streak', 0);
       localStorage.setItem('day'+dayCount,'false');
+      localStorage.setItem("playedToday", "yes");
       dates[dayCount-1].classList.add('lost');
 
     }
     console.log(textResult);
     document.getElementById("guessForm").reset();
+    markCalendar();
  }
 
 
@@ -263,16 +276,12 @@ function copyToClipboard() {
     });
   }
 
-function getArchive(j){
+function getArchive(j,d = dayCount){
 
-  dates[dayCount-1].classList.remove('current');
+  dates[d-1].classList.remove('current');
-    dayCount = j;
+  d = j;
   dates[j-1].classList.add('current');
-  deathOftheDay();
+  deathOftheDay(j);
-  clearGuess();
-  checkingGuess();
-  // checkGuess();
-  firstCheck();
   document.getElementById('guess').value = "";
   location.href='#';
   //window.open("#");
@@ -288,11 +297,13 @@ function getArchive(j){
   'Third Guess',
 ];
 
+
+
 const data = {
   labels: labels,
   datasets: [{
     label: 'Number of guesses',
-    backgroundColor: 'rgb(255, 99, 132)',
+    backgroundColor: ['red','pink','blue'],
     fontColor: 'white',
     color:'white',
     data: [localStorage.getItem('firstGuessStat'), localStorage.getItem('secondGuessStat'), localStorage.getItem('thirdGuessStat')],
@@ -305,6 +316,7 @@ const config = {
   type: 'bar',
   data: data,
   options: {
+    maintainAspectRatio: false,
     scales:{
       yAxes:{
         ticks:{
@@ -349,4 +361,9 @@ const myChart = new Chart(
   document.getElementById('myChart'),
   config
 );
+function preloadImage(url)
+{
+    var img=new Image();
+    img.src=url;
+};
 //window.localStorage.clear();

style.css

@@ -1,11 +1,22 @@
 * { box-sizing: border-box; }
 
-
+.fa-tint{
+  padding-left: 21.625px !important;
+  padding-right: 21.625px !important;
+}
 .content{
   width: 100%;
   position: relative;
-  margin: 30px 0;
+  display: table;
+  /* margin: 30px 0; */
 }
+.chartNumber{
+    position: relative;
+    margin: auto;
+    height: 50%;
+    width: 60%;
+}
+
 .overlay {
   position: fixed;
   top: 0;
@@ -28,9 +39,10 @@ h3 {
 }
 
 .InstructionText{
-position: absolute;
+  display: block;
-margin-left: 65px;
+  width: 80%;
-margin-top: -50px;
+  display: table-cell;
+  vertical-align: middle;
 
 }
 .overlay:target {
@@ -51,10 +63,13 @@ margin-top: -50px;
 .popup i{
   padding: 14px 16px;
   font-size: 36px;
-  display: flex;
+  display: block;
-
+  width: 20%;
-align-items: center;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
 }
+
 .popup h2 {
   margin-top: 0;
   color: white;
@@ -100,7 +115,7 @@ body {
   background-color: #121212;
   color: white;
   font: 16px Arial;
-display:flex; flex-direction:column; justify-content:center;
+/* display:flex; flex-direction:column; justify-content:center; */
 text-align: center;
 }
 p {