Skip to content

Form validation accessibility Enhancements #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Form validation accessibility Enhancements #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4662a6b
Refactor Counter Web Application for improved structure and styling
AnupmaMishra12 Nov 6, 2025
ecdb3ec
Add open-source contributions section to README
AnupmaMishra12 Nov 8, 2025
bd3ea2f
Improve accessibility and UI in Form Validation App
AnupmaMishra12 Nov 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 39 additions & 62 deletions Counter Web Application/Counter Web Application.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
47 changes: 26 additions & 21 deletions Counter Web Application/Counter Web Application.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
57 changes: 21 additions & 36 deletions Counter Web Application/Counter Web Application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading