Javascript Counter Project for Beginners

Hey guys in this post, we will create a simple counter application in Javascript. The project is live on the web.

Topics covered

The idea was to click on either one of two buttons that registered the count of the on-page element. This application involves the following topics –

  • DOM Manipulation
  • Control Structures
  • Array.forEach()
  • Javascript CSS Manipulation
  • eventListeners

Complete source code

The below image shows you the project structure –


Add styles to the application

Create a main.css file and add the following content

:root {
  --mainWhite: #f5f5f5;
  --mainGreen: #7fb800;
  --mainBlue: #0d2c54;
  --lightBlue: #00a6ed;
  --mainBlack: #333333;
.max-height {
  min-height: 100vh;
body {
  background: url("../img/mainBcg.jpeg") center/cover fixed no-repeat;
  color: var(--mainWhite);
.main-container {
  border: 0.1rem solid var(--mainWhite);
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.9);
  border-radius: 0.2rem;
#counter {
  color: var(--mainGreen);
  font-size: 10rem;
  color: var(--mainBlack);
.nextBtn {
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.9);
  background: var(--mainBlue);
  color: var(--mainWhite);
.prevBtn:hover {
  background: var(--lightBlue);
.nextBtn:hover {
  background: var(--lightBlue);

Add scripts to the application

Create an app.js file and add the following content

  const buttons = document.querySelectorAll('.counterBtn')
  let count= 0

  //Add event listeners and functionailty to each button  
    button.addEventListener('click', function(){
      if (button.classList.contains('prevBtn')){
      } else if (button.classList.contains('nextBtn')){

      //Select the counter text
      const counter = document.querySelector('#counter')
      counter.textContent = count

      if (count < 0 ){ = 'red' } else if (count > 0){ = 'green'
      } else { = '#333333'

Add HTML to the application

Create an index.html file and add the following content

<!DOCTYPE html>
<html lang="en">

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- bootstrap css -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <!-- main css -->
 <link rel="stylesheet" href="css/main.css">
 <!-- google fonts -->
 <link href="" rel="stylesheet">

 <!-- font awesome -->
 <script src="js/all.js"></script>
 <title>Counter Project</title>


 <div class="container">
  <div class="row max-height align-items-center">
   <div class="col-10 mx-auto col-md-6 text-center main-container p-5">
    <h1 class="text-uppercase">counter</h1>
    <h1 id="counter">0</h1>
    <div class="btn-container d-flex justify-content-around flex-wrap">
     <button class="btn counterBtn prevBtn text-uppercase m-2">lower count</button>
     <button class="btn counterBtn nextBtn text-uppercase m-2">add count</button>

 <!-- jquery -->
 <script src="js/jquery-3.3.1.min.js"></script>
 <!-- bootstrap js -->
 <script src="js/bootstrap.bundle.min.js"></script>
 <!-- script js -->
 <script src="js/app.js"></script>


Note: Make sure the download the bootstrap.css, bootstrap.js, and jquery.js library from the internet add them to the respective folders. You can download the images from the Github repository.

Download the complete source code from github repository

Bushan Sirgur

Hey guys, I am Bushan Sirgur from Banglore, India. Currently, I am working as an Associate project in an IT company.

Leave a Reply