Skip to content

Commit c7db526

Browse files
committed
3 done
1 parent 6d4b1c0 commit c7db526

File tree

1 file changed

+27
-0
lines changed

1 file changed

+27
-0
lines changed

03 - CSS Variables/index-START.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,22 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
2222

2323
<style>
2424

25+
:root {
26+
--base: #ffc600;
27+
--spacing: 10px;
28+
--blur: 10px;
29+
}
30+
31+
img {
32+
padding: var(--spacing);
33+
background: var(--base);
34+
filter: blur(var(--blur));
35+
}
36+
37+
.hl {
38+
color: var(--base);
39+
}
40+
2541
/*
2642
misc styles, nothing to do with CSS variables
2743
*/
@@ -53,6 +69,17 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
5369
</style>
5470

5571
<script>
72+
const inputs = document.querySelectorAll('.controls input');
73+
74+
function handleUpdate() {
75+
const suffix = this.dataset.sizing || '';
76+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
77+
}
78+
79+
inputs.forEach((input) => {
80+
input.addEventListener('change', handleUpdate);
81+
input.addEventListener('mousemove', handleUpdate);
82+
});
5683
</script>
5784

5885
</body>

0 commit comments

Comments
 (0)