forked from wesbos/JavaScript30
/
index-START.html
95 lines (78 loc) · 3.05 KB
/
index-START.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
</head>
<body>
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#BF7069">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
<style>
/* In CSS, for "root" variables, you append the variable to two dashes: -- */
:root {
--base: #BF7069;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur)); /* You use "filter" in CSS to apply a
blur effect. Here, you apply the blur filter and then set it to be reliant
on the CSS variable blur, which will be adjusted through JS. */
}
.hl {
color: var(--base);
}
/*Below: misc. styles that have nothing to do with CSS variables. */
body {
text-align: center;
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}
</style>
<script>
/*Create a variable that grabs all of the <input>s from HTML -
these are what will need to update when changes are made in the UI */
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
/* Look into "dataset" - built in JS property? "sizing" comes from
the HTMl data- suffix inside the <input> tags. You have to also
set the suffix variable to contain "or (||) nothing ('')", so that this
can also apply to the base-color selector, which doesnt have the sizing
suffix.*/
const suffix = this.dataset.sizing || '';
//What is "documentElement" getting at here? The :root in CSS?
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
/* We'll need to listen for an event on each of the input
tags, which are all contained within "const input". Do so by attaching
the forEach() method to the inputs variable, then creating an input
function (using arrow function syntax) to add an event listener to each input
that waits for the specified browser event, and executes the handleUpdate
function on each input.*/
inputs.forEach(input => input.addEventListener('change', handleUpdate));
/* Now, add basically the same event listener, but change the event
to "mousemove" - this will update the function whenever the slider
is moved, not just when it is clicked and released. */
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
</script>
</body>
</html>