Day 11 to 15

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 11 - Custom Video Player

• got to work with the video element and added a bunch of features - play, skip, scrub, etc.
• used the conditional (ternary) operator, for example:

const state = this.paused ? "Play" : "Pause";

• you can use square brackets and the method name as a string to call a method, for example:

const method = video.paused ? "play" : "pause";
video[method]();

Day 12 - Key Sequence Detection

• having some fun with key detection, if you type “webos” all together in the demo you’ll get a surprise
• used splice to keep the same number of items in the array as the length of the secret code
• using join(”) on an array will give you a string without commas between the items whereas if you use toString you will get a string but there will be commas between each item

Day 13 - Slide in on Scroll

• introduced the debounce pattern to help with performance, I plan to write a whole post on this
• this one has a lot of position checking to tell if the image is visible or not using: scrollY and offsetTop

Day 14 - JavaScript References Vs. Copying

• no demo here as we are going over references and copying
• if you are working with variables and you create a new variable and set it to an existing variable and update the new one the old one will not change. This is not the case with arrays
• this is a good time to use the new spread operator introduced with ES6, for example:

const players = ["Wes", "Sarah", "Ryan", "Poppy"];
const team = [...players];

Day 15 - LocalStorage

• learned about using preventDefault to stop the page from reloading unnecessarily
• local storage only works with strings so you’ll need to use JSON.stringify()
• to get items from local storage use getItems(), to save items use setItems(), and to delete something use removeItem()