My-JavaScript-Projects/counter.html at main · Hamda-ibrahim/My-JavaScript-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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COUNTER APP</title>
   <style>

    .counter{
        display:flex;
        flex-direction: column;
        margin: 100px auto;
        width:100px;
        /* align-items:center; */
        /* font-size:40px; */

    }
    .count{
        text-align: center;
        font-size:40px;
    }
    button{
        margin-top:10px;
        padding:8px;
        font-size:15px;
        cursor:pointer;
        border:none;
        color: white;
    }

    .increment{
        background-color: green;
    }
    .decrement{
        background-color: red;
    }
    .reset{
        background-color: grey;
    }
   </style>
</head>
<body>


    <div class="counter">
        <h1 class="count">0</h1>
        <span class="error"></span>
        <button class="increment" onclick="
            increment();
            ">Increase</button>
        <button class="decrement" onclick="decrement();">Decrease</button>
        <button class="reset" onclick="reset();
            ">Reset</button>
    </div>


    <script>

        const savedValue = localStorage.getItem("counter");

        let count = savedValue ? Number(savedValue) : 0;
        let result = document.querySelector('.count');
        result.innerHTML = count;

        let error = document.querySelector('.error');


        function update(){
            result.innerHTML = count;

            if(result.innerHTML > 0){
                result.style.color = "green";
            } else if(result.innerHTML < 0){
                result.style.color = "red";
            } else {
                result.style.color = "grey";
            }

            localStorage.setItem("counter", count);

        }


        function increment(){
           count++;

           update();
           console.log(result);


        }

        function decrement(){

            if(count <= 0){
                error.innerHTML = "Count is less than 0";

                error.style.color = "red";
            } else {
                count--;

            }

            update();

        }

        function reset(){

            if(count === 0){
                error.innerHTML = "Count is already reset.";

                error.style.color = 'red';
            } else {
                count = 0;
            }

            update();

            // count = 0;
        }

    </script>

</body>
</html>