Visitar URL original
completes css variables, updates clock · wesbos/JavaScript30@d3aa8e7 · GitHub
Skip to content

Commit d3aa8e7

Browse files
author
Michael Fleming
committed
completes css variables, updates clock
1 parent 5ed7b4b commit d3aa8e7

2 files changed

Lines changed: 89 additions & 37 deletions

File tree

‎02 - JS + CSS Clock/index-START.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,42 @@
6161
background:black;
6262
position: absolute;
6363
top:50%;
64+
transform: rotate(90deg);
65+
transform-origin: 100%;
66+
transition: all .05s;
67+
transition-timing-function: cubic-bezier(0,0,0,2.7);
6468
}
6569

6670
</style>
6771

6872
<script>
6973

74+
const secondHand = document.querySelector('.second-hand');
75+
const minuteHand = document.querySelector('.min-hand');
76+
const hourHand = document.querySelector('.hour-hand');
77+
78+
const now = new Date ();
79+
let seconds = now.getSeconds();
80+
let minutes = now.getMinutes();
81+
let hours = now.getHours();
82+
83+
function setDate () {
84+
seconds % 60 === 0 ? minutes++ : null;
85+
minutes % 60 === 0 ? hours++ : null;
86+
87+
const secondDegrees = ((seconds / 60) * 360) + 90;
88+
secondHand.style.transform = `rotate(${secondDegrees}deg)`;
89+
90+
const minuteDegrees = ((minutes / 60) * 360) + 90;
91+
minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
92+
93+
const hourDegrees = ((hours / 12) * 360) + 90;
94+
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
95+
96+
seconds++
97+
}
98+
99+
setInterval(setDate, 1000)
70100

71101
</script>
72102
</body>

‎03 - CSS Variables/index-START.html‎

Lines changed: 59 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,81 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Scoped CSS Variables and JS</title>
5+
<meta charset="UTF-8">
6+
<title>Scoped CSS Variables and JS</title>
67
</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 type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13-
14-
<label for="blur">Blur:</label>
15-
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16-
17-
<label for="base">Base Color</label>
18-
<input type="color" name="base" value="#ffc600">
19-
</div>
20-
21-
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22-
23-
<style>
248

9+
<body>
10+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
11+
<div class="controls">
12+
<label for="spacing">Spacing:</label>
13+
<input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
14+
<label for="blur">Blur:</label>
15+
<input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16+
<label for="base">Base Color</label>
17+
<input type="color" name="base" value="#ffc600">
18+
</div>
19+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
20+
<style>
21+
:root {
22+
--base: #ffc600;
23+
--blur: 10px;
24+
--spacing: 10px;
25+
}
26+
27+
img {
28+
padding: var(--spacing);
29+
filter: blur(var(--blur));
30+
background: var(--base);
31+
}
32+
33+
.hl {
34+
color: var(--base);
35+
}
2536
/*
2637
misc styles, nothing to do with CSS variables
2738
*/
28-
39+
2940
body {
30-
text-align: center;
41+
text-align: center;
3142
}
32-
43+
3344
body {
34-
background: #193549;
35-
color: white;
36-
font-family: 'helvetica neue', sans-serif;
37-
font-weight: 100;
38-
font-size: 50px;
45+
background: #193549;
46+
color: white;
47+
font-family: 'helvetica neue', sans-serif;
48+
font-weight: 100;
49+
font-size: 50px;
3950
}
40-
51+
4152
.controls {
42-
margin-bottom: 50px;
53+
margin-bottom: 50px;
4354
}
44-
55+
4556
a {
46-
color: var(--base);
47-
text-decoration: none;
57+
color: var(--base);
58+
text-decoration: none;
4859
}
49-
60+
5061
input {
51-
width:100px;
62+
width: 100px;
5263
}
53-
</style>
64+
</style>
65+
<script>
5466

55-
<script>
56-
</script>
67+
const inputs = document.querySelectorAll('.controls input');
68+
inputs.forEach(input => {
69+
input.addEventListener('change', handleUpdate);
70+
input.addEventListener('mousemove', handleUpdate);
71+
});
5772

73+
function handleUpdate(e) {
74+
const suffix = this.dataset.sizing || '';
75+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
76+
}
77+
78+
</script>
5879
</body>
80+
5981
</html>

0 commit comments

Comments
 (0)