Just Scraps of JavaScript

After four months, one would think I would come up with a better way to say: 'This month has been the hardest project so far!'
But as I find myself struggling to narrow down the hardest part of this month to write about, I'm met with that same sentiment.

My cohort lead consistently reminded us that while we are coming from the high of feeling like Rails masters, this deep dive into JS was expected and normal. However hearing that and processing it and implementing those feelings are all very different.

I immediately felt intimidated by the simple fundamentals of JS. Why do we have to declare a variable using a keyword? The simplicity of typing

jill = Person.new(name: "Jill")

and declaring a function made sense until we also decided to assign those to variables too?? Even as I prepare for my upcoming assessment, I feel confident in my understanding of fetch requests, arrow functions, and array methods, but I know I need refreshers on the Day One basics like hoisting and grabbing elements from the DOM.

Once we began to write in OOJS, I felt a level of comfort return. Creating these objects that we can then manipulate was relatable, and creating methods that only work with those 'classes' makes sense. Pushing the newly created object into an empty array and using .this keyword reminded me of Ruby and I was grateful to that.

This project did give me the opportunity to do things I haven't in the past:

• I was so nervous about implementing a pop up feature to display one specific interpreter's information, so for the first time, I created a Pop Up branch on my git repository. Having the freedom to manipulate and mess up my work while knowing my overall project was still okay, was a very exciting new development. I'm glad I gained more Git experience before entering my job search.
• I created a Rails API and researched different ways to display my data, like Serializers, but in the end decided to manually create my data structure the way that made the most sense to me. Our past two projects have been working with mostly fake data (at least personally), but to have everything completely original was so exciting and gave me a lot of control.
• My last few projects have been incredibly basic in terms of styling. I feel that my strengths are in the 'M' and 'C' of MVC. But I went out of my comfort zone to learn a little about CSS and very basic styling. My initial implementation of a gradient looked like this: (Graphic design is my Passion)

I struggled with quite a few things in JS, as I previously mentioned, beginning the fundamentals was rough. But I also had difficulty displaying things on the page in the way I wanted. For example, I wanted a pop up to appear when you clicked on a "favorite". But Favorites only appear when you click on "Show My Favorites". So this is defintely not the best way to go about it, but this is what I did...and it worked:

```const modal = document.createElement("div")

modal.className = "modal"
modal.id = "show-modal"
modal.tabindex = "-1"
modal.role = "dialog"
const modalDialog = document.createElement("div")
modalDialog.setAttribute("class", "modal-dialog")
modalDialog.role = "document"
const modalContent = document.createElement("div")
modalContent.className = "modal-content"
const modalHeader = document.createElement('div')
modalHeader.className = "modal-header"
const modalTitle = document.createElement("h5")
modalTitle.className = "modal-title"
modalTitle.innerText = `${int.name}`

const closeBtn = document.createElement("button")
closeBtn.type = "button"
closeBtn.id = "close-int-button"
closeBtn.setAttribute("class", "close")
closeBtn.setAttribute("data-bs-dismiss", "modal")
closeBtn.setAttribute("label", "Close")

const span = document.createElement("span")
span.setAttribute("aria-hidden", "true")
span.innerText = `X`

closeBtn.append(span)
modalHeader.append(modalTitle, closeBtn)

const modalBody = document.createElement('div')
modalBody.className = "modal-body"
modalBody.innerHTML = `<li> ${int.email} </li>`


modalContent.append(modalHeader, modalBody)
modalDialog.append(modalContent)
modal.append(modalDialog)
favoritesContainer.append(modal)```

So much. Too much. Nonsense. Could I have put both the favorites container and this pop up in the HTML and hidden both of them? Probably.
But writing out all of this actually really helped solidify a few concepts for me. I was excited that I was able to create something in HTML using JS, because when we started a month ago, I had no experience in either.

As is always the case with these projects, I feel like I don't fully understand the material until I'm forced to do it myself with my own ideas. I can go through the motions in labs and follow along in lecture, but not actually understand the exercise. This process, of trying and failing and then changing one thing and trying again until it yields the result I want, has been the most beneficial and worthwhile exercise of my Flatiron academic experience.