JavaScript30 Begins: First 5 Projects

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)

  • Discovered keycodes with keycode.info! I anticipate referring back to this as I learn how to make sites/apps for keyboard accessible.
  • .addEventListener(): this was more exposure for me because I haven’t used this often but it sure seems handy!
  • creating an audio element and using currentTime() and play(): now I can go back to my Pomodoro timer and add an alarm to sound when the timer is up
  • .classList.add() === $().addClass() === NICE
  • HTML <kbd> element: surprised that I didn’t know this one! But now I’m glad I do. More accessibility usefulness and more.
  • data-key === wildcard

Clock

  • Template Literals: so THAT’S why my clock didn’t work despite directly copying code after much frustration of following along and not getting it. Which led me to why my drum kit didn’t work immediately either without a copy-and-paste job. Backticks ` …. SO important when using a template literal ${}. Lesson learned.
  • document.querySelector: great replacement for document.getElementById, though it has its place, I’m sure.
  • Date properties: .getSeconds, .getMinutes, .getHours… brilliant! Didn’t quite get this when reading up on them for my Pomodoro timer.
  • CSS properties I hadn’t used yet, but fun:
    • transform origin: 100%; keeps a rotating clock hand Y-axis in place
    • transition (for the ticking)
    • transition-timing-function:cubic-bezier(0.1, 2.7, 0.58, 1); Mind. Blown.
  • Unsplash.it is the perfect website to find placeholder images for projects!

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

  • :root (in CSS) targets the entire document
  • CSS variables: So, I don’t need Sass for this?? Use ‘–‘ instead of ‘$’.
  • document.querySelectorAll() gets a node list, but it’s not an array
  • dataset property: target my made up data tag to change it

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:

  • filter: returns filter results based on parameters
  • map: returns the same number of items in the array, but maybe organized differently
  • sort: sorts items in array by comparing one item to the next (a > b)
  • reduce: gives a running total returned from last time checked (I think of this as items being folded over one another until you get the final result of what you want)
  • fun fact: console.table() neatly displays data from an object array!
// 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);

Flex Panels Image Gallery

  • CSS flex can be a nested item nesting! I thought it only started with the parent other properties trickled to its children (maybe I’m confusing with grid?)
  • .classList.toggle () === $(”).toggle()
  • flex-direction can be set to column
  • transform: translateY(-100%) puts something off-screen
  • flexbox properties I need to spend more time on:
    • flex:1 0 auto;
    • display:flex;
    • justify-content:center;
    • align-items:center;

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….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s