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; +} diff --git a/Form Validator/Form Validate.css b/Form Validator/Form Validate.css index d7c5ca6..0cb17d0 100644 --- a/Form Validator/Form Validate.css +++ b/Form Validator/Form Validate.css @@ -1,111 +1,107 @@ -*{ - box-sizing: border-box; - margin: 0%; - padding: 0%; +* { + box-sizing: border-box; + margin: 0%; + padding: 0%; } -body{ - background: linear-gradient(to right,lightblue,lightgreen); - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - +body { + background: linear-gradient(to right, lightblue, lightgreen); + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; } -.container{ - background: linear-gradient(to bottom,white,grey); - border-radius: 5px; - box-shadow: 0px 2px 5px rgba(0,0,0,0.3); - width: 400px; - +.container { + background: linear-gradient(to bottom, white, grey); + border-radius: 5px; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); + width: 400px; } -.header{ - border-bottom: 1px solid palegreen; - background-color: beige; - padding: 20px 40px; +.header { + border-bottom: 1px solid palegreen; + background-color: beige; + padding: 20px 40px; } -.header h1{ - margin: 0; - +.header h1 { + margin: 0; } -form{ - padding: 30px 40px; +form { + padding: 30px 40px; } -.controlform{ - margin-bottom: 10px; - padding-bottom: 10px; - position: relative; - transition: all 0.3s ease; - +.controlform { + margin-bottom: 10px; + padding-bottom: 10px; + position: relative; + transition: all 0.3s ease; } -.controlform:hover{ - transform: translateY(-5px); - +.controlform:hover { + transform: translateY(-5px); } -.controlform label{ - display: inline-block; - margin-bottom: 5px; +.controlform label { + display: inline-block; + margin-bottom: 5px; } -.controlform input{ - border: 2px solid white; - border-radius: 4px; - display: block; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; - font-size: 14px; - padding: 10px; - width: 100%; - transition: border-colour 0.3s ease; +.controlform input { + border: 2px solid white; + border-radius: 4px; + display: block; + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + font-size: 14px; + padding: 10px; + width: 100%; + transition: border-color 0.3s ease; } -.controlform input:focus{ - outline: 0cm; - border-color: blue; - +.controlform input:focus { + outline: 2px solid lightblue; + border-color: blue; } - -.controlform.success input{ - border-color: greenyellow; - +.controlform input:focus-visible { + outline: 2px dashed #007bff; } - -.controlform small{ - color: red; - position: absolute; - bottom: 0%; - left: 0%; - visibility: hidden; - transition: 0.3s ease; +.controlform.fail input { + border-color: red; + visibility: visible; + opacity: 1; + transform: translateY(0); +} +.controlform.success input { + border-color: greenyellow; } -.controlform.fail{ - visibility: visible; - opacity: 1; - transform: translateY(0); +.controlform small { + font-size: 12px; + position: absolute; + line-height: 1.4; + bottom: 0%; + left: 0%; + visibility: hidden; + transition: 0.3s ease; } -.form button{ - background-color: aqua; - border: 2px solid blue; - border-radius: 4px; - color: blue; - display: block; - font-size: 16px; - padding: 10px; - margin-top: 20px; - width: 100%; - cursor: pointer; - transition: background-colour 0.3s ease; +.form button { + background-color: aqua; + border: 2px solid blue; + border-radius: 4px; + color: blue; + display: block; + font-size: 16px; + padding: 10px; + margin-top: 20px; + width: 100%; + cursor: pointer; + transition: background-color 0.3s ease; } -.form button:hover{ - background-color: blueviolet; -} \ No newline at end of file +.form button:hover { + background-color: rgb(14, 128, 222); +} diff --git a/Form Validator/Form Validate.html b/Form Validator/Form Validate.html index e20f13e..44a1a6c 100644 --- a/Form Validator/Form Validate.html +++ b/Form Validator/Form Validate.html @@ -1,44 +1,80 @@ - - - - From Validator - - - -
-
-

Create Account

+ + + + Form Validator + + + +
+
+

Form Validator

+
+
+
+ Create Account + +
+ + +
- -
- - - -
-
- - - -
+
+ + + +
+
+ + + +
-
- - - -
+
+ + + +
-
- - - -
- - -
- - - \ No newline at end of file + + + +
+ + + diff --git a/Form Validator/Form Validate.js b/Form Validator/Form Validate.js index cbd6090..bfff754 100644 --- a/Form Validator/Form Validate.js +++ b/Form Validator/Form Validate.js @@ -4,62 +4,66 @@ const email = document.getElementById("email"); const password = document.getElementById("password"); const passwordCheck = document.getElementById("passwordcheck"); -form.addEventListener("submit",function(e){ - e.preventDefault(); - checkInputs(); +form.addEventListener("submit", function (e) { + e.preventDefault(); + checkInputs(); }); -function checkInputs(){ +function checkInputs() { + const usernameValue = username.value.trim(); + const emailValue = email.value.trim(); + const passwordValue = password.value.trim(); + const passwordCheckValue = passwordCheck.value.trim(); - const usernameValue = username.value.trim(); - const emailValue = email.value.trim(); - const passwordValue = password.value.trim(); - const passwordCheckValue = passwordCheck.value.trim(); - - if(usernameValue === ""){ - setErrorFor(username,"Username cannnot be empty"); - }else{ - setSuccessFor(username); - } + if (usernameValue === "") { + setErrorFor(username, "Username cannnot be empty"); + } else { + setSuccessFor(username); + } - if(emailValue ===""){ - setErrorFor(email,"Email Cannot be Empty") - }else if (!isEmail(emailValue)){ - setErrorFor(email,"Enter a Valid Email") - }else{ - setSuccessFor(email); - } - - if(passwordValue === ""){ - setErrorFor(password,"Password cannnot be empty"); - }else{ - setSuccessFor(password); - } - - if(passwordCheckValue === ""){ - setErrorFor(passwordCheck,"Password Check cannnot be empty"); - }else if (passwordValue !== passwordCheckValue){ - setErrorFor(passwordCheck,"Password Does Not Match") - }else{ - setSuccessFor(passwordCheck); - } + if (emailValue === "") { + setErrorFor(email, "Email Cannot be Empty"); + } else if (!isEmail(emailValue)) { + setErrorFor(email, "Enter a Valid Email"); + } else { + setSuccessFor(email); + } + if (passwordValue === "") { + setErrorFor(password, "Password cannnot be empty"); + } else { + setSuccessFor(password); + } + if (passwordCheckValue === "") { + setErrorFor(passwordCheck, "Confirm Password cannnot be empty"); + } else if (passwordValue !== passwordCheckValue) { + setErrorFor(passwordCheck, "Password Do Not Match"); + } else { + setSuccessFor(passwordCheck); + } } -function setErrorFor(input,message){ - const controlForm = input.parentElement; - const small = controlForm.querySelector(".error"); - controlForm.className = "control-form fail"; - small.innerText = message; +function setErrorFor(input, message) { + const controlForm = input.parentElement; + const small = controlForm.querySelector(".error"); + controlForm.className = "controlform fail"; + small.innerText = message; + small.style.visibility = "visible"; + input.setAttribute("aria-invalid", "true"); } -function setSuccessFor(input){ - const controlForm = input.parentElement; - controlForm.className = "control-form success"; +function setSuccessFor(input) { + const controlForm = input.parentElement; + const small = controlForm.querySelector(".error"); + controlForm.className = "controlform success"; + small.innerText = ""; + small.style.visibility = "hidden"; + input.setAttribute("aria-invalid", "false"); } -function isEmail(email){ - return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); - -} \ No newline at end of file +function isEmail(email) { + return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( + email + ); +} 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 `