Visitar URL original
#2 and #3 solutions · EgorOvechkin/JavaScript30@daf891f · GitHub
Skip to content

Commit daf891f

Browse files
EgorOvechkinEgorOvechkin
committed
wesbos#2 and wesbos#3 solutions
1 parent 0259fe4 commit daf891f

2 files changed

Lines changed: 211 additions & 0 deletions

File tree

‎02 - JS and CSS Clock/index.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS + CSS Clock</title>
6+
</head>
7+
<body>
8+
9+
10+
<div class="clock">
11+
<div class="clock-face">
12+
<div class="decorated-circle"></div>
13+
<div class="hand hour-hand"></div>
14+
<div class="hand min-hand"></div>
15+
<div class="hand second-hand"></div>
16+
</div>
17+
</div>
18+
19+
20+
<style>
21+
html {
22+
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
23+
background-size:cover;
24+
font-family:'helvetica neue';
25+
text-align: center;
26+
font-size: 10px;
27+
}
28+
29+
body {
30+
margin: 0;
31+
font-size: 2rem;
32+
display:flex;
33+
flex:1;
34+
min-height: 100vh;
35+
align-items: center;
36+
}
37+
38+
.clock {
39+
width: 30rem;
40+
height: 30rem;
41+
border:20px solid white;
42+
border-radius:50%;
43+
margin:50px auto;
44+
position: relative;
45+
padding:2rem;
46+
box-shadow:
47+
0 0 0 4px rgba(0,0,0,0.1),
48+
inset 0 0 0 3px #EFEFEF,
49+
inset 0 0 10px black,
50+
0 0 10px rgba(0,0,0,0.2);
51+
}
52+
53+
.clock-face {
54+
position: relative;
55+
width: 100%;
56+
height: 100%;
57+
transform: translateY(-3px); /* account for the height of the clock hands */
58+
}
59+
60+
.hand {
61+
width:50%;
62+
height:6px;
63+
background: black;
64+
position: absolute;
65+
top:50%;
66+
transform: rotate(90deg);
67+
transform-origin: 100%;
68+
}
69+
70+
.hand.hour-hand {
71+
z-index: 5;
72+
background: #6e5050;
73+
transform-origin: 0%;
74+
width: 25%;
75+
left: 50%;
76+
}
77+
78+
.hand.second-hand {
79+
background: red;
80+
height: 3px;
81+
opacity: .8;
82+
}
83+
84+
.decorated-circle {
85+
z-index: 10;
86+
position: absolute;
87+
width: 10px;
88+
height: 10px;
89+
top: calc(50% - 2px);
90+
left: calc(50% - 5px);
91+
background: black;
92+
border-radius: 50%;
93+
}
94+
</style>
95+
96+
<script>
97+
(function main() {
98+
const
99+
SECONDS = 'seconds',
100+
MINUTES = 'minutes',
101+
HOURS = 'hours';
102+
103+
function getAngle(unit, date) {
104+
switch (unit) {
105+
case SECONDS:
106+
return (360 / 60) * date.getSeconds();
107+
case MINUTES:
108+
return (360 / 60) * date.getMinutes();
109+
case HOURS:
110+
return (360 / 12) * date.getHours();
111+
default:
112+
return NaN;
113+
}
114+
}
115+
116+
function setTime() {
117+
const date = new Date();
118+
119+
document.querySelector('.hour-hand').style.transform = `rotate(${getAngle(HOURS, date) + 270}deg)`;
120+
document.querySelector('.min-hand').style.transform = `rotate(${getAngle(MINUTES, date) + 90}deg)`;
121+
document.querySelector('.second-hand').style.transform = `rotate(${getAngle(SECONDS, date) + 90}deg)`;
122+
}
123+
124+
setInterval(setTime, 1000);
125+
126+
})();
127+
</script>
128+
</body>
129+
</html>

‎03 - CSS Variables/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</head>
7+
<body>
8+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
9+
10+
<div class="controls">
11+
<label for="spacing">Spacing:</label>
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13+
14+
<label for="blur">Blur:</label>
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16+
17+
<label for="base">Base Color</label>
18+
<input id="base" type="color" name="base" value="#ffc600">
19+
</div>
20+
21+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22+
23+
<style>
24+
25+
/*
26+
misc styles, nothing to do with CSS variables
27+
*/
28+
:root {
29+
--base: #ffc600;
30+
--spacing: 10px;
31+
--blur: 10px;
32+
}
33+
34+
body {
35+
text-align: center;
36+
background: #193549;
37+
color: white;
38+
font-family: 'helvetica neue', sans-serif;
39+
font-weight: 100;
40+
font-size: 50px;
41+
}
42+
43+
img {
44+
padding: var(--spacing);
45+
background-color: var(--base);
46+
filter: blur(var(--blur));
47+
}
48+
49+
.controls {
50+
margin-bottom: 50px;
51+
}
52+
53+
input {
54+
width:100px;
55+
}
56+
</style>
57+
58+
<script>
59+
(function main() {
60+
61+
function addListener() {
62+
this.addEventListener('mousemove', onChange.bind(this));
63+
}
64+
65+
function removeListener(input) {
66+
this.removeEventListener('mousemove', onChange);
67+
}
68+
69+
function onChange() {
70+
document.documentElement.style.setProperty(`--${this.name}`, this.value + (this.dataset.sizing || ''))
71+
}
72+
73+
document.querySelectorAll('.controls input').forEach(input => {
74+
input.addEventListener('change', onChange);
75+
input.addEventListener('mousedown', addListener);
76+
input.addEventListener('mouseup', removeListener);
77+
})
78+
})();
79+
</script>
80+
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)