Day 1 to 5

JavaScript 30

Mon, 14 Jan 2019

This is a series of posts going over the free JavaScript 30 course by Wes Bos that gets you to work through 30 vanilla (no framework) JavaScript ideas. Each post will cover a few days from the course. This is totally free and well worth taking a try at. As someone who hasn’t used JavaScript much in the last few years it was a great way to get myself rolling again and see all the cool things you can do with what’s built into the browser!

For reference each of the day comes with a set of files to start from - CSS and HTML was prebuilt. I just added the JavaScript.

Day 1 - JavaScript Drum Kit

if you want to know what key codes are use keycode.info
introduced string literals which is new in ES6 - you use back ticks (to the left of the number 1 key on your keyboard) and then ”${}” to put in any variables you’d like
used data attributes which are part of the HTML standard allowing you to create your own attributes but they must begin with “data-”
getting objects from the document is much easier using document.querySelector and document.querySelectorAll
got to work with the audio HTML element and see how easy it is to use with JS
setting the currentTime property to 0 will allow you to quickly restart the audio otherwise it plays the whole thing before allowing it to play again

Day 2 - CSS + JS Clock

this one eded up being more about CSS then JS but was still interesting
using transform-origin 100% will make the pivot point at the very end, by default this is 50%, when doing transform rotate
transition-timing-function has some prebuilt effects or you can customize it, in this case we hacked the cubic-bezier in dev tools and now it looks like a more mechanical watch hand
used setInterval which allows us to run a function continuously after a specified interval between runs

Day 3 - Playing with CSS Variables and JS

another one where we learned a bit more on CSS than JS but again still learning
css variables must be declared on an element
css variables start with a double dash, for example —variableName
to use css variables you use var(—variableName)
when you use querySelectorAll you get back a NodeList which looks a lot like an Array but is not

Day 4 - Array Cardio Day 1

there is no demo for this one as it’s all in the console
went over filter, map, sort, and reduce using various examples
filter allows you to filter down an array to specific criteria
map allows you to loop through the array and make changes producing a new array with your changes
sort does what it says, sorts your array
reduce allows you to sum up all the items in an array

Day 5 - Flex Panels Image Gallery