Throughout this past week I focused on finishing the section in scrimba listed as javascript challenges. This section covered how to create a modal, a search bar, and a carousel using html, css, and js. I will say they were challenges indeed, the modal being the easiest challenge and the carousel being the more difficult challenge. They definitely opened my eyes more to the potential that javascript possesses. Through each module there were some nice refreshers I was able to go over again and some that I got stuck on. This let's me know I will have to go back over these modules to get a better grasp on how each element played a part.

For the modal challenge I learned how to activate buttons through event listeners to click into a pop up with a message and then another button to click out of the pop up back to the original screen. For the search bar challenge I created a simple search input at the top of the page with a list of names at the bottom. Once the user starts typing in the search area, the names start to filter out until the desired name is the only one left. This works vice versa too if the user starts deleting letters from the search bar, more names appear to accomodate the broader search. Finally for the carousel challenge there were a list of movies that are grouped together into slides, only one slide is visible at a time, then there are buttons at the edges of the slides so that when a user clicks on them, it goes to the next slide ie the next movie. This is on a continual loop so the user can click on the previous button or the next button as many times as they like.

Something that really stuck out to me on the modal project is that when we got to the javascript, there was no need to set a const or a let variable, meaning I was able to grab classes from the html without having to immediately assign it to a variable, like this:

document.getElementById("open-modal").addEventListener("click", () => { document.getElementById("overlay").style.display = "block"; })

In certain circumstances I find this to be useful as it will help with refactoring. With the search bar challenge, something that I found to be useful was being able to pass an event through a function like this:

document.getElementById("searchInput").addEventListener("keyup", function(event) { let searchQuery = event.target.value.toLowerCase();

This allowed js to tackle the dom and target what the user was inputting in the search bar. I also found this piece of code to be helpful:

let allNamesDOMCollection = document.getElementsByClassName('name');

Because I didn't realize this allowed js to grab all the classes by a specific class name, thus putting it into an array. Lastly, what I found to be useful in the carousel challenge were the use of keyframes which I know isn't a part of javascript but useful nonetheless. Also the beauty of for of loops. Here's an example of how it was used in this challenge:

function hideAllSlides() { for (let slide of slides) { slide.classList.remove('carousel-item-visible'); slide.classList.add('carousel-item-hidden'); } }

I think I'm going to be a huge fan of for of loops because not only does it look cleaner than a traditional for loop, but it's easier to read!

That's all I've got for this week, thanks for reading!