04Shubhankar · AnupmaMishra12 · Nov 6, 2025 · Nov 7, 2025
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": [
+      "default",
+      {
+        "aria-valid-attr": "off"
+      }
+    ]
+  }
+}
diff --git a/Color-Changer-With-Button/index.html b/Color-Changer-With-Button/index.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Color Changer</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-
-    <div class="button-container">
-        <button class="button" id="grey">Grey</button>
-        <button class="button" id="white">White</button>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h1 id="heading">Choose Your VIBGYOR Color</h1>
+    <main>
+      <section class="button-container" aria-label="Color Changer Buttons">
+        <button class="button" id="Violet">Violet</button>
+        <button class="button" id="Indigo">Indigo</button>
         <button class="button" id="blue">Blue</button>
+        <button class="button" id="green">Green</button>
         <button class="button" id="yellow">Yellow</button>
-    </div>
+        <button class="button" id="orange">Orange</button>
+        <button class="button" id="red">Red</button>
+      </section>
+    </main>
     <script src="script.js"></script>
-</body>
-</html>
+  </body>
+</html>
diff --git a/Color-Changer-With-Button/script.js b/Color-Changer-With-Button/script.js
@@ -1,11 +1,37 @@
-
 const buttons = document.querySelectorAll(".button");
-const body = document.querySelector("body");
+const heading = document.getElementById("heading");
+
+const colorMap = {
+  Violet: "#8F00FF",
+  Indigo: "#4B0082",
+  blue: "#0000FF",
+  green: "#00FF00",
+  yellow: "#FFFF00",
+  orange: "#FFA500",
+  red: "#FF0000",
+};
+const contrastMap = {
+  Violet: "white",
+  Indigo: "black",
+  blue: "white",
+  green: "black",
+  yellow: "white",
+  orange: "black",
+  red: "white",
+};
+buttons.forEach((button) => {
+  button.addEventListener("click", () => {
+    /**
+     * The color value mapped to the button's ID in the colorMap object
+     * @type {string}
+     */
+    const color = colorMap[button.id];
+    document.body.style.backgroundColor = color;
 
-buttons.forEach(function(button){
-    button.addEventListener('click',function(e){
-        if(e.target.id){
-            body.style.backgroundColor = e.target.id;
-        }
-    });
-});
+    // Optional: Animate button text or show color name
+    button.innerText = `✔ ${button.id}`;
+    setTimeout(() => {
+      button.innerText = button.id;
+    }, 1000);
+  });
+});
diff --git a/Color-Changer-With-Button/style.css b/Color-Changer-With-Button/style.css
@@ -1,42 +1,71 @@
-body{
-    font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    transition: background-color 0.3s;
+#heading {
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 40px;
+  text-align: center;
+  transition: color 0.5s ease-in-out;
+  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
 }
 
-.button-container{
-    display: flex;
-    gap: 15px;
+body {
+  font-family: "Segoe UI", sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  transition: background-color 0.6s ease-in-out;
 }
 
-.button{
-    padding: 10px 20px;
-    font-size: 16px;
-    cursor: pointer;
-    border: none;
-    border-radius: 5px;
+.button-container {
+  display: flex;
+  gap: 15px;
+  flex-wrap: wrap;
+  justify-content: center;
 }
 
-#grey{
-    background-color: grey;
-    color: white;
+.button {
+  padding: 15px 25px;
+  font-size: 18px;
+  cursor: pointer;
+  border: none;
+  border-radius: 8px;
+  font-weight: bold;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s ease, background-color 0.3s ease;
+}
+.button:hover {
+  transform: scale(1.1);
+}
+
+#Violet {
+  background-color: violet;
+  color: white;
 }
 
-#white{
-    background-color: white;
-    color: black;
+#Indigo {
+  background-color: indigo;
+  color: black;
 }
 
-#blue{
-    background-color: blue;
-    color: white;
+#blue {
+  background-color: blue;
+  color: white;
+}
+#green {
+  background-color: green;
+  color: black;
 }
 
-#yellow{
-    background-color: yellow;
-    color: black;
-}
+#yellow {
+  background-color: yellow;
+  color: white;
+}
+#orange {
+  background-color: orange;
+  color: black;
+}
+#red {
+  background-color: Red;
+  color: white;
+}
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>