added counter

Author: zhuk1707

blocks/counter.css

@@ -0,0 +1,52 @@
+main {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.main {
+  &__inner {
+  }
+
+  &__title {
+    text-align: center;
+    font-family: 'Roboto Mono', monospace;
+  }
+
+  &__counter {
+    margin-top: 20px;
+  }
+}
+
+.counter {
+  background-color: white;
+  border-radius: 30px;
+  padding: 30px;
+  &__output {
+    text-align: center;
+    font-size: 72px;
+  }
+
+  &__buttons {
+    margin-top: 15px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+
+  &__btn {
+    color: inherit;
+    font-size: inherit;
+    background-color: transparent;
+    border: 1px solid black;
+    border-radius: 30px;
+    padding: 8px 16px;
+
+    transition: .3s ease;
+    &:hover {
+      color: white;
+      background-color: black;
+    }
+  }
+}

blocks/counter.css.map

@@ -20,7 +20,8 @@ <h1 class="main__title">Small JavaScript Projects</h1>
                             <img src="images/main-page/01.png" alt="Counter">
                         </a>
                         <a href="pages/counter.html" class="cards-block__title">Counter</a>
-                        <p class="cards-block__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci magnam minima neque quae tenetur! Eius fugiat itaque non praesentium voluptatem?</p>
+                        <p class="cards-block__subtitle">Simple counter.
+                            User can decrement, reset and increment counter.</p>
                     </div>
 
                 </div>

blocks/counter.scss

@@ -0,0 +1,25 @@
+let counter = 0
+
+const value = document.querySelector('.counter__output')
+const buttons = document.querySelector('.counter__buttons')
+
+buttons.addEventListener("click", valueHandler)
+
+function valueHandler(e) {
+  if (e.target.innerText === 'Decrement') {
+    counter--
+  } else if (e.target.innerText === 'Reset') {
+    counter = 0
+  } else {
+    counter++
+  }
+  value.innerHTML = counter
+
+  if (counter < 0) {
+    value.style.color = "red";
+  } else if (counter !== 0) {
+    value.style.color = "green";
+  } else {
+    value.style.color = "black";
+  }
+}