Read what I have learned from each project.
After watching an introductory video for each project that shows the final outcome and the JavaScript functionality, I created the project without watching the solution videos by doing my own research to decide what tools would work best in each project. It gave me motivation to go to the documentation to understand topics more thoroughly.
Expanding Cards
Photo Prep I went through the process of getting a group of photos ready to add to a website, normalizing their widths and heights and reducing the size of the image files.
Progress Steps
Edge cases, zero-indexed arrays I had to think very carefully about edge cases because there were so many, such as the conditions needed to determine if a number was "activated" or not and when previous and next buttons were disabled, how the conditions are different when moving through steps vs going back steps.
Rotating Navigation
Z-index I was trying to use semantic html by keeping all my nav elements in a single nav div, without understanding that z-index order is determined first within a div, then div by div. Each layer I want in the final analysis needs it's own div.
Hidden Search
Styling Form Elements Search input fields are not easily styled, but text fields can be styled with css, so I am using a text input instead of a search input. Another issue for me was learning how to hide the text input, but also removing it from the document flow so that the search icon would be centered when the text input is hidden, as well as showing a transition for the change.
Blurry Loading
setInterval() As a student of physics and mathematics, the formulas to convert one interval to another was the easy part in this project. I learned about setInterval() and clearInterval() and was reminded how to change an element's style properties with JavaScript.
Scrolling Animation
Daily Coding I hadn't done one of these projects in a couple of months, instead working on learning more about WordPress. I struggled with "thinking in JavaScript". If I am coding everyday or nearly, I will be able to keep the correct syntax in mind as well as remembering categories of css attributes and js functions in mind.
Split Landing Page
Blending Modes A different recent project involved what looked like an overlay, but I could never make mine look as great as the example. It wasn't an overlay; the image was blended with the background with blending-mix-mode: multiply.
Form Wave Animation
Critical Rendering Path In this project, I used a click into the input field to replace the original label, "Email" with a string with each of the letters surrounded by span elements. I then immediately made a transition on the span elements. The transition occured before the span string had been rendered and painted, so the transistion had no starting point. I needed to learn all about the critical rendering path to understand why my transition wasn't working.
Sound Board
Audio This was my first project using the audio element. I learned the functions needed and did a very small amount of audio editing.
Dad Jokes
Fetch API I used the Fetch API to make a http get request. I hadn't made a request in some time, so I had to relearn the steps taken to actually reach the data I requested. Because the request is async, I have to extricate the data from the promises.
Event Key Codes
Keyboard Events My go to keyboard event "keypress" is deprecated along with KeyboardEvent.keyCode. Instead of receiving an ASCII type code for the keypress, the "keydown" event gives a KeyboardEvent.code such as "KeyA", "Digit4", "Backspace", etc.