Initial commit

adiati98 · Apr 19, 2021 · 41d3018 · 41d3018
commit 41d3018
Show file tree

Hide file tree

Showing 3 changed files with 261 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', () => {
+	// grab elements & store in variable
+	const header = document.querySelector('#header')
+	const form = document.querySelector('#guessNum')
+	const inputNum = document.querySelector('#input-number')
+	const success = document.querySelector('#success')
+	const hint = document.querySelector('#hint')
+	const showNum = document.querySelector('.show-num')
+	const enter = document.querySelector('#enter')
+	const reset = document.querySelector('#reset')
+
+	let generateRandomNum = Math.floor(Math.random() * 30) + 1
+	console.log(`INIT: ${generateRandomNum}`)
+	let tries = 1
+	reset.style.visibility = 'hidden'
+
+	form.addEventListener('submit', (e) => {
+		e.preventDefault()
+
+		// get input value
+		const getNum = parseFloat(e.target.getNum.value)
+
+		if (getNum < generateRandomNum) {
+			tries++
+			success.textContent = ''
+			e.target.getNum.value = ''
+			hint.textContent = 'Oops... Maybe higher number?'
+			enter.innerText = 'Try Again'
+		} else if (getNum > generateRandomNum) {
+			tries++
+			success.textContent = ''
+			e.target.getNum.value = ''
+			hint.textContent = "Hmmm... Let's try lower number"
+			enter.innerText = 'Try Again'
+		} else {
+			header.innerHTML = '<span class="message">Yes! The mystery number is:</span>'
+			success.innerHTML = `You got me after <span class="bigger-font">${tries}</span> times!`
+			hint.textContent = ''
+			e.target.getNum.value = ''
+			showNum.textContent = `${getNum}`
+			reset.style.visibility = 'visible'
+			enter.style.visibility = 'hidden'
+			inputNum.style.visibility = 'hidden'
+		}
+		console.log(`TRY: ${tries}`)
+	})
+
+	reset.addEventListener('click', (e) => {
+		e.preventDefault()
+
+		reset.style.visibility = 'hidden'
+		enter.style.visibility = 'visible'
+		inputNum.style.visibility = 'visible'
+		document.querySelector('input').value = ''
+		success.textContent = ''
+		showNum.textContent = ''
+		enter.textContent = "Let's play!"
+		header.textContent = 'Choose a number between 1 and 30'
+
+		generateRandomNum = Math.floor(Math.random() * 30) + 1
+		tries = 1
+
+		console.log(`from reset: ${generateRandomNum}`)
+		console.log(`tries from reset: ${tries}`)
+	})
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Guess The Number</title>
+		<link rel="stylesheet" href="style.css" />
+	</head>
+	<body>
+		<div class="container">
+			<h1>Guess The Number!</h1>
+
+			<p id="header"><em>Choose a number between 1 and 30</em></p>
+
+			<form id="guessNum" class="flex-form">
+				<label for="getNum" class="form-el"></label>
+				<input
+					type="number"
+					name="getNum"
+					id="input-number"
+					class="bigger-box"
+					min="1"
+					max="30"
+					placeholder="Enter your number"
+					required
+				/>
+				<button type="submit" id="enter" class="btn bigger-box">Let's Play!</button>
+				<button type="reset" id="reset" class="btn bigger-box">Play Again</button>
+				<span class="show-num"></span>
+				<span id="hint"></span>
+				<span id="success"></span>
+			</form>
+		</div>
+		<script src="app.js"></script>
+	</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Roboto:ital,wght@0,700;1,400&display=swap');
+
+:root {
+	--heading: 'Monoton', cursive;
+	--smaller-font: 'Roboto', sans-serif;
+
+	--red: #dd2c00;
+	--green: #76a21e;
+	--yellow: #fcbf1e;
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	background-color: #1b1b2f;
+	color: var(--yellow);
+	font-family: var(--smaller-font);
+	font-size: 1.5rem;
+	margin: 0 auto;
+	padding: 0 auto;
+	max-width: 80%;
+	height: 100%;
+	text-align: center;
+}
+
+h1 {
+	color: var(--red);
+	font-family: var(--heading);
+	font-weight: lighter;
+	font-size: 3.5rem;
+	margin-bottom: 1.5rem;
+}
+
+p {
+	font-size: 1.2rem;
+}
+
+.container {
+	position: absolute;
+	top: 10%;
+	bottom: 40%;
+	left: 0;
+	right: 0;
+	align-items: center;
+	max-width: 100%;
+}
+
+.flex-form {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 15rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+
+.bigger-box {
+	background-color: #fdfdc4;
+	font-family: var(--smaller-font);
+	font-size: 1rem;
+	width: 15rem;
+	height: 3rem;
+	margin-bottom: 2rem;
+	text-align: center;
+	border: none;
+	border-radius: 10px;
+	outline: none;
+	max-width: 85vw;
+}
+
+#hint {
+	font-size: 2rem;
+	font-style: italic;
+	position: absolute;
+	top: 12rem;
+}
+
+.message {
+	font-size: 2rem;
+	font-weight: 700;
+}
+
+#success {
+	font-size: 3.5rem;
+	position: absolute;
+	top: 8rem;
+}
+
+.bigger-font {
+	color: #f4f6ff;
+	font-size: 2em;
+	text-shadow: 2.5px 2.5px 5px var(--green);
+}
+
+.show-num {
+	color: var(--green);
+	font-family: var(--heading);
+	font-size: 13rem;
+	opacity: 0.7;
+	position: absolute;
+	top: -7.5rem;
+	z-index: -100;
+}
+
+.btn {
+	background-color: var(--yellow);
+	cursor: pointer;
+	font-weight: 700;
+}
+
+.btn:hover {
+	background-color: var(--red);
+	color: #ffffff;
+	font-weight: bold;
+}
+
+#reset {
+	margin-top: 8rem;
+}
+
+@media all and (max-width: 718px) {
+	h1 {
+		font-size: 2.5rem;
+		margin-bottom: 1rem;
+	}
+
+	.container {
+		top: 5%;
+	}
+
+	.flex-form {
+		top: 20rem;
+	}
+
+	#hint {
+		font-size: 1.5rem;
+	}
+
+	#success {
+		font-size: 2rem;
+		top: 6rem;
+	}
+
+	.show-num {
+		font-size: 10rem;
+		top: -6.5rem;
+	}
+
+	#reset {
+		margin-top: 5rem;
+	}
+}