Javascript small project-2
javascript number counter:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Number counter</title>
<style>
body{
background-color:;
padding: 0%;
margin: 0%;
}
div{
background-color: black;
position: absolute;
width: 30%;
height:75%;
top: 13%;
left: 35%;
box-shadow: 0px 0px 10px;
}
.text-uppercase{
color: white;
font-size: 60px;
text-align: center;
}
#counter{
text-align: center;
font-size: 90px;
color: white;
text-shadow: 0px 0px 20px;
}
#btn1{
background:
linear-gradient(45deg,rgb(76,0,255),transparent);
position: absolute;
left: 5%;
padding: 18px 40px;
border-radius: 10px;
font-size: 16px;
color: white;
}
#btn2{
background:
linear-gradient(45deg,rgb(76,0,255),transparent);
position: absolute;
left: 53%;
padding: 18px 40px;
border-radius: 10px;
font-size: 16px;
color: white;
}
*:focus{
outline: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-uppercase">counter</h1>
<h1 id="counter">0</h1>
<button id="btn1" class="counterBtn prevBtn ">lower count</button>
<button id="btn2" class="counterBtn nextBtn ">add count</button>
</div>
<script>
(function(){
const buttons = document.querySelectorAll('.counterBtn')
let count= 0
//Add event listeners and functionailty to each button
buttons.forEach(function(button){
button.addEventListener('click', function(){
if (button.classList.contains('prevBtn')){
count--
} else if (button.classList.contains('nextBtn')){
count++
}
//Select the counter text
const counter = document.querySelector('#counter')
counter.textContent = count
if (count < 0 ){
counter.style.color = 'red'
} else if (count > 0){
counter.style.color = 'lightgreen'
} else {
counter.style.color = '#333333'
}
})
})
})()
</script>
</body>
</html>
output:-
run the code and result is that---
Keep going
ReplyDelete