If someone told me even as recent as two years ago that I could write this code below in the future, or even so much as the fact that I could read it and that it would actually make sense to me, I would probably be surprised, and very skeptical of that.
I know for some this is simple code (and it fact, it is lol), but for me this is a personal win, and I will celebrate it! I didn’t have much coding experience until a few years ago, and little by little I am learning more and more with the help from colleagues, friends, and my dear company Automattic.
Celebrate your wins!!
/* JS */
import './styles.css';
let randomNumber = Math.floor(Math.random() * 10) + 1;
let button = document.querySelector('.submit');
button.addEventListener('click', handleClick);
function handleClick() {
let resultArea = document.querySelector('.result p');
let inputField = document.querySelector('.guess');
let guessedNumber = inputField.value;
resultArea.innerText = '...Show the result here';
if (guessedNumber == randomNumber) {
resultArea.innerText = 'Correct';
resultArea.className = 'correct';
}
else if (guessedNumber > randomNumber) {
resultArea.innerText = 'Too high!';
resultArea.className = 'wrong';
} else {
resultArea.innerText = 'Too low!';
resultArea.className = 'wrong';
}
}
/* CSS Stylesheet */
body {
font-family: sans-serif;
max-width: 380px;
}
.guess {
font-size: 1.5em;
width: 3em;
height: 31px;
box-sizing: border-box;
}
.submit {
box-sizing: border-box;
background-color: #fff;
height: 30px;
vertical-align: top;
color: #000;
border-color: #000;
}
.result p {
display: block;
margin-top: 1em;
padding: 4px;
transition: all 1s ease;
}
p.wrong {
background-color: #c00;
color: #fff;
animation: bounce 800ms;
}
p.correct {
background-color: #c4ffd0;
left: 0;
animation: pulse 500ms;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-5px);
}
}
/* HTML */
<!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
<meta charset="UTF-8" />
</head>
<body>
<h2>Guess a number between 1-10</h2>
<input class="guess" type="number" value="0"> <button class="submit">Guess</button>
<div class="result"><p>Take a guess and the result will appear here</p></div>
<script src="src/index.js">
</script>
</body>
</html>
Leave a Reply