diff --git a/.hintrc b/.hintrc new file mode 100644 index 0000000..eabae79 --- /dev/null +++ b/.hintrc @@ -0,0 +1,13 @@ +{ + "extends": [ + "development" + ], + "hints": { + "axe/aria": [ + "default", + { + "aria-valid-attr": "off" + } + ] + } +} \ No newline at end of file diff --git a/Color-Changer-With-Button/index.html b/Color-Changer-With-Button/index.html index 6d5b173..0c65b90 100644 --- a/Color-Changer-With-Button/index.html +++ b/Color-Changer-With-Button/index.html @@ -1,19 +1,24 @@ - - - + + + Color Changer - - - - -
- - + + + +

Choose Your VIBGYOR Color

+
+
+ + + -
+ + + + - - \ No newline at end of file + + diff --git a/Color-Changer-With-Button/script.js b/Color-Changer-With-Button/script.js index b862f07..70e9650 100644 --- 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; - } - }); -}); \ No newline at end of file + // 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 index 0c6688f..7b2f274 100644 --- 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; -} \ No newline at end of file +#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 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; +}