DEV Community

Cover image for How To Code an Incremental button using Vanilla JavaScript
Emmanuel C. Okolie
Emmanuel C. Okolie

Posted on • Updated on

How To Code an Incremental button using Vanilla JavaScript

What we will be doing.

Demo

We will be building an app that counts the number of people, by clicking the button once it will count once, it will do it repeatedly…
The path of what we will use is, JavaScript, Html, & Css..(the app is for beginners, not advanced programmers).

Introduction

As the strong wind of technology is blowing strongly, And it’s effect on the entire globe I then notice that in some organization when the want to count the number of people they bring someone to start counting from 1-finish. Example of such a company is a Railway station. If for example I have a daily duty to count every one on the rail station, with my book and pen. You’ll all agree with me that that method is lot stressful.. with vanilla JavaScript I can just carry my system or my phone, all I will do is to click on my button, and save it at the end of the day…
So are you ready to get started with me?

Prerequisite

Below are list of item you will need to build along with me, although you don’t need much.
 Sublime or vs code
 Any browser of your choice
 Maybe an image

Coding The Increment And Decrement App
So this is where the coding starts. Below is the HTML code…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1>People Entered:</h1>
    <h2 id="count-el">0</h2>
    <button  id="increment-btn" onclick="increment()">INCREMENT</button>
    <button  id="save-btn" onclick="save()">Save</button>
<p id="save-el">Previous enteries: </p>

<script src="build_a_passenger_counter_app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here is the css code for the beauty of the interface

body{
    background-image: url(post-img2.jpg);
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
}

h1{
    margin-top: 10px;
    margin-bottom: 10px;
}

h2{
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}

button{
    border: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    background-color: darkred;
    width: 200px;
    margin-bottom: 5px;
    border-radius: 5px;
}

button: hover{
    transition: 5s;
    background-color: red;
}

#increment-btn{
    background-color: darkred;
}

#save-btn{
    background-color: darkgreen;
}
Enter fullscreen mode Exit fullscreen mode

If You have gotten to this point, then what you’ll do is to get ready for the for the JavaScript code

let count = 0
let countEl = document.getElementById("count-el")
let count = 0
let countEl = document.getElementById("count-el")
function increment() {
    count += 1
    countEl = document.getElementById("count-el")
    countEl.textContent = count
}   

let saveEl = document.getElementById("save-el")
function save() {
    let all = count + " - "
    saveEl.textContent += all
    countEl.textContent = 0
    count = 0
}
Enter fullscreen mode Exit fullscreen mode

Wow, you've worked hard to get to this point. You've just finished building a counter app that can be used any gathering.

Conclusion You've completed the Counter App and I'll see you again in the next tutorial.

About the Author

Emmanuel Okolie kick-started his journey as a software engineer in 2020. Over the years, he has grown full-blown skills in JavaScript, PHP, HTML & CSS and more.

He is currently freelancing, building websites for clients, and writing technical tutorials teaching others how to do what he does.
Emmanuel Okolie is open and available to hear from you. You can reach him on Linked-In, Facebook, Github, Twitter, or on his website.

Top comments (2)

Collapse
 
tracygjg profile image
Tracy Gilmore

Hi Emmanuel,
I can see a number of issues with your project. I have copied it to a JSFiddle and revised it as follows.
CSS: It is not a good idea to use IDs to reference DOM elements in the CSS as they are too specific. It is better to create a dedicated CSS class. In general I would recommend using CSS classes even in preference to referencing elements types (e.g. button, h1) but I have not changed these, treating them as a form of reset.
HTML: I added CSS class attributes to the buttons and replaced the background image as I did not have your original to hand. I also removed the linkage to the event handler functions, moving them to the JS directly.
JavaScript: Your variables were all in the global environment, which is not a good move. It is better to encapsulate them within a function so I wrapped mine in the event handler for when the DOM has completed rendering.
I located the button DOM elements and attached the event handlers directly.
I accumulated the saved counts and presented them (hyphen separated) before resetting the count value to zero.

Collapse
 
emmykolic profile image
Emmanuel C. Okolie

Thank you so much Sir..
I've taken you words, Next one will be better