diff --git a/30-counter-app/index.html b/30-counter-app/index.html new file mode 100644 index 0000000..a0202f3 --- /dev/null +++ b/30-counter-app/index.html @@ -0,0 +1,25 @@ + + + + + + Counter App + + + + +
+

Counter App

+

0

+
+ + +
+
+

Increment / Decrement By :

+ +
+ +
+ + diff --git a/30-counter-app/readme.md b/30-counter-app/readme.md new file mode 100644 index 0000000..81a089d --- /dev/null +++ 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 new file mode 100644 index 0000000..e6c82ab --- /dev/null +++ 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; +}); + +resetButton.addEventListener('click', () => { + outputValue.innerText = 0; + userInput.value = 1; +}); diff --git a/30-counter-app/style.css b/30-counter-app/style.css new file mode 100644 index 0000000..b32165d --- /dev/null +++ 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 index cb2d28d..f8e1d49 100644 --- 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)
+### 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