Skip to content

Commit f3a5a68

Browse files
pradipchaudharypradipchaudhary
committed
2 parents c5a7e79 + bf0e130 commit f3a5a68

File tree

29 files changed

+708
-0
lines changed

29 files changed

+708
-0
lines changed

‎87-Focus Management/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<title>Focus Management App</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Focus Management App</h1>
12+
<div class="input-section">
13+
<input
14+
type="text"
15+
id="taskInput"
16+
placeholder="Add a new task..."
17+
/>
18+
<button id="addTaskBtn">Add Task</button>
19+
</div>
20+
<ul id="taskList" class="task-list"></ul>
21+
</div>
22+
<script src="script.js"></script>
23+
</body>
24+
</html>

‎87-Focus Management/script.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const taskInput = document.getElementById("taskInput");
3+
const addTaskBtn = document.getElementById("addTaskBtn");
4+
const taskList = document.getElementById("taskList");
5+
6+
addTaskBtn.addEventListener("click", addTask);
7+
8+
function addTask() {
9+
const taskText = taskInput.value.trim();
10+
if (taskText !== "") {
11+
const taskItem = document.createElement("li");
12+
taskItem.classList.add("task-item");
13+
taskItem.innerHTML = `
14+
<span>${taskText}</span>
15+
<button class="complete-btn">Complete</button>
16+
`;
17+
taskList.appendChild(taskItem);
18+
taskInput.value = "";
19+
taskInput.focus();
20+
21+
const completeBtn = taskItem.querySelector(".complete-btn");
22+
completeBtn.addEventListener("click", completeTask);
23+
}
24+
}
25+
26+
function completeTask(event) {
27+
const taskItem = event.target.closest(".task-item");
28+
taskItem.classList.toggle("completed");
29+
}
30+
});

‎87-Focus Management/styles.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
body {
2+
font-family: "Arial", sans-serif;
3+
background-color: #f4f4f4;
4+
margin: 0;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100vh;
9+
}
10+
11+
.container {
12+
text-align: center;
13+
background-color: #fff;
14+
padding: 20px;
15+
border-radius: 8px;
16+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17+
}
18+
19+
.input-section {
20+
margin-bottom: 20px;
21+
}
22+
23+
input {
24+
padding: 10px;
25+
font-size: 16px;
26+
}
27+
28+
button {
29+
padding: 10px 20px;
30+
font-size: 16px;
31+
cursor: pointer;
32+
}
33+
34+
button:hover {
35+
background-color: #ddd;
36+
}
37+
38+
.task-list {
39+
list-style: none;
40+
padding: 0;
41+
}
42+
43+
.task-item {
44+
display: flex;
45+
justify-content: space-between;
46+
align-items: center;
47+
padding: 10px;
48+
border-bottom: 1px solid #ddd;
49+
}
50+
51+
.task-item.completed {
52+
text-decoration: line-through;
53+
opacity: 0.7;
54+
}

‎88-High-Contrast Mode/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<link rel="stylesheet" href="styles-high-contrast.css" />
8+
<title>High-Contrast Mode Tool</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>High-Contrast Mode Tool</h1>
13+
<button id="toggleBtn">Toggle High Contrast</button>
14+
<p>This is a sample text for testing high-contrast mode.</p>
15+
</div>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎88-High-Contrast Mode/script.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const toggleBtn = document.getElementById("toggleBtn");
3+
const body = document.body;
4+
5+
toggleBtn.addEventListener("click", toggleHighContrast);
6+
7+
function toggleHighContrast() {
8+
body.classList.toggle("high-contrast");
9+
}
10+
});

‎88-High-Contrast Mode/styles-high-contrast.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
body.high-contrast {
2+
background-color: #000;
3+
color: #fff;
4+
}
5+
6+
body.high-contrast button {
7+
background-color: #fff;
8+
color: #000;
9+
}
10+
11+
body.high-contrast p {
12+
border: 2px solid #fff;
13+
padding: 10px;
14+
}

‎88-High-Contrast Mode/styles.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
body {
2+
font-family: "Arial", sans-serif;
3+
transition: background-color 0.3s, color 0.3s;
4+
}
5+
6+
.container {
7+
text-align: center;
8+
padding: 20px;
9+
border-radius: 8px;
10+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
11+
}
12+
13+
button {
14+
padding: 10px 20px;
15+
font-size: 16px;
16+
cursor: pointer;
17+
}
18+
19+
button:hover {
20+
background-color: #ddd;
21+
}

‎89-Aria Role Implementation/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="styles.css" />
7+
<title>ARIA Role Implementation App</title>
8+
</head>
9+
<body>
10+
<div id="main" role="main" aria-labelledby="main-heading">
11+
<h1 id="main-heading">ARIA Role Implementation App</h1>
12+
<p>This is a simple example demonstrating ARIA roles.</p>
13+
<button
14+
id="alertBtn"
15+
role="button"
16+
aria-label="Click me to show an alert"
17+
>
18+
Show Alert
19+
</button>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎89-Aria Role Implementation/script.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const alertBtn = document.getElementById("alertBtn");
3+
4+
alertBtn.addEventListener("click", function () {
5+
alert("Hello, this is an alert!");
6+
});
7+
});

‎89-Aria Role Implementation/styles.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
body {
2+
font-family: "Arial", sans-serif;
3+
text-align: center;
4+
padding: 20px;
5+
}
6+
7+
#main {
8+
background-color: #f4f4f4;
9+
padding: 20px;
10+
border-radius: 8px;
11+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
12+
}
13+
14+
button {
15+
padding: 10px 20px;
16+
font-size: 16px;
17+
cursor: pointer;
18+
}
19+
20+
button:hover {
21+
background-color: #ddd;
22+
}

0 commit comments

Comments
 (0)