diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..1c3cd19 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..3376fc9 --- /dev/null +++ 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 new file mode 100644 index 0000000..0b46dc1 Binary files /dev/null and b/images/counter Application.png differ diff --git a/index.html b/index.html index f36c36c..31dd101 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,20 @@ + - Document + Counter Application

Counter: 0

+ +
+ - \ No newline at end of file + diff --git a/script.js b/script.js index b47686e..1c31c61 100644 --- 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; } -}); \ No newline at end of file +}); + +resetButton.addEventListener("click", () => { + counter = 0; + counterElement.textContent = counter; +}); diff --git a/style.css b/style.css index 2925b05..e7dc0e7 100644 --- 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; +}