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


Comments

Post a Comment

Please do not enter any spam link in the comment box.

Popular Posts