Developer0Rohit · BrianShifoko · May 22, 2024 · May 22, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,28 @@
+# Counter Application
+
+This is a simple web-based counter application that allows users to increment, decrement, and reset a counter value. Additionally, users can specify a step value for incrementing and decrementing the counter.
+
+![Screenshot of Counter Application](images/counter%20Application.png)
+
+## Features
+
+- **Increment and Decrement**: Basic functionality to increase or decrease the counter value.
+- **Reset**: A button to reset the counter to zero.
+- **Step Value**: An input field to specify the step value for incrementing and decrementing.
+- **Responsive UI**: Modern and user-friendly interface with improved accessibility features.
+
+## Contributing
+Contributions are welcome! Please feel free to submit a pull request or open an issue if you have any suggestions or find any bugs.
+
+
+### Screenshot
+
+Make sure to include a screenshot of your project in the root directory images folder of your project and name it `counter Application.png`. This will be referenced in the README file to give viewers a visual understanding of the application.
+
+### Final Notes
+
+- Update the `git clone` URL to your actual repository URL.
+- Ensure the screenshot accurately represents the current state of the project.
+- Customize the README as needed to better fit your project and contributions.
+
+
diff --git a/images/counter Application.png b/images/counter Application.png
diff --git a/index.html b/index.html
@@ -1,16 +1,20 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Counter Application</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <h1>Counter: <span id="counter">0</span></h1>
+    <input type="number" id="stepInput" placeholder="Step value" min="1" style="font-size: 18px; padding: 10px; margin-bottom: 20px;">
+    <br>
     <button id="incrementBtn">Increment</button>
     <button id="decrementBtn">Decrement</button>
+    <button id="resetBtn">Reset</button>
 
     <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/script.js b/script.js
@@ -1,17 +1,27 @@
+
 const counterElement = document.getElementById("counter");
 const incrementButton = document.getElementById("incrementBtn");
 const decrementButton = document.getElementById("decrementBtn");
+const resetButton = document.getElementById("resetBtn");
+const stepInput = document.getElementById("stepInput");
 
 let counter = 0;
 
 incrementButton.addEventListener("click", () => {
-    counter++;
+    const step = parseInt(stepInput.value) || 1;
+    counter += step;
     counterElement.textContent = counter;
 });
 
 decrementButton.addEventListener("click", () => {
-    if (counter > 0) {
-        counter--;
+    const step = parseInt(stepInput.value) || 1;
+    if (counter - step >= 0) {
+        counter -= step;
         counterElement.textContent = counter;
     }
-});
+});
+
+resetButton.addEventListener("click", () => {
+    counter = 0;
+    counterElement.textContent = counter;
+});
diff --git a/style.css b/style.css
@@ -1,28 +1,35 @@
+
 body {
-    background-color: #120f0f;
-    font-family: Arial, sans-serif;
-    color: aliceblue;
-    text-align: center;
-    margin-top: 250px
-  }
+  background-color: #2c3e50;
+  font-family: 'Helvetica Neue', sans-serif;
+  color: #ecf0f1;
+  text-align: center;
+  margin-top: 150px;
+}
 
-  #counter {
-    font-size: 24px;
-    margin: 20px;
-    color: white;
-  }
+h1 {
+  font-size: 36px;
+  margin-bottom: 20px;
+}
 
-  #incrementBtn, #decrementBtn {
-    font-size: 18px;
-    padding: 10px 20px;
-    margin: 10px;
-    cursor: pointer;
-    border-radius: 20px;
-  }
+#counter {
+  font-size: 48px;
+  margin: 20px;
+  color: #2ecc71;
+}
 
-  #incrementBtn:hover, #decrementBtn:hover{
-    background-color: red;
-    color: aliceblue;
-    border-radius: 20px;
+button {
+  font-size: 18px;
+  padding: 15px 30px;
+  margin: 10px;
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  background-color: #3498db;
+  color: #ecf0f1;
+  transition: background-color 0.3s;
+}
 
-  }
+button:hover {
+  background-color: #2980b9;
+}