Day 6 to 10

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 6 - Type Ahead

• worked with JSON data and used fetch and promises to load the data into an array using the spread operator
• used RegEx for the first time in JS to find matches in the JSON data
• worked with string literals some more to create nicely formatted HTML
• got to use array map and filter some more

Day 7 - Array Cardio Day 2

• some more array feature using some, every, find and findIndex
• some will let you know if some of the items in the array match your criteria
• every will let you know if all of the items in the array match your criteria
• find will do exactly that - find the item in the array you are looking for
• findIndex will do the same as find but return the item’s index, handy if you need to do a delete

Day 8 - Fun with HTML5 Canvas

• used HSL (hue, saturation, lightness, you can learn more here) and HTML5 canvas element
• working with canvas elements are pretty easy but there is a lot of setup needed
• make sure to get the canvas context as this is what you’ll use for anything you want to do in relation to the canvas element like setting the stroke style, line width, line cap, etc,
• event arguments have a ton of useful information, you just need to know to look. In this case we used the X and Y offset to make this work

Day 9 - Dev Tools Domination

• there’s no demo here as we worked through taking advantage of the Chrome Dev Tools console
• console.log gives you simple results but if you pass in CSS as the second parameter you can style your results
• console.error gives you and error, console.warn gives you a warning, console.info is the same as console.log
• console.assert can be used as a way to test your code
• console.dir will give you a hierarchical view and console.table will give you a nice table view

Day 10 - Hold Shift and Check Checkboxes

• this was a tricky one, as we needed to know where on the screen they were and where they were going to check all the right boxes
• ended up looping through all the boxes and tracking where we were and where we ended
• this will come in handy for some of the projects I’m wanting to build