Skip to content

Commit 7da55da

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 70
1 parent cc86bcd commit 7da55da

File tree

4 files changed

+157
-3
lines changed

4 files changed

+157
-3
lines changed

‎public/67/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Day 65/100</title>
6+
<title>Day 67/100</title>
77
</head>
88
<body>
99
<main>

‎public/68/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Day 65/100</title>
6+
<title>Day 68/100</title>
77
</head>
88
<body>
99
<main>

‎public/69/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Day 65/100</title>
6+
<title>Day 69/100</title>
77
</head>
88
<body>
99
<main>

‎public/70/index.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
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+
<title>Day 70/100</title>
7+
</head>
8+
<body>
9+
<main>
10+
<div class="morse-code">
11+
<div class="dot-dash dot-dash-1" id="dot-dash-1"></div>
12+
<div class="dot-dash dot-dash-2" id="dot-dash-2"></div>
13+
<div class="dot-dash dot-dash-3" id="dot-dash-3"></div>
14+
<div class="dot-dash dot-dash-4" id="dot-dash-4"></div>
15+
</div>
16+
</main>
17+
18+
<style>
19+
@font-face {
20+
font-family: "SpaceMono";
21+
src: url("/assets/SpaceMono-Bold.woff2") format("woff2");
22+
font-weight: 700;
23+
}
24+
25+
body {
26+
margin: 0;
27+
overflow: hidden;
28+
display: flex;
29+
flex-direction: column;
30+
justify-content: center;
31+
align-items: center;
32+
-webkit-tap-highlight-color: transparent;
33+
width: 100vw;
34+
height: 100vh;
35+
background-color: #000;
36+
}
37+
38+
.morse-code {
39+
display: flex;
40+
flex-direction: row;
41+
42+
gap: 10px;
43+
width: calc(100vw - 20px);
44+
padding-left: 10px;
45+
padding-right: 10px;
46+
max-width: 440px;
47+
}
48+
49+
.dot-dash {
50+
width: 100%;
51+
aspect-ratio: 1 / 1;
52+
background-color: #fff;
53+
scale: 0.6;
54+
opacity: 0;
55+
border-radius: 0px;
56+
transition: all 0.5s ease-in-out;
57+
}
58+
59+
.dot {
60+
scale: 1;
61+
opacity: 1;
62+
border-radius: 1000px;
63+
}
64+
65+
.dash {
66+
scale: 1;
67+
opacity: 1;
68+
border-radius: 0px;
69+
}
70+
</style>
71+
72+
<script>
73+
const morseCode = {
74+
A: ".-",
75+
B: "-...",
76+
C: "-.-.",
77+
D: "-..",
78+
E: ".",
79+
F: "..-.",
80+
G: "--.",
81+
H: "....",
82+
I: "..",
83+
J: ".---",
84+
K: "-.-",
85+
L: ".-..",
86+
M: "--",
87+
N: "-.",
88+
O: "---",
89+
P: ".--.",
90+
Q: "--.-",
91+
R: ".-.",
92+
S: "...",
93+
T: "-",
94+
U: "..-",
95+
V: "...-",
96+
W: ".--",
97+
X: "-..-",
98+
Y: "-.--",
99+
Z: "--..",
100+
};
101+
102+
const dotDash1 = document.getElementById("dot-dash-1");
103+
const dotDash2 = document.getElementById("dot-dash-2");
104+
const dotDash3 = document.getElementById("dot-dash-3");
105+
const dotDash4 = document.getElementById("dot-dash-4");
106+
107+
let lastPressed = null;
108+
109+
document.addEventListener("keydown", (e) => {
110+
if (lastPressed && e.timeStamp - lastPressed < 600) {
111+
return;
112+
}
113+
lastPressed = e.timeStamp;
114+
let key = e.key.toUpperCase();
115+
console.log(key);
116+
if (!Object.keys(morseCode).includes(key)) {
117+
return;
118+
}
119+
let morse = morseCode[key];
120+
if (morse.length == 1) {
121+
dotDash1.classList = "dot-dash dot-dash-1";
122+
dotDash2.classList =
123+
"dot-dash dot-dash-2 " + (morse == "." ? "dot" : "dash");
124+
dotDash3.classList = "dot-dash dot-dash-3";
125+
dotDash4.classList = "dot-dash dot-dash-4";
126+
} else if (morse.length == 2) {
127+
dotDash1.classList = "dot-dash dot-dash-1";
128+
dotDash2.classList =
129+
"dot-dash dot-dash-2 " + (morse[0] == "." ? "dot" : "dash");
130+
dotDash3.classList =
131+
"dot-dash dot-dash-3 " + (morse[1] == "." ? "dot" : "dash");
132+
dotDash4.classList = "dot-dash dot-dash-4";
133+
} else if (morse.length == 3) {
134+
dotDash1.classList =
135+
"dot-dash dot-dash-1 " + (morse[0] == "." ? "dot" : "dash");
136+
dotDash2.classList =
137+
"dot-dash dot-dash-2 " + (morse[1] == "." ? "dot" : "dash");
138+
dotDash3.classList =
139+
"dot-dash dot-dash-3 " + (morse[2] == "." ? "dot" : "dash");
140+
dotDash4.classList = "dot-dash dot-dash-4";
141+
} else if (morse.length == 4) {
142+
dotDash1.classList =
143+
"dot-dash dot-dash-1 " + (morse[0] == "." ? "dot" : "dash");
144+
dotDash2.classList =
145+
"dot-dash dot-dash-2 " + (morse[1] == "." ? "dot" : "dash");
146+
dotDash3.classList =
147+
"dot-dash dot-dash-3 " + (morse[2] == "." ? "dot" : "dash");
148+
dotDash4.classList =
149+
"dot-dash dot-dash-4 " + (morse[3] == "." ? "dot" : "dash");
150+
}
151+
});
152+
</script>
153+
</body>
154+
</html>

0 commit comments

Comments
 (0)