From 41d30181240b4cbb373c7f529b8432a81b02a75b Mon Sep 17 00:00:00 2001 From: Retno Ayu Adiati Date: Mon, 19 Apr 2021 22:57:38 +0200 Subject: [PATCH] Initial commit --- app.js | 66 ++++++++++++++++++++++ index.html | 37 +++++++++++++ style.css | 158 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 261 insertions(+) create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..c309c78 --- /dev/null +++ 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 = 'Yes! The mystery number is:' + success.innerHTML = `You got me after ${tries} 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 new file mode 100644 index 0000000..56b36e4 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + Guess The Number + + + +
+

Guess The Number!

+ + + +
+ + + + + + + +
+
+ + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..1b6bbe7 --- /dev/null +++ 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; + } +}