Advertisements
Sharing WordPress

If someone told me…

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>
Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: