Count Numbers by using HTML, CSS and JavaScript
index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Count Numbers</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
background-color: white;
}
main {
background-color: black;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section {
padding: 8px;
border-radius: 20px;
width: 30%;
box-shadow: 0px 0px 23px 7px white;
backdrop-filter: blur(10px);
text-align: center;
}
button {
margin: 8px;
padding: 8px 19px;
color: black;
background-color: white;
border: 2px solid black;
border-radius: 8px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
}
p {
margin: 8px;
font-size: 3rem;
}
span {
margin: 2rem;
font-size: 3rem;
}
</style>
<body>
<main>
<section>
<div>
<button type="button" class="low">Low</button>
<button type="button" class="high">High</button>
</div>
<p>Count</p>
<span id="show-number">0</span>
</section>
</main>
<script>
const showNumber = document.getElementById('show-number');
let count = 0;
//Approach 1
// const low = document.querySelector('.low');
// const high = document.querySelector('.high');
// low.addEventListener('click', () => {
// count--;
// showNumber.innerText = count;
// if (showNumber.innerText < 0) showNumber.style.color = 'red';
// if (i == 0) showNumber.style.color = 'gray'
// });
// high.addEventListener('click', () => {
// count++;
// showNumber.innerText = count;
// if (showNumber.innerText > 0) showNumber.style.color = 'green';
// if (i == 0) showNumber.style.color = 'gray'
// });
// ----------OR------------
//Approach 2
const btns = document.querySelectorAll('button');
btns.forEach((btn) => {
btn.addEventListener('click', () => {
if (btn.classList.contains('low')) {
// if (btn.classList.contains('.low')) { //Ansure that class is not select by dot(.)
count--;
}
else if (btn.classList.contains('high')) {
// else if (btn.classList.contains('.high')) { //Ansure that class is not select by dot(.)
count++;
}
showNumber.innerText = count;
if (showNumber.innerText < 0) {
showNumber.style.color = 'red';
}
else if (showNumber.innerText > 0) {
showNumber.style.color = 'green';
}
else {
showNumber.style.color = 'gray'
}
});
});
</script>
</body>
</html>
0 Comments