added image buttons

index.html

@@ -25,7 +25,6 @@
     <a class="mobileInfo" href="#info"><i class="fa fa-question"></i></a>
     <a class="mobileInfo" href="#support"><i class="fa fa-heart"></i></a>
     <a href="#stats"><i class="fas fa-chart-bar"></i></a>
-    <a href="#archive"><i class="fas fa-history"></i></a>
   </div>
   </div>
 </div>
@@ -70,23 +69,6 @@
       <div id="streakNumber" class="content">
         your stats
       </div>
-    </div>
-  </div>
-
-  <div id="support" class="overlay">
-    <div class="popup">
-      <h2>Support</h2>
-      <a class="close" href="#">&times;</a>
-        pls support
-      </div>
-    </div>
-  </div>
-
-  <div id="archive" class="overlay">
-    <div class="popup">
-
-      <h2>October 2022 Archive</h2>
-      <a class="close" href="#">&times;</a>
       <div class="archive">
       <div class="calendar">
         <!-- <div class="calendar__picture">
@@ -138,7 +120,27 @@
           <div class="calendar__number">30</div>
           <div class="calendar__number">31</div>
         </div>
-</div>
+      </div>
+    </div>
+    </div>
+  </div>
+
+  <div id="support" class="overlay">
+    <div class="popup">
+      <h2>Support</h2>
+      <a class="close" href="#">&times;</a>
+        pls support
+      </div>
+    </div>
+  </div>
+
+  <div id="archive" class="overlay">
+    <div class="popup">
+
+      <h2>October 2022 Archive</h2>
+      <a class="close" href="#">&times;</a>
+            <div class="archive">
+
 </div>
     </div>
   </div>
@@ -153,6 +155,11 @@
   <figure class="movie-img">
 <img src="images/images.png" id="movieFrame" alt="movie death frame" class="center">
   </figure>
+  <div class="picButtons">
+  <button onclick="showPic(0)" id="button1" class="imageButton">1</button>
+ <button onclick="showPic(1)" id="button2" class="imageButton">2</button>
+ <button onclick="showPic(2)" id="button3" class="imageButton">3</button>
+</div>
 
 
 

main.js

@@ -17,7 +17,18 @@ for (var i = 0; i < localStorage.length; i++){
   console.log(localStorage.key(i));
 }
 
-
+function revealButtons(g = guessNo){
+  picButtons = document.getElementsByClassName('imageButton');
+  picButtons[g].classList.add('active');
+  for (var i = 0; i <= g; i++){
+    console.log("revealButton guess no " + guessNo);
+     picButtons[i].style.display = "inline";
+     picButtons[i].classList.remove('active');
+  }
+  picButtons[g].classList.add('active');
+}
+// document.getElementById("button2").style.display = "none"
+// document.getElementById("button3").style.display = "none"
 
 
 
@@ -85,7 +96,8 @@ function markCalendar() {
 
 var points = "⬛⬛⬛"
 //check if the user played this before
-firstCheck()
+firstCheck();
+revealButtons();
 function firstCheck(){
   guessNo = 0;
   feedback.textContent = "🩸 " + (3-guessNo) + " guesses remaining";
@@ -133,8 +145,9 @@ 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";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";};
+  if(localStorage.getItem('winningGuess')){revealButtons(2);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');
+  revealButtons();
 }else {
 clearGuess();
 localStorage.setItem('day', dayCount);
@@ -158,7 +171,23 @@ window.onload = deathOftheDay();
     }
     console.log('Movie: ', movieOfTheDay);
     console.log('Array: ', pix);
-    document.getElementById("movieFrame").src = pix[guessNo];
+    showPic();
+
+    // picButton = document.getElementsByClassName('picButton');
+    // picButton.setAttribute('onclick','getImage()');
+  }
+
+  function showPic(p=guessNo){
+    document.getElementById("movieFrame").src = pix[p];
+    picButtons = document.getElementsByClassName('imageButton');
+    for (let i=0; i<3; i++){
+      picButtons[i].classList.remove('active');
+    }
+    picButtons[p].classList.add('active');
+    // for (let i = 0; i < 2; i++) {
+    //   const element = array[i];
+      
+    // }
   }
 
   function checkGuess() {
@@ -191,7 +220,7 @@ console.log("day count:" + dayCount);
       document.getElementById("feedback").innerHTML = "Next movie revealed at midnight! 🕛 <br>";
       document.getElementById("resultText").innerHTML = textResult;
       dates[dayCount-1].classList.add('won');
-
+      revealButtons(2);
 
     } else if(guessNo==1){
       guessNo = guessNo + 1;
@@ -203,6 +232,7 @@ console.log("day count:" + dayCount);
       document.getElementById("firstGuess").style.display = "block";
       textResult = textResult + "🟥";
       localStorage.setItem('result', textResult);
+      revealButtons();
     }else if(guessNo<2){
       guessNo = guessNo + 1;
       localStorage.setItem('guessNo', guessNo);
@@ -213,6 +243,7 @@ console.log("day count:" + dayCount);
       document.getElementById("secondGuess").style.display = "block";
       textResult = textResult + "🟥";
       localStorage.setItem('result', textResult);
+      revealButtons();
     }
      else{
       feedback.textContent = "GAME OVER";
@@ -316,7 +347,7 @@ const config = {
   type: 'bar',
   data: data,
   options: {
-    maintainAspectRatio: false,
+    // maintainAspectRatio: false,
     scales:{
       yAxes:{
         ticks:{

style.css

@@ -1,5 +1,26 @@
 * { box-sizing: border-box; }
+#button1,#button2,#button3{
+ display: none;
+}
+.imageButton{
   
+    background-color: #3a3a3a; /* Green */
+    border: none;
+    border-radius: 3px;
+    color: white;
+    /* padding: 5px 5px; */
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+  
+}
+.active{
+  background-color: #656565;
+}
+.picButtons{
+  margin-bottom: 20px;
+}
 .fa-tint{
   padding-left: 21.625px !important;
   padding-right: 21.625px !important;
@@ -10,12 +31,12 @@
   display: table;
   /* margin: 30px 0; */
 }
-.chartNumber{
+/* .chartNumber{
     position: relative;
     margin: auto;
     height: 50%;
     width: 60%;
-}
+} */
 
 .overlay {
   position: fixed;
@@ -191,6 +212,7 @@ figure{
   position: absolute;
   left: 0;
   right: 0;
+  top: 8px;
   margin: 0 auto;
 
 }
@@ -455,9 +477,13 @@ font-style:normal;
   display: block;
 }
 .title {
+  top:0px;
   position: relative;
 float: left;
-width: 200px;
+width: 230px;
+}
+i{
+  font-size: 1.4rem;
 }
 
 .popup{