Counter App using HTML, CSS and JavaScript

In this tutorial, we are going to develop a simple Counter App using HTML, CSS and JavaScript. The code uses JavaScript event listener to either increment or decrement the counter value.

 

Source Code :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Counter App</title>
  <style type="text/css">
    body{
      background: #b3caff;
      text-align: center;
    }
    h1{
      margin: 20px 0px;
    }
    .center{
      margin: auto;
      width: 20%;
    }
    .box{
      font-size: 75px;
      font-weight: bold;
      color: blue;
      background: #e6bbbb;
      padding: 30px;
      border: 2px solid #ec3535;
      margin-top: 30px;
      border-radius: 5%;
    }
    .btns{
      margin-top: 30px;
    }
    .btn:hover{
      opacity: 0.5;
    }
    .btn:active{
      box-shadow: 3px 2px 22px 1px rgba(0,0,0,0.24);
      transform: scale(0.88);
    }
    .btn{
      padding: 2px 15px;
      color: #fff;
      font-size: 28px;
      cursor: pointer;
    }
    .btn-add{
      background: green;
      float: left;
      border: 2px solid #346b3b;
    }
    .btn-subtract{
      background: red;
      float: right;
      border: 2px solid #c34e4e;
    }
  </style>
</head>
<body>
  <h1>Counter App</h1>
  <hr>
  <div class="box center">
    <span id="number">0</span>
  </div>
  <div class="btns center">
    <span class="btn btn-add">+</span>
    <span class="btn btn-subtract">-</span>
  </div>

  <script type="text/javascript">
    addBtn = document.getElementsByClassName('btn-add')[0];
    subtractBtn = document.getElementsByClassName('btn-subtract')[0];
    number = document.getElementById('number');

    addBtn.addEventListener('click',function(){
      number.innerHTML = parseInt(number.innerHTML)+1;
    });
    subtractBtn.addEventListener('click',function(){
      number.innerHTML = parseInt(number.innerHTML)-1;
    });
  </script>




</body>
</html>

 

Recommended For You

About the Author: Admin