diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..cfa0f02f88 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,9 +57,36 @@ - + var addFeedback = function(event) { + var key = document.querySelector(`div[data-key = "${event.keyCode}"]`); + if (key === null) + return; + key.classList.add('playing'); + removeFeedback(event); + }; + var removeFeedback = function(event) { + if (event.propertyName != 'transform') { + return + } + event.target.classList.remove('playing'); + }; + var playSound = function(event) { + var audio = document.querySelector(`audio[data-key = "${event.keyCode}"]`); + if (audio === null) + return; + audio.currentTime = 0; + addFeedback(event); + audio.play(); + }; + + var keys = document.querySelectorAll('.key') + keys.forEach(key => key.addEventListener('transitionend', removeFeedback)) + + + window.addEventListener('keydown', playSound) + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..39dbd1b3e5 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,12 +61,39 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; /* rotation will pivot on the right hand side (50% by default, rotates from centre) */ + transform: rotate(90deg); /* clock will rotate so hands are at 12. */ + transition: 0.05s; /* each rotation will take 0.5s to complete */ + transition-timing-function: cubic-bezier(0.18, 1.1, 0, 2.15); /* makes ticking effect*/ + } + diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..3f374a313d 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 317883a4c1..8823904562 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -29,20 +29,31 @@ 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() + //Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + var fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year < 1600); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + var names = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + console.log(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + var sortedByAge = inventors.sort((inventor1, inventor2) => inventor1.year - inventor2.year); + console.table(sortedByAge); // Array.prototype.reduce() // 4. How many years did all the inventors live? + var summedAges = inventors.reduce((total, inventor) => total + (inventor.passed - inventor.year), 0); + console.log(summedAges); // 5. Sort the inventors by years lived + var sortedByYears = inventors.sort((inventor1, inventor2) => (inventor1.passed - inventor1.year) - (inventor2.passed - inventor2.year)); + console.table(sortedByYears); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris @@ -50,9 +61,24 @@ // 7. sort Exercise // Sort the people alphabetically by last name + var sortedByLastName = people.sort(function(person1, person2) { + var [person1First, person1Second] = person1.split(", "); + var [person2First, person2Second] = person2.split(", "); + return person1First > person2First ? 1 : -1; + }); + console.log(sortedByLastName); + // 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' ]; + var count = data.reduce(function(object, item) { + if (!object[item]) { + object[item] = 0; + } + object[item]++ + return object + }, {}); + console.log(count); diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..3f4895b929 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -26,16 +26,37 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + var peopleOver19 = people.some(function(person) { + var currentYear = new Date().getFullYear(); + if ((currentYear - person.year) >= 19) { + return true; + } + }); + console.log({peopleOver19}) // Array.prototype.every() // is everyone 19 or older? + var isEveryoneOver19 = people.every(person => new Date().getFullYear() - person.year >= 19); + console.log({isEveryoneOver19}); // 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 + var found = comments.find(comment => comment.id === 823423); + console.log(found); + // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 + var index = comments.findIndex(function(comment) { + if (comment.id === 823423) { + return true; + } + }); + + var deleted = comments.splice(index, 1); + console.log(deleted) + diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd719..ab5c8d4882 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -18,28 +18,53 @@ } // Regular + console.log("Hello") // Interpolated + console.log("Hello, my name is %s.", "George"); + var thing = "string" + console.log(`I am a ${thing}.`); // Styled + console.log("%c This is styled", "font-size: 20px; background: red "); // warning! - + console.warn("This is a warning"); // Error :| + console.error("This is an error!"); // Info - + console.info("This is some info") // Testing + var selected = document.querySelector('p'); + console.assert(selected.classList.contains('ouch'), 'You selected the wrong thing'); // clearing - + console.clear(); // Viewing DOM Elements + console.dir(selected); + console.clear(); // Grouping together + dogs.forEach(function(dog) { + console.groupCollapsed (`${dog.name}`) + console.log(`This is ${dog.name}`) + console.log(`${dog.name} is ${dog.age} years old.`) + console.groupEnd(`${dog.name}`) + }) // counting + console.count("George"); + console.count("George"); // timing + console.time('timing'); + console.log("hello"); + console.log("something happening"); + console.timeEnd('timing'); + + console.table(dogs); +