DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Counter in JS || 10 JS Project Challenge #2
VECTOR3Studio
VECTOR3Studio

Posted on • Updated on

Counter in JS || 10 JS Project Challenge #2

Hello πŸ‘‹

In this post I will show you how to make Counter, when you click a button in JavaScript.

This is Part 2 of the 10 JS Project Challenge.

So let's get into it.

First, here is the video tutorial:

So let's start coding.

First, we need to create three files:

  • index.html

  • style.css

  • home.js

Once we have those files created, we can start coding.

Here is the code for index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <h1 class="number">0</h1>
        <div class="buttons">
            <button class="upper" onclick="add()">Add Count</button>
            <button class="lower" onclick="Lower()">Lower Count</button>
        </div>
    </div>
    <script src="home.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

So basically we are creating one Text for the counter and two buttons. Nothing crazy so far.

Now it's time for styling!. Open our style.css and write this code in it.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 35vh;
}
h1{
    font-size: 4rem;
}
.buttons{
    padding-left: 1.5rem;
}
button{
    margin-left: 0.5rem;
    background-color: #4287f5;
    color: white;
    padding: 12px 7.5px;
    border-radius: 20px;
    border: none;
    outline: none;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

We have a font here declared, the font is Poopins.
We are rewriting the default padding and margin and changing the font to Poopins. The other is just styling elements.

Now let's move to the JavaScript part. Here is the code for JavaScript.

const upper = document.querySelector(".upper");
const lower = document.querySelector(".lower");
const numberElement = document.querySelector(".number")
let number = 0;


function add(){
    number += 1;
    numberElement.innerHTML = number;
}

function Lower(){
    number -= 1;
    numberElement.innerHTML = number;
}
Enter fullscreen mode Exit fullscreen mode

So first we are creating variables for each element in HTML. The we are creating a variable for Number Integer so we can count how many users press the button. So we are creating two functions, one for increasing our counter, and one for decreasing.
Function obtains a Number + or -, and then we are passing the value to the actual text.

Image description

And that's it. You can see the Actual value of the number on the screen, depending which button you are pressing.

Thanks for reading my post, and I hope I will see you next time.

Top comments (2)

Collapse
 
lukeshiru profile image
Luke Shiru

Instead of having the onclick in the HTM, you ideally should listen to events from JS. You should also ideally use textContent instead of innerHTML as a "general rule". The final code could look something like this:

const $ = document.querySelector.bind(document);
const numberElement = $(".number");
const state = { count: 0 };

$(".upper").addEventListener(
    "click",
    () => (numberElement.textContent = `${++state.count}`),
);

$(".lower").addEventListener(
    "click",
    () => (numberElement.textContent = `${--state.count}`),
);
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
 
vector3studio profile image
VECTOR3Studio

Thanks. Now I know a little bit More of JS.

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post