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>