HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<section class="left">
<input type="number" class="guess" />
<button class="btn check">Check!</button>
</section>
<section class="right">
<p class="message">Start guessing...</p>
<p class="label-score">💯 Score: <span class="score">20</span></p>
<p class="label-highscore">
🥇 Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: "Press Start 2P", sans-serif;
color: #eee;
background-color: #222;
}
header {
position: relative;
height: 35vh;
border-bottom: 7px solid #eee;
}
main {
height: 65vh;
color: #eee;
display: flex;
align-items: center;
justify-content: space-around;
}
.left {
width: 52rem;
display: flex;
flex-direction: column;
align-items: center;
}
.right {
width: 52rem;
font-size: 2rem;
}
h1 {
font-size: 4rem;
text-align: center;
position: absolute;
width: 100%;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
}
.number {
background: #eee;
color: #333;
font-size: 6rem;
width: 15rem;
padding: 3rem 0rem;
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
.between {
font-size: 1.4rem;
position: absolute;
top: 2rem;
right: 2rem;
}
.again {
position: absolute;
top: 2rem;
left: 2rem;
}
.guess {
background: none;
border: 4px solid #eee;
font-family: inherit;
color: inherit;
font-size: 5rem;
padding: 2.5rem;
width: 25rem;
text-align: center;
display: block;
margin-bottom: 3rem;
}
.btn {
border: none;
background-color: #eee;
color: #222;
font-size: 2rem;
font-family: inherit;
padding: 2rem 3rem;
cursor: pointer;
}
.btn:hover {
background-color: #ccc;
}
.message {
margin-bottom: 8rem;
height: 3rem;
}
.label-score {
margin-bottom: 2rem;
}
javascript
"use strict";
let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highScore = 0;
const displayMessage = function (message) {
document.querySelector(`.message`).textContent = message;
};
document.querySelector(`.check`).addEventListener(`click`, function () {
const guess = Number(document.querySelector(`.guess`).value);
console.log(guess, typeof guess);
if (!guess) {
displayMessage(`⛔ No number!`);
} else if (guess === secretNumber) {
displayMessage(`🎉Correct Number!`);
document.querySelector(`.number`).textContent = secretNumber;
document.querySelector(`body`).style.backgroundColor = `#60b347`;
document.querySelector(`.number`).style.width = `30rem`;
if (score > highScore) {
highScore = score;
document.querySelector(`.highscore`).textContent = highScore;
}
} else if (guess !== secretNumber) {
if (score > 1) {
displayMessage(guess > secretNumber ? `📈 Too high!` : `📉 Too low!`);
score--;
document.querySelector(`.score`).textContent = score;
} else {
displayMessage(`😂 You lost the game!`);
document.querySelector(`.score`).textContent = 0;
}
}
});
document.querySelector(`.again`).addEventListener(`click`, function () {
score = 20;
secretNumber = Math.trunc(Math.random() * 20) + 1;
document.querySelector(`.score`).textContent = score;
displayMessage(`Start guessing...`);
document.querySelector(`.number`).textContent = `?`;
document.querySelector(`.guess`).value = ``;
document.querySelector(`body`).style.backgroundColor = `#222`;
document.querySelector(`.number`).style.width = `15rem`;
});
