Increment Counter Using HTML CSS And JAVASCRIPT

Increment Counter Using HTML CSS And JAVASCRIPT (Source Code)

by

Increment Counter Using HTML CSS And JAVASCRIPT (Source Code)

Introduction:

Hello coders, a very warm welcome to code with random. Today we’ll build an increment counter using html, css & 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.

Html code:   –

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 increment counter.

Html output:-

This is the output of the html code.

 

Css code:-

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.

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+ Front-end Projects for Web developers (Source Code)

Css output:

Javascript code:-

Javascript is used to add functionalities to websites. Here we want that 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.

Final output:

Summary:

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. 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.

Happy coding

Written by @harsh_9& Himanshu Singh

Share on:

Leave a Comment