counter app

amit265 · amit265 · commit d8504f6f6a37 · 2025-11-11T12:41:13.000+05:30
diff --git a/counter-app/index.html b/counter-app/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Counter App</title>
+</head>
+
+<body>
+
+    <div id="container">
+        <h1 id="heading">Counter</h1>
+        <p id="counter-id"></p>
+        <div class="btn">
+            <button id="decrement-btn">Decrement</button>
+            <button id="reset-btn">Reset</button>
+            <button id="increment-btn">Increment</button>
+
+        </div>
+        <p id="instruction">Use buttons or ↑ / ↓ arrow keys. Double-click reset to confirm.</p>
+    </div>
+    <script src="./script.js"></script>
+
+</body>
+
+</html>
diff --git a/counter-app/script.js b/counter-app/script.js
@@ -0,0 +1,62 @@
+const counterDisplay = document.getElementById("counter-id");
+const incrementButton = document.getElementById("increment-btn");
+const decrementButton = document.getElementById("decrement-btn");
+const resetButton = document.getElementById("reset-btn");
+const container = document.getElementById("container");
+
+let counter = 0;
+
+function updateDisplay() {
+  counterDisplay.textContent = counter;
+  counterDisplay.style.fontWeight = "bold";
+  counterDisplay.style.fontSize = "32px";
+  incrementButton.style.padding = "5px";
+  decrementButton.style.padding = "5px";
+  resetButton.style.padding = "5px";
+  container.style.textAlign = "center";
+  incrementButton.style.backgroundColor = "#4CAF50";
+  incrementButton.style.color = "white";
+  decrementButton.style.color = "white";
+  resetButton.style.color = "white";
+  decrementButton.style.backgroundColor = "#f44336";
+  resetButton.style.backgroundColor = "#008CBA";
+
+  if (counter > 0) {
+    counterDisplay.style.color = "blue";
+  } else if (counter < 0) {
+    counterDisplay.style.color = "red";
+  } else {
+    counterDisplay.style.color = "black";
+  }
+}
+
+incrementButton.addEventListener("click", () => {
+  counter++;
+  updateDisplay();
+});
+
+decrementButton.addEventListener("click", () => {
+  counter--;
+  updateDisplay();
+});
+
+resetButton.addEventListener("click", () => {
+  counter = 0;
+  updateDisplay();
+});
+
+window.addEventListener("keydown", (e) => {
+  if (e.key === "ArrowUp") {
+    counter++;
+    updateDisplay();
+  } else if (e.key === "ArrowDown") {
+    counter--;
+    updateDisplay();
+  } else if (e.key === "r" || e.key === "R") {
+    counter = 0;
+    updateDisplay();
+  }
+});
+
+// Initial display update
+updateDisplay();
diff --git a/counter-app/styles.css b/counter-app/styles.css
@@ -0,0 +1,30 @@
+
+#container {
+
+    text-align: center;
+    width: 300px;
+    border: 1px solid rgb(165, 160, 160);
+    display: inline-block;
+    background-color: #f0f0f0;
+    border-radius: 10px;
+    box-shadow: #8d8686 5px 5px 15px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;;
+    align-items: center;  
+
+
+
+
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #e0e0e0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;  
+
+}
