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

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

      number.innerHTML = parseInt(number.innerHTML)+1;
      number.innerHTML = parseInt(number.innerHTML)-1;



ALSO READ  Design a Ludo Board using HTML and CSS

Comments are closed.