Increment-Decrement-In-JavaScript/index.html at master · Dcodeshow/Increment-Decrement-In-JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>D Code Show | JavaScript Increment</title>
    <meta charset="UTF-8">
    <!--Font Awesome CDN Link-->
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <div class="quantity">
        <button class="minus-btn btn  disabled" type="button">-</button>
        <input id="quantity" type="text" value="1" readonly>
        <button class="btn plus-btn" type="button">+</button>
    </div>

    <!---Will calculate price--->
    <p class="total-price">
        <span><i class="fa fa-rupee"></i></span>
        <span id="price">100</span>
    </p>


    <script>
        //setting default attribute to disabled
        document.querySelector(".minus-btn").setAttribute("disabled", "disabled");

        //taking value to increment decrement input value
        var valueCount;

        //taking price value in variable
        var price = document.getElementById("price").innerText;

        //price calculation function
        function priceTotal() {
            var total = valueCount * price;
            document.getElementById("price").innerText = total
        }

        //plus button
        document.querySelector(".plus-btn").addEventListener("click", function() {
            //getting value of input
            valueCount = document.getElementById("quantity").value;
            //input value increment by 1
            valueCount++;
            //setting increment input value
            document.getElementById("quantity").value = valueCount;

            //input value is > 1 using removeattribute and removeclass method
            if (valueCount > 1) {
                document.querySelector(".minus-btn").removeAttribute("disabled");
                document.querySelector(".minus-btn").classList.remove("disabled")
            }

            //Calling price Function
            priceTotal()
        })

        //same process for minus button
        document.querySelector(".minus-btn").addEventListener("click", function() {
            valueCount = document.getElementById("quantity").value;
            //input value decrement by 1
            valueCount--;
            document.getElementById("quantity").value = valueCount;
            console.log(valueCount);
            if (valueCount == 1) {
                document.querySelector(".minus-btn").setAttribute("disabled", "disabled")

            }
            priceTotal()
        })
    </script>
</body>

</html>