From 4662a6bab0d30e9ce8b112fb6dc027fe7e135376 Mon Sep 17 00:00:00 2001 From: AnupamaMishra12 Date: Thu, 6 Nov 2025 21:43:03 +0530 Subject: [PATCH 1/3] Refactor Counter Web Application for improved structure and styling --- .../Counter Web Application.css | 101 +++++++----------- .../Counter Web Application.html | 47 ++++---- .../Counter Web Application.js | 57 ++++------ 3 files changed, 86 insertions(+), 119 deletions(-) diff --git a/Counter Web Application/Counter Web Application.css b/Counter Web Application/Counter Web Application.css index 44d8167..630670a 100644 --- a/Counter Web Application/Counter Web Application.css +++ b/Counter Web Application/Counter Web Application.css @@ -1,75 +1,52 @@ -body{ - padding: 0; - margin: 0; - box-sizing: border-box; - background: linear-gradient(top-right,green blue) ; - display: flex; - align-items: center; - justify-content: center; - min-height: 100vh; +body { + margin: 0; + font-family: "Poppins", sans-serif; + background: linear-gradient(to right, #f8f9fa, #e0eafc); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } -.container{ - display: flex; - align-items: center; - justify-content: center; - height: 100%; +.container { + text-align: center; + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + width: 90%; + max-width: 400px; } -.card{ - background: linear-gradient(to bottom, red black); - border-radius: 10px; - padding: 30px; - text-align: center; - width: 300px; - -} - -.heading, .counter-machine{ - color: white; - margin: 0; - +h1 { + margin-bottom: 0.5rem; + color: #333; } -.counter{ - background-color: blueviolet; - border-radius: 50%; - padding: auto; - margin: auto; - width: 100px; - height: 100px; - display: flex; - align-items: center; - justify-content: center; - font-size: large; - border: 4px solid transparent; - transition: border-colour 1s; +.description { + font-size: 0.9rem; + color: #666; + margin-bottom: 1.5rem; } -.btn-grp{ - display: flex; - justify-content: space-between; - margin: auto; +.counter-box { + font-size: 2.5rem; + margin-bottom: 1rem; + color: #007bff; } -.btn-counter{ - border-color: bisque; - border: none; - border-radius: 5px; - color: black; - cursor: pointer; - padding: 10px 10px; - transition: background-colour 1s; +.buttons button { + margin: 0 0.5rem; + padding: 0.6rem 1.2rem; + font-size: 1rem; + border: none; + border-radius: 8px; + background-color: #007bff; + color: white; + cursor: pointer; + transition: background 0.3s ease; } -.btn-counter:hover{ - background-color: pink; +.buttons button:hover { + background-color: #0056b3; } - -.positive{ - border-color: green; -} - -.negative{ - border-color: red; -} \ No newline at end of file diff --git a/Counter Web Application/Counter Web Application.html b/Counter Web Application/Counter Web Application.html index 1a0441b..18e591b 100644 --- a/Counter Web Application/Counter Web Application.html +++ b/Counter Web Application/Counter Web Application.html @@ -1,25 +1,30 @@ - - - - Counter Web Application - - - - -
-
-

Counter App

-
-

0

-
-
- - -
+ + + + Responsive Counter App + + + + +
+

Counter Web Application

+

+ Click the buttons to increase or decrease the count. +

+
+ 0 +
+ + +
-
+
+ - - \ No newline at end of file + + diff --git a/Counter Web Application/Counter Web Application.js b/Counter Web Application/Counter Web Application.js index 55b4a97..96930ba 100644 --- a/Counter Web Application/Counter Web Application.js +++ b/Counter Web Application/Counter Web Application.js @@ -1,38 +1,23 @@ -(function(){ - const button = document.querySelectorAll(".btn-counter"); - let count = 0; - const counter = document.querySelector(".CounterMachine"); - const countercontainer = document.querySelector(".counter"); +let count = 0; +const countDisplay = document.getElementById("count"); - button.forEach(function(button){ - button.addEventListener("click", function() { - // If the button has the class 'desc-btn', decrement the count - if(button.classList.contains("desc-btn")){ - count--; - } - // Otherwise, increment the count - else{ - count++; - } - - // Update the counter display with the current count - counter.textContent = count; +function increment() { + count++; + updateDisplay(); +} - // If count is positive, apply positive class and remove negative - if(count > 0){ - countercontainer.classList.remove("negative"); - countercontainer.classList.add("positive"); - } - // If count is negative, apply negative class and remove positive - else if(count < 0){ - countercontainer.classList.remove("positive"); - countercontainer.classList.add("negative"); - } - // If count is zero, remove both classes - else{ - countercontainer.classList.remove("negative"); - countercontainer.classList.remove("positive"); - } - }); - }); -})(); +function decrement() { + if (count > 0) { + count--; + updateDisplay(); + } +} + +function reset() { + count = 0; + updateDisplay(); +} + +function updateDisplay() { + countDisplay.textContent = count; +} From ecdb3ec6948326b5fc1681f1072b5c71cdcf0154 Mon Sep 17 00:00:00 2001 From: Anupama mishra Date: Sat, 8 Nov 2025 20:31:42 +0530 Subject: [PATCH 2/3] Add open-source contributions section to README Added a section highlighting open source contributions by Anupma Mishra, detailing enhancements made to the Counter Web App and Color Changer App, along with upcoming work on accessibility improvements. --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index 422c3d9..3f08ee1 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,22 @@ This repository contains 20 beginner-friendly web development projects built usi 18. Background Color 19. The Popover 20. FD Calculator +--- +### 👩‍💻 Open Source Contributions +This repository proudly includes contributions by **Anupma Mishra**, who has: + +- Enhanced the **Counter Web App** with improved structure and styling +- Upgraded the **Color Changer App** with VIBGYOR logic and semantic HTML +- (Upcoming) Working on a third PR to further enrich the project with accessibility and UI improvements + +Her contributions aim to complement the original work by @05hubhankar20, whose beginner-friendly project structure and thoughtful design laid the foundation for meaningful enhancements. + +These updates reflect a shared focus on **clean code**, **user experience**, and **accessibility** — making the project more impactful for learners. + + +--- + **Getting Started:** 1. Clone the repository: `git clone ` From 15f3d32b17cfa0b20ae10beae813deea18280c8f Mon Sep 17 00:00:00 2001 From: Anupama mishra Date: Sat, 8 Nov 2025 23:13:10 +0530 Subject: [PATCH 3/3] Document accessibility polish milestone in README Added a milestone section detailing accessibility polish updates with links to relevant pull requests. --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 3f08ee1..9f684c6 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,12 @@ This repository proudly includes contributions by **Anupma Mishra**, who has: Her contributions aim to complement the original work by @05hubhankar20, whose beginner-friendly project structure and thoughtful design laid the foundation for meaningful enhancements. These updates reflect a shared focus on **clean code**, **user experience**, and **accessibility** — making the project more impactful for learners. +## Milestone: Accessibility Polish (3 PRs) + +- ✅ [Counter App – Semantic & UI Polish](https://github.com/04Shubhankar/20_HTML-CSS-JS-Beginner-Projects/pull/3) +- ✅ [VIBGYOR Color App – Logic & Styling](https://github.com/04Shubhankar/20_HTML-CSS-JS-Beginner-Projects/pull/4) +- ✅ [Form Validator – Accessibility Enhancements](https://github.com/04Shubhankar/20_HTML-CSS-JS-Beginner-Projects/pull/5) + ---