My-HTML-CSS-JAVASCRIPT-Mini-Projects/counter_click.html at main · KalamPinjar/My-HTML-CSS-JAVASCRIPT-Mini-Projects · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            background: rgba(27, 213, 238, 0.548);
        }

        .container {
            position: relative;
            height: 100vh;
            min-width: fit-content;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 10px;
        }

        .container .button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        button {
            font-size: 1.1rem;
            font-weight: 600;
            height: 10vh;
            width: 20vh;
            border-radius: 10vh;
            background-color: rgb(28, 87, 214);

        }

        input {
            border: 1px solid black;
            font-size: 4rem;
            height: 20vh;
            width: 40vh;
            text-align: center;
            border-radius: 20px;
            background: radial-gradient(cyan, transparent 100%),
                conic-gradient(blue, cyan, blue, cyan, blue, cyan, blue, cyan, blue);

        }

        button:hover {
            color: white;
            background-color: rgb(34, 47, 241);
        }
    </style>
</head>

<body>
    <div class="container">

        <input type="number" value="0" id="input">

        <div class="button">

            <button id="Decrease" ">Decrease</button>
            <button id="Reset" ">Reset</button>
            <button id="Increase" ">Increase</button>

        </div>

    </div>

    <script>
        let text1 = document.getElementById("input"),
            btn1 = document.getElementById("Decrease"),
            btn2 = document.getElementById("Reset"),
            btn3 = document.getElementById("Increase"),
            count = 0;

        textv=text1.value
        btn1.addEventListener("click", function Click(){
            textv = count--;
            text1.value=textv
        })

        btn2.addEventListener("click", function Click(){
            textv = count=0;
            text1.value=textv
        })

        btn3.addEventListener("click", function Click(){
            textv = count++;
            text1.value=textv
        })


    </script>

</body>

</html>