Feeling a lot more confident about my coding skills. I have a long way to go, but doing my phase 1 project for my web development code camp. Doing it this way seems to make more sense- having a practical, "tangible" outcome for my efforts. I’ve had a lot of fun looking around at things, exploring, searching for solutions online, watching instructional videos, reading blogs about specific aspects of JS.

The most interesting aspect for me has been dealing with event listeners and document queries. I feel like I learn better when I am able to apply it very quickly see you in front of me that kind of thing. Look forward to seeing what the reaction or the grade is for my phase one project.

I found the keydown(arrow-key) event listener to be one of the most challenging coding pieces in this project. I had to do quite a bit of research to find code that made sense, that I could apply and adapt to my own site, and would work for the requirements of the project. I still feel a little confused about the parsing portion but will continue to investigate this aspect of the keydown event. Here is a snippet of my code for reference:

 switch (e.key) {
        case "ArrowLeft":
            unicorn.style.left = parseInt(unicorn.style.left) - moveBy + 'px';
            break;
        case "ArrowRight":
            unicorn.style.left = parseInt(unicorn.style.left) + moveBy + 'px';
            break;
        case "ArrowUp":
            unicorn.style.top = parseInt(unicorn.style.top) - moveBy + 'px';
            break;
        case "ArrowDown":
            unicorn.style.top = parseInt(unicorn.style.top) + moveBy + 'px';
            break;

Through this process I have found that *dot notation * makes the most sense when referencing, calling, and styling elements in my code. As with the unicorn moving event listener, referencing the style top/left made more sense in this way after having modified so much of the CSS by hand, piece by piece.

This entire process has also highlighted how each piece is an integrated part of the other- for instance, though the HTML may seem like a disconnected document, it is connected to it's stylesheet and the Javascript in many fundamental ways. This example, one of many, can be seen with my API Search button that uses a fetch to a db.json file I created and creates new HTML elements that can be seen immediately by the user.

Below is a code snippet of what I used to make this event happen:

let result = document.getElementById("result")
            result.innerHTML = ''
            for (let i = 0; i < Math.min(movies.length, 5); i++) {
                let movie = movies[i]
                result.innerHTML +=
                    `<p class="movieItem" >${movie.title} is a(n) ${movie.genre} movie that was released in ${movie.release}</p>

All of this was nested inside my fetch and after the response was converted.

Additionally, I learned after finishing my project's first draft that I needed to have an API that utilized at least 5 objects with a minimum of 3 attribute each and was given the advice that I should use my iterator requirement with my API fetch. This was honestly a huge hurdle for me. I tried so many variations of this: trying to nest the forEach() I had used before in different areas, calling the functions in different areas, trying to figure out exactly where the disconnect was happening. I leaned on debugger and console.log quite a bit.

In the end it took the form of what I showed above- plus the fetch and event listener.

Another interesting aspect of this project was fiddling with the stylesheet. This is meaningful to me because I am an art teacher/ visual artist, so being able to see changes immediately to what I have coded has helped me more and more along the way. Now I want to make my work more aesthetically beautiful and find new tricks like flex-boxes to improve my own work speed and efficiency.

Here is a small snippet of one element's styling:

/* KITTY IMG */
#cutie {
    position: absolute;
    padding: 0;
    left: 1250px;
    top: 1000px;
    z-index: 2;
    border: 5px solid #000000;
    padding: 3px;
    margin: 0px;
}

I know that later, many times the styling comes in packages or there are more simplified ways to style elements of a project, but I am enjoying doing the long-hand right now so I can be stronger later on.

This project gave me a much more concrete outcome for what I have been learning so far. Along the way I have found it quite challenging to do some of the labs, as the final outcome is not my own or tangible overall- that doesn't mean the process isn't valuable, just how I am feelings about the learning so far.

Overall, I feel like creating this project was the biggest and most fulfilling challenge for me so far with the Flatirons software engineering program. I say this but know I have a long way to go...