Day 16 to 20

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 16 - Mouse Move Shadow

• used destructuring to get the width and height of the element we want to work with
• string literals became helpful again to dynamically set the text shadow using variables
• worked some more with offset X and Y, width and height

Day 17 - Sort Without Articles

• the demo here only shows the results so there isn’t much to it, feel free to look at the code
• created a strip function to remove the articles - a, the, and an - from the band names
• used sort along with the strip function to sort the bands
• then using map outputted the sorted list including the articles as an unordered HTML list

Day 18 - Adding Up Time with Reduce

• the demo isn’t much so look at the code and the dev tools console
• we started off with an unordered HTML list with data- attributes for the length of time for videos and we had to find the total
• we user map to first get the time and then again to break the minutes and seconds up so that we could add them up as seconds
• now that we had the total seconds for each item we could use reduce to find the total

Day 19 - Webcam Fun

• this one was pretty cool, we got to use the web cam to stream to a HTML canvas
• for this to work in Chrome I had to use video.srcObject and not window.URL.createObjectURL as they video shows
• we applied various image effects by playing around with the pixel data - one made it red, another split our the RGB, and then last was a sort of green screen filter

Day 20 - Speech Detection

• we worked with the built in speech recognition feature and I was pretty surprised by how good it was and how easy it was to implement
• you have to dig into the results a little to get what you need so using map is handy here
• by setting interimResults to true you will get the guesses as it works out what you said
• checking on isFinal of your results tells you if it’s done and happy with what it has determined was said