Counter in JS || 10 JS Project Challenge #2

#javascript #webdev #beginners #programming

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>

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;
}

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;
}

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.