zpratikpathak · sandeepMcodeX · Oct 18, 2025 · Copilot · Oct 18, 2025 · Copilot
diff --git a/30-counter-app/index.html b/30-counter-app/index.html
@@ -0,0 +1,25 @@
+<!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>
+    <link rel="stylesheet" href="style.css" />
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Counter App</h1>
+      <p class="outputValue">0</p>
+      <div class="box-one">
+        <button class="minusButton btn-sty">-</button>
+        <button class="plusButton btn-sty">+</button>
+      </div>
+      <div class="box-two">
+        <p>Increment / Decrement By :</p>
+        <input class="input-sty" type="number" value="1" />
+      </div>
+      <button type="submit" class="resetButton">Reset</button>
+    </div>
+  </body>
+</html>
diff --git a/30-counter-app/readme.md b/30-counter-app/readme.md
@@ -0,0 +1,82 @@
+# 🧮 Counter App
+
+A simple and interactive Counter App built using **JavaScript (or React / any tech you used)**.  
+This project demonstrates the use of **state management**, **DOM manipulation**, and **event handling** in a clean and beginner-friendly way.
+
+---
+
+## 🚀 Features
+
+- Increment the counter ➕  
+- Decrement the counter ➖  
+- Reset the counter 🔄  
+- Real-time updates on screen  
+- Clean and responsive UI  
+
+---
+
+## 🛠️ Tech Stack
+
+- **Frontend:** HTML, CSS, JavaScript  
+
+---
+
+## 📂 Project Structure
+
+```
+
+Counter-App/
+│
+├── index.html        # Main HTML file
+├── style.css         # Styles
+├── script.js         # Logic for counter (or App.jsx if using React)
+└── README.md         # Project documentation
+
+````
+
+---
+
+## ⚙️ How to Run Locally
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/your-username/counter-app.git
+````
+
+2. Navigate into the project folder:
+
+   ```bash
+   cd counter-app
+   ```
+3. Open the app:
+
+   * If it's **vanilla JS**, just open `index.html` in your browser.
+   * If it's **React**, run:
+
+     ```bash
+     npm install
+     npm start
+     ```
+
+---
+
+## 🧠 What I Learned
+
+* Basics of **state management**
+* Handling **events** in JavaScript
+* Structuring small frontend projects
+* Practicing **clean UI and UX**
+
+## 🌟 Future Improvements
+
+* Add dark mode toggle 🌙
+* Add animations or transitions
+* Store counter value in localStorage
+
+---
+
+## 👨‍💻 Author
+
+**Sandeep Maurya**
+
+
diff --git a/30-counter-app/script.js b/30-counter-app/script.js
@@ -0,0 +1,22 @@
+const decreaseButton = document.querySelector('.minusButton');
+const increaseButton = document.querySelector('.plusButton');
+const outputValue = document.querySelector('.outputValue');
+const userInput = document.querySelector('.input-sty');
+const resetButton = document.querySelector('.resetButton');
+
+decreaseButton.addEventListener('click', () => {
+  const resultValue = parseInt(outputValue.innerText);
+  const userInputValue = parseInt(userInput.value);
+  outputValue.innerText = resultValue - userInputValue;
+});
+
+increaseButton.addEventListener('click', () => {
+  const resultValue = parseInt(outputValue.innerText);
+  const userInputValue = parseInt(userInput.value);
+  outputValue.innerText = resultValue + userInputValue;
-  outputValue.innerText = resultValue - userInputValue;
-});
-
-increaseButton.addEventListener('click', () => {
-  const resultValue = parseInt(outputValue.innerText);
-  const userInputValue = parseInt(userInput.value);
-  outputValue.innerText = resultValue + userInputValue;
+  outputValue.innerText = resultValue - (isNaN(userInputValue) ? 1 : userInputValue);
+});
+
+increaseButton.addEventListener('click', () => {
+  const resultValue = parseInt(outputValue.innerText);
+  const userInputValue = parseInt(userInput.value);
+  outputValue.innerText = resultValue + (isNaN(userInputValue) ? 1 : userInputValue);
-  outputValue.innerText = resultValue - userInputValue;
-});
-
-increaseButton.addEventListener('click', () => {
-  const resultValue = parseInt(outputValue.innerText);
-  const userInputValue = parseInt(userInput.value);
-  outputValue.innerText = resultValue + userInputValue;
+  outputValue.innerText = resultValue - (isNaN(userInputValue) ? 1 : userInputValue);
+});
+
+increaseButton.addEventListener('click', () => {
+  const resultValue = parseInt(outputValue.innerText);
+  const userInputValue = parseInt(userInput.value);
+  outputValue.innerText = resultValue + (isNaN(userInputValue) ? 1 : userInputValue);
+});
+
+resetButton.addEventListener('click', () => {
+  outputValue.innerText = 0;
+  userInput.value = 1;
+});
diff --git a/30-counter-app/style.css b/30-counter-app/style.css
@@ -0,0 +1,95 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #191a1b;
+  font-family: 'Winky Sans', sans-serif;
+  color: white;
+}
+.container {
+  width: 100%;
+  max-width: 390px;
+  min-height: 380px;
+  background-color: #25384b;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 20px;
+  border-radius: 10px;
+  box-shadow: 3px 1px 0px white;
+}
+.container h1 {
+  margin-top: 16px;
+}
+.outputValue {
+  font-size: 48px;
+}
+.box-one {
+  display: flex;
+  column-gap: 32px;
+  margin: 16px 0px;
+}
+.btn-sty {
+  color: #ecf0f1;
+  border-radius: 5px;
+  border: solid 1px #f39c12;
+  background: #e67e22;
+  text-align: center;
+  padding: 0px 30px;
+  font-size: 2.1em;
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  transition: all 0.1s;
+  -webkit-box-shadow: 0px 6px 0px #d35400;
+  -moz-box-shadow: 0px 6px 0px #d35400;
+  box-shadow: 0px 6px 0px #d35400;
+}
+.btn-sty:active {
+  -webkit-box-shadow: 0px 2px 0px #d35400;
+  -moz-box-shadow: 0px 2px 0px #d35400;
+  box-shadow: 0px 2px 0px #d35400;
+  position: relative;
+  top: 4px;
+}
+.box-two {
+  display: flex;
+  column-gap: 16px;
+  margin-bottom: 16px;
+}
+.box-two p {
+  font-size: 19px;
+}
+.input-sty {
+  width: 100%;
+  max-width: 50px;
+  border-radius: 5px;
+  padding: 5px 5px;
+}
+.resetButton {
+  color: #ecf0f1;
+  border-radius: 5px;
+  border: solid 1px #ff0000;
+  background: #e62222;
+  text-align: center;
+  padding: 5px 15px;
+  font-size: 1.2em;
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  transition: all 0.1s;
+  -webkit-box-shadow: 0px 6px 0px #e62222;
+  -moz-box-shadow: 0px 6px 0px #e62222;
+  box-shadow: 0px 6px 0px #b20000;
+}
+.resetButton:active {
+  -webkit-box-shadow: 0px 2px 0px #e62222;
+  -moz-box-shadow: 0px 2px 0px #e62222;
+  box-shadow: 0px 2px 0px #e62222;
+  position: relative;
+  top: 4px;
+}
diff --git a/Readme.md b/Readme.md
@@ -281,6 +281,11 @@ This project is a simple web-based Coin Toss game. The HTML file sets up the str
 Want to add your Javascript Project? Feel free to contribute, open a Pull Request [Contribute](https://github.com/zpratikpathak/25-Javascript-Projects-for-beginner)
 
 <hr>
+### 30. Counter App
+
+This project is a simple web-based **Counter Application**.  
+The HTML file sets up the structure of the app, which includes a heading, a display area showing the counter value, and three buttons — **Increase**, **Decrease**, and **Reset** — that let the user update the count dynamically using JavaScript.
+
 
 ### Final Words