Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 25, 2022 02:33 pm GMT

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 its 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. Youll 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 dont 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>

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

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

let count = 0let 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}

Wow, you've worked hard to get to this point. You've just nished 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 LinkedIn, Facebook, GitHub, or on his website.


Original Link: https://dev.to/emmykolic/how-to-code-an-incremental-button-using-vanilla-javascript-42le

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To