Skip to content

Commit 40be225

Browse files
pradipchaudharypradipchaudhary
authored
Merge pull request #116 from pradipchaudhary/project85
init app [project85]
2 parents bbfba3a + ab571dd commit 40be225

File tree

6 files changed

+208
-0
lines changed

6 files changed

+208
-0
lines changed

‎84-Text Resize/app.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const fontSizeInput = document.getElementById("fontSize");
3+
const textToResize = document.getElementById("textToResize");
4+
5+
fontSizeInput.addEventListener("input", function () {
6+
const newSize = fontSizeInput.value + "px";
7+
textToResize.style.fontSize = newSize;
8+
});
9+
});

‎84-Text Resize/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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>Text Resize App</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<h1>Text Resize App</h1>
12+
<label for="fontSize">Adjust Text Size:</label>
13+
<input
14+
type="range"
15+
id="fontSize"
16+
min="50"
17+
max="200"
18+
step="1"
19+
value="100"
20+
/>
21+
<p id="textToResize">This is the text that will be resized.</p>
22+
</div>
23+
24+
<script src="app.js"></script>
25+
</body>
26+
</html>

‎84-Text Resize/styles.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
#textToResize {
13+
font-size: 16px;
14+
transition: font-size 0.3s ease-in-out;
15+
}

‎85-Color Blindness Simulator/app.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
document.addEventListener("DOMContentLoaded", function () {
2+
const colorPicker = document.getElementById("colorPicker");
3+
const protanopia = document.getElementById("protanopia");
4+
const deuteranopia = document.getElementById("deuteranopia");
5+
const tritanopia = document.getElementById("tritanopia");
6+
7+
colorPicker.addEventListener("input", updateSimulatedColors);
8+
9+
function updateSimulatedColors() {
10+
const originalColor = colorPicker.value;
11+
const simulatedProtanopia = simulateColorBlindness(
12+
originalColor,
13+
"protanopia"
14+
);
15+
const simulatedDeuteranopia = simulateColorBlindness(
16+
originalColor,
17+
"deuteranopia"
18+
);
19+
const simulatedTritanopia = simulateColorBlindness(
20+
originalColor,
21+
"tritanopia"
22+
);
23+
24+
setSimulatedColor(protanopia, simulatedProtanopia);
25+
setSimulatedColor(deuteranopia, simulatedDeuteranopia);
26+
setSimulatedColor(tritanopia, simulatedTritanopia);
27+
}
28+
29+
function setSimulatedColor(element, color) {
30+
element.style.backgroundColor = color;
31+
element.textContent = `Simulated Color: ${color}`;
32+
}
33+
34+
function simulateColorBlindness(originalColor, type) {
35+
const color = parseHexColor(originalColor);
36+
37+
switch (type) {
38+
case "protanopia":
39+
return rgbToHex(simulateProtanopia(color.r, color.g, color.b));
40+
case "deuteranopia":
41+
return rgbToHex(
42+
simulateDeuteranopia(color.r, color.g, color.b)
43+
);
44+
case "tritanopia":
45+
return rgbToHex(simulateTritanopia(color.r, color.g, color.b));
46+
default:
47+
return originalColor;
48+
}
49+
}
50+
51+
function parseHexColor(hex) {
52+
const bigint = parseInt(hex.substring(1), 16);
53+
const r = (bigint >> 16) & 255;
54+
const g = (bigint >> 8) & 255;
55+
const b = bigint & 255;
56+
57+
return { r, g, b };
58+
}
59+
60+
function simulateProtanopia(r, g, b) {
61+
const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
62+
const newR = 0;
63+
const newG = 0.9922 * g + 0.0078 * b;
64+
const newB = 0.9922 * b;
65+
66+
return blendColors(luminance, newR, newG, newB);
67+
}
68+
69+
function simulateDeuteranopia(r, g, b) {
70+
const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
71+
const newR = 0.625 * r + 0.375 * b;
72+
const newG = 0.7 * g + 0.3 * b;
73+
const newB = 0;
74+
75+
return blendColors(luminance, newR, newG, newB);
76+
}
77+
78+
function simulateTritanopia(r, g, b) {
79+
const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
80+
const newR = 0.9672 * r;
81+
const newG = 0.048 * r + 0.953 * g;
82+
const newB = 0.953 * b;
83+
84+
return blendColors(luminance, newR, newG, newB);
85+
}
86+
87+
function blendColors(luminance, newR, newG, newB) {
88+
const blendFactor = 0.7; // Adjust this value for blending intensity
89+
const resultR = Math.round(
90+
blendFactor * newR + (1 - blendFactor) * luminance
91+
);
92+
const resultG = Math.round(
93+
blendFactor * newG + (1 - blendFactor) * luminance
94+
);
95+
const resultB = Math.round(
96+
blendFactor * newB + (1 - blendFactor) * luminance
97+
);
98+
99+
return `rgb(${resultR}, ${resultG}, ${resultB})`;
100+
}
101+
102+
function rgbToHex(r, g, b) {
103+
return `#${((1 << 24) | (r << 16) | (g << 8) | b)
104+
.toString(16)
105+
.slice(1)}`;
106+
}
107+
});

‎85-Color Blindness Simulator/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>Color Blindness Simulator</title>
8+
</head>
9+
<body>
10+
<div id="app">
11+
<h1>Color Blindness Simulator</h1>
12+
<label for="colorPicker">Choose a Color:</label>
13+
<input type="color" id="colorPicker" value="#ff0000" />
14+
<div id="simulatedColors">
15+
<p>Simulated Colors:</p>
16+
<div id="protanopia" class="simulatedColor">Protanopia</div>
17+
<div id="deuteranopia" class="simulatedColor">Deuteranopia</div>
18+
<div id="tritanopia" class="simulatedColor">Tritanopia</div>
19+
</div>
20+
</div>
21+
22+
<script src="app.js"></script>
23+
</body>
24+
</html>

‎85-Color Blindness Simulator/styles.css‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
label {
13+
display: block;
14+
margin-bottom: 10px;
15+
}
16+
17+
#simulatedColors {
18+
margin-top: 20px;
19+
}
20+
21+
.simulatedColor {
22+
display: inline-block;
23+
margin: 10px;
24+
padding: 20px;
25+
border: 2px solid #ccc;
26+
font-size: 16px;
27+
}

0 commit comments

Comments
 (0)