added count down timer
This commit is contained in:
gocivici
parent
610fd09f72
commit
f131050c9b
16
index.html
16
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">
|
||||
</div>
|
||||
<input type="button" id="submitGuess" value="Submit Guess">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</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">
|
||||
<!-- <p>Designed with ❤️ by <a href="https://ko-fi.com/Gorkem">Görkem</a></p> -->
|
||||
<!-- <footer class="footer">
|
||||
<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>
|
||||
|
||||
|
||||
20
main.js
20
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.setHours(13);
|
||||
countDownTime.setMinutes(02);
|
||||
// countDownTime.setDate(Math.floor((present_date - gameBeginning) / (1000 * 60 * 60 * 24))+2);
|
||||
countDownTime.setDate(present_date.getDate()+1);
|
||||
countDownTime.setHours(24);
|
||||
countDownTime.setMinutes(0);
|
||||
countDownTime.setSeconds(0);
|
||||
var now = new Date();
|
||||
var remainingTime = countDownTime - now;
|
||||
|
||||
31
style.css
31
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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user