Create a Simple Counter App in JavaScript, HTML, CSS. Project for beginners

In YouTube video Create Simple Counter I described the process of creating the counter element.

You can find the source code by GitHub Counter code link.

How to create a Counter in JavaScript?

1. Setting Up the HTML Structure

Define the structure of HTML document. Create a new HTML file and name it index.html. Inside <body> tag, add the following code:

<div class="counter">
  <div id="count">0</div>
  <div>
    <button id="decrement">-</button>
    <button id="reset">Reset</button>
    <button id="increment">+</button>
  </div>
</div>

2. Styling the Counter

Then you can add some styles to make counter visually appealing. Create a new file named styles.css and add the CSS code

3. Adding Functionality with JavaScript

After styles you need to add the functionality to counter using JavaScript. Create a new file named script.js and add the following JavaScript code:

const countElemnt = document.getElementById('count')

let count = 0

function showCount() {
  countElemnt.textContent = count
}

function decrease() {
  count -= 1
  showCount()
}

function increase() {
  count += 1
  showCount()
}

function reset() {
  count = 0
  showCount()
}

document.getElementById('decrement').addEventListener('click', decrease)
document.getElementById('increment').addEventListener('click', increase)
document.getElementById('reset').addEventListener('click', reset)

That's it. If you have some issues with creating the counter, you can watch my video or copy the source code.