Skip to content

Commit 1cec2b4

Browse files
pradipchaudharypradipchaudhary
committed
init app [project83]
1 parent c5eb57c commit 1cec2b4

File tree

7 files changed

+228
-0
lines changed

7 files changed

+228
-0
lines changed

‎82-Keyboard Navigation Improvement/app.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
new Vue({
3+
el: "#keyboardApp",
4+
methods: {
5+
focusNext() {
6+
const focusableElements = document.querySelectorAll(
7+
"#keyboardApp [tabindex]"
8+
);
9+
const currentIndex = Array.from(focusableElements).indexOf(
10+
document.activeElement
11+
);
12+
const nextIndex = (currentIndex + 1) % focusableElements.length;
13+
focusableElements[nextIndex].focus();
14+
},
15+
focusPrev() {
16+
const focusableElements = document.querySelectorAll(
17+
"#keyboardApp [tabindex]"
18+
);
19+
const currentIndex = Array.from(focusableElements).indexOf(
20+
document.activeElement
21+
);
22+
const prevIndex =
23+
(currentIndex - 1 + focusableElements.length) %
24+
focusableElements.length;
25+
focusableElements[prevIndex].focus();
26+
},
27+
handleKeyPress(event) {
28+
if (event.key === "Enter") {
29+
alert(
30+
"Enter key pressed! You can perform additional actions here."
31+
);
32+
}
33+
},
34+
},
35+
});
36+
});

‎82-Keyboard Navigation Improvement/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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>Keyboard Navigation Improvement</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<h1>Keyboard Navigation Improvement</h1>
12+
<p id="info">
13+
This web app demonstrates improved keyboard navigation.
14+
</p>
15+
<div id="keyboardApp">
16+
<button @click="focusNext" class="navButton">Next</button>
17+
<button @click="focusPrev" class="navButton">Previous</button>
18+
<div id="content" tabindex="0" @keydown="handleKeyPress">
19+
<p>
20+
This is the focusable content that can be navigated
21+
using the keyboard.
22+
</p>
23+
</div>
24+
</div>
25+
</div>
26+
27+
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
28+
<script src="app.js"></script>
29+
</body>
30+
</html>

‎82-Keyboard Navigation Improvement/styles.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
}
4+
5+
#app {
6+
max-width: 600px;
7+
margin: 0 auto;
8+
padding: 20px;
9+
text-align: center;
10+
}
11+
12+
.navButton {
13+
padding: 10px;
14+
font-size: 16px;
15+
cursor: pointer;
16+
}
17+
18+
#content {
19+
margin-top: 20px;
20+
border: 2px solid #ccc;
21+
padding: 10px;
22+
outline: none;
23+
}

‎83-Contrast Checker/app.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { useState } from "react";
2+
import ReactDOM from "react-dom";
3+
4+
function ContrastChecker() {
5+
const [foreground, setForeground] = useState("#000000");
6+
const [background, setBackground] = useState("#ffffff");
7+
8+
const checkContrast = () => {
9+
const contrastRatio = getContrastRatio(foreground, background);
10+
return contrastRatio >= 4.5 ? "pass" : "fail";
11+
};
12+
13+
const handleForegroundChange = (event) => {
14+
setForeground(event.target.value);
15+
};
16+
17+
const handleBackgroundChange = (event) => {
18+
setBackground(event.target.value);
19+
};
20+
21+
return (
22+
<div id="app">
23+
<h1>Contrast Checker</h1>
24+
<label htmlFor="foreground" className="colorInput">
25+
Foreground Color:
26+
<input
27+
type="color"
28+
id="foreground"
29+
value={foreground}
30+
onChange={handleForegroundChange}
31+
/>
32+
</label>
33+
34+
<label htmlFor="background" className="colorInput">
35+
Background Color:
36+
<input
37+
type="color"
38+
id="background"
39+
value={background}
40+
onChange={handleBackgroundChange}
41+
/>
42+
</label>
43+
44+
<div id="result" className={checkContrast()}>
45+
{checkContrast() === "pass" ? "Pass" : "Fail"}
46+
</div>
47+
</div>
48+
);
49+
}
50+
51+
function getContrastRatio(foreground, background) {
52+
const lum1 = getRelativeLuminance(parseHexColor(foreground));
53+
const lum2 = getRelativeLuminance(parseHexColor(background));
54+
55+
return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
56+
}
57+
58+
function parseHexColor(hex) {
59+
const bigint = parseInt(hex.substring(1), 16);
60+
const r = (bigint >> 16) & 255;
61+
const g = (bigint >> 8) & 255;
62+
const b = bigint & 255;
63+
64+
return { r, g, b };
65+
}
66+
67+
function getRelativeLuminance(color) {
68+
const { r, g, b } = color;
69+
70+
const rsrgb = r / 255;
71+
const gsrgb = g / 255;
72+
const bsrgb = b / 255;
73+
74+
const rlinear =
75+
rsrgb <= 0.03928 ? rsrgb / 12.92 : ((rsrgb + 0.055) / 1.055) ** 2.4;
76+
const glinear =
77+
gsrgb <= 0.03928 ? gsrgb / 12.92 : ((gsrgb + 0.055) / 1.055) ** 2.4;
78+
const blinear =
79+
bsrgb <= 0.03928 ? bsrgb / 12.92 : ((bsrgb + 0.055) / 1.055) ** 2.4;
80+
81+
return 0.2126 * rlinear + 0.7152 * glinear + 0.0722 * blinear;
82+
}
83+
84+
ReactDOM.render(<ContrastChecker />, document.getElementById("app"));

‎83-Contrast Checker/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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>Contrast Checker</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
12+
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
13+
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
14+
<script src="app.js" type="module"></script>
15+
</body>
16+
</html>

‎83-Contrast Checker/readme.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Notes:
2+
3+
Creating an advanced Contrast Checker web app involves assessing the contrast between text and background colors to ensure readability, especially for users with visual impairments. For this example, I'll use the React.js framework. Make sure to include React.js in your project, either by downloading it and adding it to your project or using a CDN.
4+
5+
**In this example:**
6+
7+
- Users can input foreground and background colors using color pickers.
8+
- The contrast ratio is calculated and compared against the WCAG 2.0 AA standard (4.5:1).
9+
- The result is displayed, indicating whether the contrast passes or fails.
10+
11+
Feel free to customize the app further based on your specific requirements. This example provides a basic foundation for a Contrast Checker web app using React.js.

‎83-Contrast Checker/styles.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
}
4+
5+
#app {
6+
max-width: 600px;
7+
margin: 0 auto;
8+
padding: 20px;
9+
text-align: center;
10+
}
11+
12+
.colorInput {
13+
margin-bottom: 10px;
14+
padding: 5px;
15+
font-size: 16px;
16+
}
17+
18+
#result {
19+
margin-top: 20px;
20+
}
21+
22+
.pass {
23+
color: #4caf50;
24+
}
25+
26+
.fail {
27+
color: #ff5733;
28+
}

0 commit comments

Comments
 (0)