ADVERTISEMENT

Increment Counter Using JavaScript

Telegram Group Join Now

ADVERTISEMENT

Increment Counter Using JavaScript

Hello coders, a very warm welcome to code with random. Today we’ll build an Increment Counter Using JavaScript. An increment counter is basically a basic project for the front-end developer and javascript plays a major role in it. Let us see the building of this project.

ADVERTISEMENT

Code byN/A
Project DownloadLink Available Below
Language usedHTML , CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Increment Counter Using JavaScript Table

Html Code For Increment Counter:   –

ADVERTISEMENT

Html stands for a hypertext markup language. It is used for creating the layout of the website. The main content of the website lies inside the body tag. Here we are going to create increment and decrement counters. In which we need to add two buttons one for increment(+) and the other is decrement(-) and an input tag for value.

<h1>Input Quantity Increment</h1>
<section>
    <form action="">
        <p class="qty">
            <label for="qty">Quantity:</label>
            <button class="qtyminus" aria-hidden="true">&minus;</button>
            <input
                type="number"
                name="qty"
                id="qty"
                min="1"
                max="1000"
                step="1"
                value="1"
            />
            <button class="qtyplus" aria-hidden="true">&plus;</button>
        </p>
    </form>
</section>

In this code, we have given a heading and labeled it as quantity. Then we used a form element as a number and set the minimum and maximum entries at a time. And created buttons for the + and -. Let us see the html output. Before writing css for the increment counter.

ADVERTISEMENT

Create Music Player Project Using Javascript (Source Code)

ADVERTISEMENT

Html output:-

This is the output of the Html code.

Increment Counter Using JavaScript
Increment Counter Html Code Preview

Css Code For Increment Counter:   –

Css stands for cascading styling sheet.Css is used for styling the layout of the website. Instead of using plain css for styling the layout of the website we can use the css frameworks like sass,scss, bootstrap, and tailwind.

ADVERTISEMENT

Here we are using the basic concepts of css like border-box, flexbox, and css selectors for classes and ids.

/* Reset for the demo */
* {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
}
body {
    margin: 0;
    font-size: 1.4rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #575757;
}
h1 {
    text-align: center;
}
button {
    padding: 0;
    margin: 0;
    border-style: none;
    touch-action: manipulation;
    display: inline-block;
    border: none;
    background: none;
    cursor: pointer;
} /* End Reset for the demo */ /* Sass Config */
$btn_grey: #575757; /* Contrast : 7.2:1 */ /* End Sass Config */
.qty {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    label {
        flex: 1 0 100%;
    }
    input {
        width: 7rem;
        height: 3rem;
        font-size: 1.3rem;
        text-align: center;
        border: 1px solid $btn_grey;
    }
    button {
        width: 3rem;
        height: 3rem;
        color: #fff;
        font-size: 2rem;
        background: $btn_grey;
    }
    button.qtyminus {
        margin-right: 0.3rem;
    }
    button.qtyplus {
        margin-left: 0.3rem;
    }
}

In this css code we have set the font color for the heading and set the position for the counter and styled the button of + and – . Let us have a look at the css output.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

ADVERTISEMENT

Html + Css output:

ADVERTISEMENT

Increment Counter Using JavaScript
Increment Counter HTML and CSS Code Preview
 
 

JavaScript Code For Increment Counter:   –

Javascript is used to add functionalities to websites. Here we want the when we click on the increment button the value increases by 1 and when we click on the decrement sign the value decreased by 1. So we need to use dom(document-object-model) manipulation. 

/* * @Adilade Input Quantity Increment * * Free to use - No warranty */ var input = document.querySelector(
    "#qty"
);
var btnminus = document.querySelector(".qtyminus");
var btnplus = document.querySelector(".qtyplus");
if (
    input !== undefined &&
    btnminus !== undefined &&
    btnplus !== undefined &&
    input !== null &&
    btnminus !== null &&
    btnplus !== null
) {
    var min = Number(input.getAttribute("min"));
    var max = Number(input.getAttribute("max"));
    var step = Number(input.getAttribute("step"));
    function qtyminus(e) {
        var current = Number(input.value);
        var newval = current - step;
        if (newval < min) {
            newval = min;
        } else if (newval > max) {
            newval = max;
        }
        input.value = Number(newval);
        e.preventDefault();
    }
    function qtyplus(e) {
        var current = Number(input.value);
        var newval = current + step;
        if (newval > max) newval = max;
        input.value = Number(newval);
        e.preventDefault();
    }
    btnminus.addEventListener("click", qtyminus);
    btnplus.addEventListener("click", qtyplus);
} // End if test

In this js code, we have defined everything as a variable except the + and – button for them we have defined function and set the conditions so that they can act accordingly. Let us see the output of this project.

50+ Html ,Css & Javascript Projects With Source Code

Final Output Of Increment Counter Using JavaScript:

Summary Increment Counter Using JavaScript:

ADVERTISEMENT

We have created an increment counter using html, css & javascript. We first created an html file using an element of the form called the number, creating a button as + and -. Then we styled all of them in a css file.

ADVERTISEMENT

We called them as variable(var) in the javascript file and then for buttons we set them in a function and pass on some conditions. If you loved do comment as it boosts our motivation to bring new projects for you guys. If you face any difficulty while performing feel free to reach out to us with the help of the comment section.

ADVERTISEMENT

Happy coding

ADVERTISEMENT

Written by @harsh_9& Himanshu Singh

ADVERTISEMENT

Which code editor do you use for this Increment Counter coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this is a responsive project

Do you use any external links to create this project?

No!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT