@@ -0,0 +1,28 @@
+const counterSpan = document.querySelector('#value')
+const buttonContainer = document.querySelector('.button-container')
+const decreaseButton = document.querySelector('.decrease')
+const resetButton = document.querySelector('.reset')
+const increaseButton = document.querySelector('.increase')
+
+let counterValue = 0
+
+const allButtons = document.querySelectorAll('.btn')
+
+decreaseButton.addEventListener('click', function (e) {
+  counterValue -= 1
+  counterSpan.textContent = counterValue
+  if (counterValue < 0) counterSpan.style.color = 'red'
+  if (counterValue === 0) counterSpan.style.color = '#222'
+})
+resetButton.addEventListener('click', function (e) {
+  counterValue = 0
+  counterSpan.textContent = counterValue
+  if (counterValue === 0) counterSpan.style.color = '#222'
+})
+
+increaseButton.addEventListener('click', function (e) {
+  counterValue += 1
+  counterSpan.textContent = counterValue
+  if (counterValue > 0) counterSpan.style.color = 'green'
+  if (counterValue === 0) counterSpan.style.color = '#222'
+})
@@ -9,7 +9,15 @@
     <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
-    <h1>your code goes here</h1>
+    <main>
+      <h1>Counter</h1>
+      <span id="value">0</span>
+      <div class="button-container">
+        <button class="btn decrease">Decrease</button>
+        <button class="btn reset">Reset</button>
+        <button class="btn increase">Increase</button>
+      </div>
+    </main>
     <!-- javascript -->
     <script src="app.js"></script>
   </body>