Skip to content

Instantly share code, notes, and snippets.

@BLaurenB

BLaurenB/WesBos.js

Last active March 9, 2018 21:55
Show Gist options
  • Save BLaurenB/8fc162d18b6f737c736a8eb07cec328e to your computer and use it in GitHub Desktop.
Save BLaurenB/8fc162d18b6f737c736a8eb07cec328e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
WesBos.js
//Array Cardio I //////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Cardio 💪</title>
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<script>
// Get your shorts on - this is an array workout!
// ## Array Cardio Day 1
// Some data we can work with
const inventors = [
{ first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
{ first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
{ first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
{ first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
{ first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
{ first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
{ first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
{ first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
{ first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
{ first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
{ first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
{ first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
];
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'];
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
let inventorsIn1500s = inventors.filter(element => (element.year >= 1500 && element.year < 1600));
// console.table(inventorsIn1500s);
// Array.prototype.map()
// 2. Give us an array of the inventors' first and last names
let newArray = inventors.map(function(element) {
return `${element.first} ${element.last}`;
});
// console.log(newArray);
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
let sortedBirths = inventors.sort(function(a, b){
return a.year > b.year ? 1 : -1
});
sortedBirths = inventors.sort((a, b) => ( a.year > b.year ? 1 : -1));
// console.table(sortedBirths);
// Array.prototype.reduce()
// 4. How many years did all the inventors live?
let totalYears = inventors.reduce(function(total, element){
return total + (element.passed - element.year)
}, 0);
totalYears = inventors.reduce((total, element) => total + (element.passed - element.year), 0);
console.log(totalYears);
// 5. Sort the inventors by years lived
let oldestToYoungest = inventors.sort(function(a, b){
return (((a.passed - a.year) > (b.passed - b.year)) ? 1 : -1)
})
// console.table(oldestToYoungest);
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
// let category = document.querySelector('.mw-category');
// let links = category.querySelectorAll('a')
// let links = Array.from(document.querySelectorAll(".mw-category a"));
// let de = links
// .map(link => link.textContent)
// .filter(streetName => streetName.includes('de'));
// 7. sort Exercise
// Sort the people alphabetically by last name
let orderedNames = people.sort(function(a,b){
//it's an arrar of strings. technically I could just sort by last name, and they are actually already sorted, soooo... anywho, the dude says to split them by first and last names, then order by last name.
let aLast = a.split(", "[0])
let bLast = a.split(", "[0])
return aLast > bLast ? 1 : -1;
});
console.log(orderedNames);
// 8. Reduce Exercise
// Sum up the instances of each of these
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
let countedThings = data.reduce(function (newObject, thing) {
if (!newObject[thing]){
newObject[thing] = 0;
}
newObject[thing]++
return newObject
}, {});
console.log(countedThings);
</script>
</body>
</html>
//Array Cardio II //////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Cardio 💪💪</title>
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<script>
// ## Array Cardio Day 2
const people = [
{ name: 'Wes', year: 1988 },
{ name: 'Kait', year: 1986 },
{ name: 'Irv', year: 1970 },
{ name: 'Lux', year: 2015 }
];
const comments = [
{ text: 'Love this!', id: 523423 },
{ text: 'Super good', id: 823423 },
{ text: 'You are the best', id: 2039842 },
{ text: 'Ramen is my fav food ever', id: 123523 },
{ text: 'Nice Nice Nice!', id: 542328 }
];
// Some and Every Checks
// Array.prototype.some() // is at least one person 19 or older?
let adults = people.some(function(person){
let thisYear = (new Date().getFullYear())
if (thisYear - person.year >= 18) {
return true;
}
});
console.log(adults);
// Array.prototype.every() // is everyone 19 or older?
let allAdults = people.every(person => ((new Date().getFullYear()) - person.year >= 19));
// console.log(allAdults);
// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
// find the comment with the ID of 823423
let foundComment = comments.find(comment => comment.id === 823423);
// console.log(foundComment);
// Array.prototype.findIndex()
// Find the comment with this ID
// delete the comment with the ID of 823423
let index = comments.findIndex(comment => comment.id === 823423);
comments.splice(index, 1); //saving this to a variable returns the spliced thing, not the new array!
console.log(comments);
</script>
</body>
</html>
//Objects and Arrays //////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS Reference VS Copy</title>
</head>
<body>
<script>
// start with strings, numbers and booleans
// let age = 100;
// let age2 = age;
// console.log(age, age2);
// age = 200;
// console.log(age, age2);
// let name = "Lauren";
// let name2 = "Jenny";
// console.log(name, name2);
// name = "Ren";
// console.log(name, name2);
// Let's say we have an array
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
// and we want to make a copy of it.
// You might think we can just do something like this:
const team = players;
console.log(team, players);
team[3] = "Lux";
// however what happens when we update that array?
// now here is the problem!
// oh no - we have edited the original array too!
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
// So, how do we fix this? We take a copy instead!
const team2 = players.splice(); //copies the array instead of doing the slicing that it usually does
// one way
// or create a new array and concat the old one in
const team 3 = [].concat(players);
// or use the new ES6 Spread
const team4 = [...players];
const team[3] = "heehaw";
console.log(team4);
const team5 = Array.from(players);
// now when we update it, the original one isn't changed
// The same thing goes for objects, let's say we have a person object
// with Objects
const person = {
name: 'Wes Bos',
age: 80
};
// and think we make a copy:
//BAD: const captain = person This references the original object and changes to captain will make changes to person!
// how do we take a copy instead?
const cap2 = Object.assign({}, person, {number: 77}); // doing this adds another n/v pair to the new object we created from person. person remains the same.
console.log(cap2);
// We will hopefully soon see the object ...spread like with array, and works in React, but not vanilla yet.
// Things to note - this is only 1 level deep - both for Arrays and Objects. lodash has a cloneDeep method, but you should think twice before using it.
const me = {
name: "Lauren",
age: 100,
social: {
twitter: "@blaurenb",
linkedin: "@blaurenb"
}
};
console.log(me);
const dev = Object.assign({}, me) // but this only assigns 1 level!!!!!
const dev2 = JSON.parse(JSON.stringify(me));
console.log(dev2); //poor man's deepCLone
</script>
</body>
</html>
//Tally String Times with Reduce //////////////////////////////////////////////////////////
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
</head>
<body>
<ul class="videos">
<li data-time="5:43">
Video 1
</li>
<li data-time="2:33">
Video 2
</li>
<li data-time="3:45">
Video 3
</li>
<li data-time="0:47">
Video 4
</li>
<li data-time="5:21">
Video 5
</li>
<li data-time="6:56">
Video 6
</li>
<li data-time="3:46">
Video 7
</li>
<li data-time="5:25">
Video 8
</li>
<li data-time="3:14">
Video 9
</li>
<li data-time="3:31">
Video 10
</li>
<li data-time="5:59">
Video 11
</li>
<li data-time="3:07">
Video 12
</li>
<li data-time="11:29">
Video 13
</li>
<li data-time="8:57">
Video 14
</li>
<li data-time="5:49">
Video 15
</li>
<li data-time="5:52">
Video 16
</li>
<li data-time="5:50">
Video 17
</li>
<li data-time="9:13">
Video 18
</li>
<li data-time="11:51">
Video 19
</li>
<li data-time="7:58">
Video 20
</li>
<li data-time="4:40">
Video 21
</li>
<li data-time="4:45">
Video 22
</li>
<li data-time="6:46">
Video 23
</li>
<li data-time="7:24">
Video 24
</li>
<li data-time="7:12">
Video 25
</li>
<li data-time="5:23">
Video 26
</li>
<li data-time="3:34">
Video 27
</li>
<li data-time="8:22">
Video 28
</li>
<li data-time="5:17">
Video 29
</li>
<li data-time="3:10">
Video 30
</li>
<li data-time="4:43">
Video 31
</li>
<li data-time="19:43">
Video 32
</li>
<li data-time="0:47">
Video 33
</li>
<li data-time="0:47">
Video 34
</li>
<li data-time="3:14">
Video 35
</li>
<li data-time="3:59">
Video 36
</li>
<li data-time="2:43">
Video 37
</li>
<li data-time="4:17">
Video 38
</li>
<li data-time="6:56">
Video 39
</li>
<li data-time="3:05">
Video 40
</li>
<li data-time="2:06">
Video 41
</li>
<li data-time="1:59">
Video 42
</li>
<li data-time="1:49">
Video 43
</li>
<li data-time="3:36">
Video 44
</li>
<li data-time="7:10">
Video 45
</li>
<li data-time="3:44">
Video 46
</li>
<li data-time="3:44">
Video 47
</li>
<li data-time="4:36">
Video 48
</li>
<li data-time="3:16">
Video 49
</li>
<li data-time="1:10">
Video 50
</li>
<li data-time="6:10">
Video 51
</li>
<li data-time="2:14">
Video 52
</li>
<li data-time="3:44">
Video 53
</li>
<li data-time="5:05">
Video 54
</li>
<li data-time="6:03">
Video 55
</li>
<li data-time="12:39">
Video 56
</li>
<li data-time="1:56">
Video 57
</li>
<li data-time="4:06">
Video 58
</li>
</ul>
<script>
// const timeNodes = document.querySelectorAll('[data-time]'); //why is it a string containing an array?!?!?! IT'S NOT ACTUALLY AN ARRAY. It's a NodeList. Could spread it into an array tho...
// console.log(timeNodes);
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
const seconds = timeNodes
.map(node => node.dataset.time)
.map(vidLength => {
const [mins, secs] = vidLength.split(':').map(parseFloat);
return (mins * 60) + secs;
})
.reduce((total, vidSeconds) => total + vidSeconds);
let secondsLeft = seconds; // using let bc we're going to re-assign it a few times as we calc!
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600;
const mins = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60;
console.log (hours, mins, secondsLeft);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment