Skip to content

Commit ca5a869

Browse files
nitishdayalnitishdayal
authored
Merging current progress from rewrite (nitishdayal#3)
* Branch Merging current changes in rewrite into master * I hope this works * arrmethods ARRR MATEY * Exercises 5-7 source refactored 3 more down. I think. * Aaaannd I think nitishdayal#8 is good to go? * exercises 8 + 10 * And anotha one you loyal * Well. I'm done for tonight. Sleep time.
1 parent 3220bb6 commit ca5a869

File tree

18 files changed

+290
-219
lines changed

18 files changed

+290
-219
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"angulardoc.repoId": "a547aa17-a9ab-4f77-ba4c-f3167ae617d2",
3+
"angulardoc.lastSync": 0
4+
}

‎exercises/03 - CSS Variables/README.md‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
# Exercise 3: CSS Variables
2+
23
Nitish Dayal, Software & Applications Developer - [Contact](http://nitishdayal.me)
34
Last Commit Date: May 12, 2017
45

56
The web page provided in this exercise displays an image, and has 3 form inputs
67
from which the user can manipulate the padding, blur amount, and background
7-
color of the image. Update the CSS and write the JavaScript code necessary to
8+
color of the image. Update the CSS and write the JavaScript code necessary to
89
bring functionality to the inputs.
910

1011
## Guide
@@ -24,6 +25,7 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
2425
**Steps:**
2526

2627
- CSS:
28+
2729
1. Declare a new style for the `:root` element and declare three variables inside
2830
the style definition for `:root` with the same names as the `input` _HTML elements_.
2931
_CSS3 variables_ are declared in the following syntax format:
@@ -36,7 +38,8 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
3638
--padding: 10px;
3739
}
3840
```
39-
2. Declare a new style for the `img` element and set the `background`, `filter`, and
41+
42+
1. Declare a new style for the `img` element and set the `background`, `filter`, and
4043
`padding` properties to the variables we defined at the root element:
4144
```CSS
4245
/* 'var(--variableName)' to use previously defined CSS properties */
@@ -47,21 +50,26 @@ The purpose of this exercise is to gain experience using _CSS3 variables_. These
4750
padding: var(--padding);
4851
}
4952
```
50-
3. Declare a new style for the `.hl` class and set the color to the `base` variable.
53+
54+
1. Declare a new style for the `.hl` class and set the color to the `base` variable.
5155

5256
- JavaScript:
57+
5358
1. Declare & define a variable as a reference to all of the inputs on the page.
54-
2. Iterate through the _HTML Node Elements_ that the variable is referencing and
55-
attach _event listeners_ to all of them that will call on an _event handler_ whenever
56-
the input value has been changed.
57-
3. Repeat step 2, listening for mouse movements on the inputs instead of value
58-
changes.
59-
4. Define a function that will be used as the _event handler_. This will update
60-
the value of the _CSS3 variable_ **at the document level** corresponding with the
61-
`input` element's `name` property which triggered the event handler.
62-
- Minor 'gotcha': Properties like `padding` and `blur` won't update because
59+
60+
1. Iterate through the _HTML Node Elements_ that the variable is referencing and
61+
attach _event listeners_ to each one that will call on an _event handler_ whenever
62+
the input value has been changed (the `change` event).
63+
64+
1. Repeat step 2, listening for mouse movements on the inputs instead of value
65+
changes (the `mousemove` event).
66+
67+
1. Define a function that will be used as the _event handler_. It will update
68+
the value of the _CSS3 variable_ **at the root document level** corresponding with
69+
the `name` property of the `input` element which called this function.
70+
- Minor 'gotcha': Properties like `padding` and `blur` won't update because
6371
the value from the input does not include the type of measurement we are using
64-
('px', 'em', etc.). The `input` _HTML elements_ also have a `data-*` property if
72+
('px', 'em', etc.). The `input` _HTML elements_ also have a `data-sizing` property if
6573
they require a suffix. We can use this to attach the correct suffix to the
6674
value if necessary.
6775

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

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,26 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
54
<meta charset="UTF-8">
65
<title>Scoped CSS Variables and JS</title>
7-
86
<style>
9-
/*
10-
Define variables at the root level so their scope is the entire document
11-
*/
7+
/* Define variables at the root level so their scope is the entire document */
128
:root {
139
--base: goldenrod;
1410
--blur: 10px;
1511
--padding: 10px;
1612
}
1713

18-
/*
19-
Set image property values as the variables defined at the root element
20-
*/
14+
/* Set image property values using previously defined variables */
2115
img {
16+
box-sizing: border-box;
2217
background: var(--base);
2318
filter: blur(var(--blur));
2419
padding: var(--padding);
20+
border-radius: 2rem;
2521
}
2622

23+
/* 'JS' text color that will match the image background color */
2724
.hl {
2825
color: var(--base);
2926
}
@@ -49,7 +46,6 @@
4946
}
5047
</style>
5148
</head>
52-
5349
<body>
5450
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
5551

@@ -64,26 +60,43 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
6460
<input type="color" name="base" value="#ffc600">
6561
</div>
6662

67-
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
63+
<img src="https://source.unsplash.com/800x500">
6864

6965
<script>
70-
// Declare & define variable reference to all inputs inside the 'control' class
71-
const inputs = document.querySelectorAll('.controls input');
72-
73-
// Event Handler function
74-
function handleUpdate() {
75-
// Get the data-sizing property value if one exists, or set as empty string
76-
const suffix = this.dataset.sizing || '';
77-
// Target the entire document and update the value of the CSS variable which corresponds
78-
// with the 'name' property of the HTML element that triggered this function.
79-
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
80-
}
81-
82-
// Attach event listeners to each input
83-
inputs.forEach(input => input.addEventListener('change', handleUpdate));
84-
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
66+
(()=>{
67+
'use strict';
68+
// Declare & define variable reference to all inputs inside the 'control' class
69+
const inputs = document.querySelectorAll('.controls input');
70+
71+
// Event Handler function. Such object destructure much default parameters wow
72+
const handleUpdate = ({ target: { name, value, dataset: { sizing: suffix = '' } } }) => {
73+
document.documentElement.style.setProperty(`--${name}`, value + suffix)
74+
}
75+
76+
// Helper function to add/remove event listeners because the standard syntax is long and ugly
77+
const listen = (event, element, handler, cb = false, add = true) => (
78+
add ?
79+
cb ?
80+
() => element.addEventListener(event, handler) :
81+
element.addEventListener(event, handler) :
82+
cb ?
83+
() => element.removeEventListener(event, handler) :
84+
element.removeEventListener(event, handler)
85+
);
86+
87+
// Attach event listeners to each input
88+
inputs.forEach(inp => {
89+
// When input value is changed, call handleUpdate function
90+
listen('change', inp, handleUpdate)
91+
// When a mousedown event occurs on the input, attach *another* event listener to the input.
92+
// This new event listener will listen for 'mousemove' event, and call on the
93+
// handleUpdate function.
94+
listen('mousedown', inp, listen('mousemove', inp, handleUpdate, true))
95+
// When a mouseup event occurs on the input, remove the event listener for the 'mousemove'
96+
// event (if one exists) that uses the `handleUpdate` function for the event handler.
97+
listen('mouseup', inp, listen('mousemove', inp, handleUpdate, true, false))
98+
});
99+
})();
85100
</script>
86-
87101
</body>
88-
89-
</html>
102+
</html>

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

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
<body>
1010
<script>
11+
'use strict';
1112
// Get your shorts on - this is an array workout!
1213
// ## Array Cardio Day 1
1314

@@ -29,65 +30,74 @@
2930

3031
// Array.prototype.filter()
3132
// 1. Filter the list of inventors for those who were born in the 1500's
32-
const inventors_from_1500s = inventors.filter(
33-
(inventor) => inventor.year >= 1500 && inventor.year < 1600
34-
)
33+
const inventors_from_1500s = inventors.filter(({year}) => year >= 1500 && year < 1600);
3534

36-
console.table(inventors_from_1500s)
35+
console.table(inventors_from_1500s);
3736

3837
// Array.prototype.map()
3938
// 2. Give us an array of the inventors first and last names
40-
const inventors_full_name = inventors.map((inventor) => `${inventor.first} ${inventor.last}`)
41-
console.table(inventors_full_name)
39+
const inventors_full_name = inventors.map(({first, last}) => first + ' ' + last);
40+
console.log(inventors_full_name);
4241

4342
// Array.prototype.sort()
4443
// 3. Sort the inventors by birthdate, oldest to youngest
45-
const inventors_by_date = inventors.sort((a, b) => a.year - b.year)
46-
console.table(inventors_by_date)
44+
const inventors_by_date = inventors.sort(({year: a}, {year: b}) => a - b);
45+
console.table(inventors_by_date);
4746

4847
// Array.prototype.reduce()
4948
// 4. How many years did all the inventors live?
5049
const total_years_lived = inventors.reduce(
51-
(currValue, inventor) => currValue += (inventor.passed - inventor.year), 0
52-
)
50+
(currValue, {passed, year}) => currValue += (passed - year), 0
51+
);
5352
console.log(total_years_lived);
5453

5554
// 5. Sort the inventors by years lived
5655
const inventors_by_lifespan = inventors.sort(
57-
(a, b) => (a.passed - a.year) - (b.passed - b.year)
56+
({passed: aP, year: aY}, {passed: bP, year: bY}) => (aP - aY) - (bP - bY)
5857
);
5958
console.table(inventors_by_lifespan);
6059

6160
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
6261
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
6362
/*
64-
This code will be run directly from the browser console
65-
after navigating to the Wikipedia link above.
66-
63+
// This code will be run directly from the browser console
64+
// after navigating to the Wikipedia link above.
65+
6766
const blvd_with_de = Array.from(document.querySelectorAll('.mw-category a'))
68-
.map(link => link.textContent)
67+
.map(({textContent}) => textContent)
6968
.filter((blvd) => blvd.includes('de'))
70-
*/
7169
70+
*/
7271
// 7. sort Exercise
7372
// Sort the people alphabetically by last name
74-
7573
const people_by_last_name = people.sort((a, b) => a.split(', ')[0] < b.split(', ')[0] ? -1 : 1);
76-
7774
console.log(people_by_last_name);
75+
7876
// 8. Reduce Exercise
7977
// Sum up the instances of each of these
80-
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck'];
78+
const data = [
79+
'car',
80+
'car',
81+
'truck',
82+
'truck',
83+
'bike',
84+
'walk',
85+
'car',
86+
'van',
87+
'bike',
88+
'walk',
89+
'car',
90+
'van',
91+
'car',
92+
'truck'];
8193

8294
const data_instance_count = data.reduce((tallyObject, item) => {
83-
if (!tallyObject[item]) {
84-
tallyObject[item] = 0;
85-
}
86-
tallyObject[item]++;
87-
return tallyObject;
95+
tallyObject[item] ? tallyObject[item]++ : tallyObject[item] = 1;
96+
97+
return tallyObject;
8898
}, {});
99+
console.dir(data_instance_count);
89100

90-
console.log(data_instance_count);
91101
</script>
92102
</body>
93103

‎exercises/05 - Flex Panel Gallery/index.html‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
54
<meta charset="UTF-8">
65
<title>Flex Panels 💪</title>
@@ -27,29 +26,26 @@
2726
.panel1 {
2827
background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500);
2928
}
30-
29+
3130
.panel2 {
3231
background-image: url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500);
3332
}
34-
33+
3534
.panel3 {
3635
background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d);
3736
}
38-
37+
3938
.panel4 {
4039
background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500);
4140
}
42-
41+
4342
.panel5 {
4443
background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500);
4544
}
4645
</style>
47-
4846
</head>
49-
5047
<body>
5148

52-
5349
<div class="panels">
5450
<div class="panel panel1">
5551
<p>Hey</p>
@@ -81,20 +77,18 @@
8177
<script>
8278
const panels = document.querySelectorAll('.panel')
8379

84-
function togglePanel() {
85-
this.classList.toggle('open');
80+
const togglePanel = (p, e) => {
81+
p.classList.toggle('open');
8682
}
8783

88-
function toggleText(e) {
89-
if (e.propertyName.includes('flex')) this.classList.toggle('open-active');
84+
const toggleText = (p, e) => {
85+
if (e.propertyName.includes('flex')) p.classList.toggle('open-active');
9086
}
9187

92-
panels.forEach(panel => panel.addEventListener('click', togglePanel));
93-
panels.forEach(panel => panel.addEventListener('transitionend', toggleText));
88+
panels.forEach(panel => {
89+
panel.addEventListener('click', togglePanel.bind(null, panel))
90+
panel.addEventListener('transitionend', toggleText.bind(null, panel))
91+
})
9492
</script>
95-
96-
97-
9893
</body>
99-
100-
</html>
94+
</html>

‎exercises/06 - Type Ahead/index.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,9 @@
3131
.then(data => cities.push(...data))
3232

3333
// Step 4
34-
const matchInput = (inputString, cities) => cities.filter((location) => {
35-
const regex = new RegExp(inputString, 'gi');
36-
return location.city.match(regex) || location.state.match(regex)
37-
});
34+
const matchInput = (inputString, cities) => cities.filter(({city, state}) => (
35+
city.match(new RegExp(inputString, 'gi')) || state.match(new RegExp(inputString, 'gi'))
36+
));
3837

3938
// Step 6
4039
const numberWithCommas = (x) => x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

0 commit comments

Comments
 (0)