Counter/index.html at main · ReubenStill/Counter · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter Website</title>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #4285f4;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .counter {
    text-align: center;
  }

  .counter h1 {
    font-size: 60px;
  }

  .counter button {
    background-color: #0f9d58;
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 28px;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 8px;
    outline: none;
    transition: background-color 0.3s;
  }

  .counter button:hover {
    background-color: #0a7d42;
  }

  #reset {
    background-color: #ea4335;
  }

  #reset:hover {
    background-color: #d2362b;
  }
</style>
</head>
<body>
<div class="counter">
  <h1>Counter!</h1>
  <p id="count" style="font-size: 48px;">0</p>
  <button id="increment" style="font-size: 28px;">Increment</button>
  <button id="decrement" style="font-size: 28px;">Decrement</button>
  <button id="reset" style="font-size: 28px;">Reset</button>
</div>

<script>
  const countDisplay = document.getElementById('count');
  const incrementButton = document.getElementById('increment');
  const decrementButton = document.getElementById('decrement');
  const resetButton = document.getElementById('reset');

  let count = 0;

  function updateCount() {
    countDisplay.textContent = count;
  }

  incrementButton.addEventListener('click', () => {
    count++;
    updateCount();
    incrementButton.classList.add('clicked');
    setTimeout(() => {
      incrementButton.classList.remove('clicked');
    }, 100);
  });

  decrementButton.addEventListener('click', () => {
    count--;
    updateCount();
    decrementButton.classList.add('clicked');
    setTimeout(() => {
      decrementButton.classList.remove('clicked');
    }, 100);
  });

  resetButton.addEventListener('click', () => {
    count = 0;
    updateCount();
    resetButton.classList.add('clicked');
    setTimeout(() => {
      resetButton.classList.remove('clicked');
    }, 100);
  });
</script>
</body>
</html>