04Shubhankar · AnupmaMishra12 · Nov 6, 2025 · Nov 8, 2025 · Nov 8, 2025
diff --git 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;
-}
diff --git a/Counter Web Application/Counter Web Application.html b/Counter Web Application/Counter Web Application.html
@@ -1,25 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Counter Web Application</title>
-    <link rel="stylesheet" href="Counter Web Application.css">
-</head>
-<body>
-
-    <div class="container">
-        <div class="card">
-            <h1 class="Heading">Counter App</h1>
-            <div class="counter">
-                <h1 class="CounterMachine">0</h1>
-            </div>
-            <div class="btn-grp">
-                <button class="btn-counter desc-btn">Decrese</button>
-                <button class="btn-counter insc-btn">Increase</button>
-            </div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Responsive Counter App</title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="Counter Web Application.css" />
+  </head>
+  <body>
+    <main class="container">
+      <h1>Counter Web Application</h1>
+      <p class="description">
+        Click the buttons to increase or decrease the count.
+      </p>
+      <div class="counter-box">
+        <span id="count">0</span>
+        <div class="buttons">
+          <button onclick="decrement()">−</button>
+          <button onclick="reset()">Reset</button>
+          <button onclick="increment()">+</button>
         </div>
-    </div>
+      </div>
+    </main>
     <script src="Counter Web Application.js"></script>
-</body>
-</html>
+  </body>
+</html>
diff --git 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;
+}
diff --git a/README.md b/README.md
@@ -24,7 +24,28 @@ 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.
+## 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)
+
+
+
+---
+
 **Getting Started:**
 
 1. Clone the repository: `git clone <repository_url>`