Site migration from WP to 11ty in progress. Some things may be temporarily broken.
{the} Amy Carney

Wes Bos, a Canadian web developer, has learned a lot about JavaScript by building projects, is offering a free course about JavaScript. His philosophy is that you learn code best by building things. In his JavaScript30 course, he offers simple projects to build and leads the viewer step by step on how to make those projects with vanilla JavaScript, not frameworks.

Saving this challenge for after I had completed my 100 Days of Code challenge, I'm excited to continue to build on my JavaScript knowledge. I'm also hoping these mini hand-holding projects will help me get through my last two Free Code Camp Advanced Front-End Development projects. Below are some of the valuable lessons I learned during the first five projects of JavaScript30.

Drum Kit (keyboard)

http://codepen.io/digilou/pen/QpzRyL

Clock

http://codepen.io/digilou/pen/qrgygz

Extra Credit: I experimented with the idea of changing the background image for day and night. That was actually easier to figure out than I thought!

if(hours >= 7 && hours < 19){
  htmlTag = document.documentElement; //html===document.documentElement
  htmlTag.style.background = 'url(https://unsplash.it/1500/1000?image=884)';
}

Extra Extra Credit: I experimented with adding a ticking sound. And I figured it out for myself, building off of past ideas. Fun!

const audio = document.createElement('audio');
audio.setAttribute('src', 'https://github.com/wesbos/JavaScript30/blob/master/01%20-%20JavaScript%20Drum%20Kit/sounds/tink.wav?raw=true');
audio.play();

CSS Variables + JS

http://codepen.io/digilou/pen/VpRPmq?editors=0010

Array Cardio, Day 1

These were much needed exercises, even though I didn't build anything. These were used in the Console. As I worked through them they started making more sense, as I had felt rushed and often confused during my Free Code Camp lessons and algorithm challenges. Wes presented these in a quick, fun, and straight-to-the-point lesson. I'm looking forward to his second Array Cardio lesson! Fundamentals he covered in less than 25 minutes:

// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's

const 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

const fullName = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
console.log(fullName);

// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest

const byBirth = inventors.sort((a,b) => a.year > b.year ? 1 : -1);
console.table(byBirth);

// Array.prototype.reduce()
// 4. How many years did all the inventors live?

const totalYears = inventors.reduce((total, inventor) => {
    return total + (inventor.passed - inventor.year);
}, 0);
console.log(totalYears);

// 5. Sort the inventors by years lived

const oldest = inventors.sort((a,b) => {
    const lastGuy = a.passed - a.year;
    const nextGuy = b.passed - b.year;
    return lastGuy > nextGuy ? -1 : 1;    
});
console.table(oldest);

// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris

const category = document.querySelector('.mw-category');
const links = [...category.querySelectorAll('a')]; //Array.from(category.querySelectorAll('a'));
const de = links
            .map(link => link.textContent)
            .filter(streetName => streetName.includes('de'));
console.log(de);

// 7. sort Exercise
// Sort the people alphabetically by last name

const alpha = people.sort((lastOne,nextOne) => {
    const [aLast, aFirst] = lastOne.split(', '); 
    const [bLast, bFirst] = nextOne.split(', ');
    return aLast > bLast ? 1 : -1;
});
console.log(alpha);

// 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' ];
const transportation = data.reduce((obj,item) => {
    if(!obj[item]){
        obj[item] = 0;
    }
    obj[item]++;
    return obj;
}, {});
console.log(transportation);

http://codepen.io/digilou/pen/wJZWQM

If you're looking for ways to build on your limited JavaScript knowledge and need very basic and quick projects to work through, this is the one. Only five lessons in and I feel better about my own JS knowledge and ability. Free Code Camp gave me a great start, but Wes has filled in some gaps and helped me have fun while doing it!

Onward to the next five lessons....