JS30 Days 6-10

Day 6 - Ajax Type Ahead

GitHub
Today's exercise created a search feature. It used an external json source for the fetched data and then the data was filtered through for this project. After creating an empty array, the data was fetched and then pushed into the array. A few functions were built out that filtered that array and event listeners were added to grab what was typed into the search bar. This was a fun exercise which used RegEx which is something I am still learning about. It put a variable in a regular expression and I did not know that there were flags you could use like 'g' for global and 'i' for insensitive, so it can pick up both upper and lower case. I also learned the importance of getting data and functionality first before hooking it up to event listeners. All in all a fun little project to build out!

Day 7 - Array Cardio Part 2 🏋️‍♀️

GitHub
This was a quick exercise that went over the array methods .some, .every, .find, and .findIndex. I had not worked too much with .some or .every before so I definitely learned something new today! .some() checks if at least one element in an array passes the text provided by the function and will return true or false based on if the element is there or not. This does not modify the array. .every() returns a boolean if all elements in the array pass the function's test.

Day 8 - HTML5 Canvas 👩‍🎨🎨

GitHub
My favorite exercise so far! Using vanilla JavaScript you create an in browser canvas to doodle on.

Creating a canvas with .getContext was something that I had never done before and I definitely want to do more in depth research on the different aspects of it. This exercise also used event listeners and functions to listen for the events needed to draw onto the created canvas' x and y axis. This exercise also utilized mothereffinghsl to get the color gradiant hue for our drawn line working in conjunction with the event listeners.

Day 9 - DevTools Tricks

GitHub

Loved this overview. I learned a few things about DevTools that I did not know before as well as all the varieties of console. that can be used. I had mostly used console.log() and console.dir() before and was surprised at just how many there are and the variety of ways they can be used! I feel like I've been missing out not knowing about console.table()!!

Day 10 - Hold Shift and Check Checkboxes ✅

GitHub

This exercise worked with checkboxes and using the shift key to be able to select multiple checkboxes at a time. This was done by programmatically setting the boxes to checked with JavaScript until you click the last one. Until the last one clicked is selected, our flag variable gets set to false which makes this functionality work both when selecting from the bottom to the top top or vice versa, by setting the variable equal to this or to lastChecked. The variable is declared with the let keyword because it is a variable that can change.