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 {
	100% {
		transform: translateY(0);
	40% {
		transform: translateY(-5px);
	60% {
		transform: translateY(-5px);

/* HTML */
<!DOCTYPE html>

	<title>Guessing Game</title>
	<meta charset="UTF-8" />

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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s