Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b83f420

Browse files
add task04 and update the answer of task 03
1 parent f4155f0 commit b83f420

File tree

2 files changed

+135
-0
lines changed

2 files changed

+135
-0
lines changed

‎03 - CSS Variables/index-FINISHED.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
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+
:root {
25+
--base: #ffc600;
26+
--spacing: 10px;
27+
--blur: 10px;
28+
}
29+
30+
img {
31+
padding: var(--spacing);
32+
background: var(--base);
33+
filter: blur(var(--blur));
34+
}
35+
36+
.hl {
37+
color: var(--base);
38+
}
39+
40+
/*
41+
misc styles, nothing to do with CSS variables
42+
*/
43+
44+
body {
45+
text-align: center;
46+
background: #193549;
47+
color: white;
48+
font-family: 'helvetica neue', sans-serif;
49+
font-weight: 100;
50+
font-size: 50px;
51+
}
52+
53+
.controls {
54+
margin-bottom: 50px;
55+
}
56+
57+
input {
58+
width:100px;
59+
}
60+
</style>
61+
62+
<script>
63+
const inputs = document.querySelectorAll('.controls input');
64+
65+
function handleUpdate() {
66+
const suffix = this.dataset.sizing || '';
67+
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
68+
}
69+
70+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
71+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
72+
</script>
73+
74+
75+
</body>
76+
</html>
Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪</title>
6+
</head>
7+
<body>
8+
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
9+
<script>
10+
// Get your shorts on - this is an array workout!
11+
// ## Array Cardio Day 1
12+
13+
// Some data we can work with
14+
15+
const inventors = [
16+
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
17+
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
18+
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
19+
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
20+
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
21+
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
22+
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
23+
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
24+
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
25+
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
26+
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
27+
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
28+
];
29+
30+
const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
31+
32+
// Array.prototype.filter()
33+
// 1. Filter the list of inventors for those who were born in the 1500's
34+
35+
// Array.prototype.map()
36+
// 2. Give us an array of the inventors' first and last names
37+
38+
// Array.prototype.sort()
39+
// 3. Sort the inventors by birthdate, oldest to youngest
40+
41+
// Array.prototype.reduce()
42+
// 4. How many years did all the inventors live?
43+
44+
// 5. Sort the inventors by years lived
45+
46+
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
47+
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
48+
49+
50+
// 7. sort Exercise
51+
// Sort the people alphabetically by last name
52+
53+
// 8. Reduce Exercise
54+
// Sum up the instances of each of these
55+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
56+
57+
</script>
58+
</body>
59+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /