Skip to content

Commit e15036c

Browse files
arr213arr213
committed
array cardio complete
1 parent d2eb6a1 commit e15036c

3 files changed

Lines changed: 137 additions & 0 deletions

File tree

‎03 - CSS Variables/index.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>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 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>
24+
25+
/*
26+
misc styles, nothing to do with CSS variables
27+
*/
28+
29+
body {
30+
text-align: center;
31+
}
32+
33+
body {
34+
background: #193549;
35+
color: white;
36+
font-family: 'helvetica neue', sans-serif;
37+
font-weight: 100;
38+
font-size: 50px;
39+
}
40+
41+
.controls {
42+
margin-bottom: 50px;
43+
}
44+
45+
a {
46+
color: var(--base);
47+
text-decoration: none;
48+
}
49+
50+
input {
51+
width:100px;
52+
}
53+
</style>
54+
55+
<script>
56+
</script>
57+
58+
</body>
59+
</html>

‎04 - Array Cardio Day 1/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Array Cardio 💪</title>
6+
</head>
7+
<body>
8+
<script src="index.js"></script>
9+
</body>
10+
</html>

‎04 - Array Cardio Day 1/index.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
// Get your shorts on - this is an array workout!
2+
// ## Array Cardio Day 1
3+
4+
// Some data we can work with
5+
6+
const inventors = [
7+
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
8+
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
9+
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
10+
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
11+
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
12+
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
13+
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 }
14+
];
15+
16+
const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
17+
18+
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'];
19+
20+
// // Array.prototype.filter()
21+
// // 1. Filter the list of inventors for those who were born in the 1500's
22+
// const filtered = inventors.filter(inv => String(inv.year).slice(0, 2) === '15');
23+
// console.table(filtered);
24+
25+
// // Array.prototype.map()
26+
// // 2. Give us an array of the inventory first and last names
27+
// const mapped = inventors.map(inv => inv.first + ' ' + inv.last);
28+
// console.table(mapped);
29+
30+
// // Array.prototype.sort()
31+
// // 3. Sort the inventors by birthdate, oldest to youngest
32+
// const sorted = inventors.sort((a, b) => a.year > b.year);
33+
// console.table(sorted);
34+
35+
// // Array.prototype.reduce()
36+
// // 4. How many years did all the inventors live?
37+
// const reduced = inventors.reduce((a, b) => a + b.passed - b.year, 0);
38+
// console.table(reduced);
39+
40+
// // 5. Sort the inventors by years lived
41+
// const sortedB = inventors.sort((a, b) => a.passed - a.year > b.passed - b.year);
42+
// console.table(sortedB);
43+
44+
// // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
45+
// // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
46+
// let category = document.querySelector('.mw-category');
47+
// let links = Array.from(category.querySelectorAll('a'));
48+
// let streets = links.map(el => el.innerText);
49+
// let rg = new RegExp(/de/gi);
50+
// let deStreets = streets.filter(str => rg.test(str));
51+
// console.table(deStreets);
52+
53+
54+
// 7. sort Exercise
55+
// Sort the people alphabetically by last name
56+
let sortedC = people.sort();
57+
console.log(sortedC);
58+
59+
// 8. Reduce Exercise
60+
// Sum up the instances of each of these
61+
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
62+
63+
let reducedB = data.reduce(function(obj, item) {
64+
if (!obj[item]) obj[item] = 0;
65+
obj[item]++;
66+
return obj;
67+
}, {});
68+
console.log(reducedB);

0 commit comments

Comments
 (0)