This week I spent a while working on Functional Programming section in FCC, since using reduce in the TOP exercises (findTheOldest!) was a bit confusing for me. FCC has you make your own map and reduce from scratch so that helped a bit.

I was hoping to finish Foundations by the end of my first coding month (Day 0 was July 10, and August 10 is Tuesday), and it's happening!

Saturday was the day stuff really happened. I had a bit of a motivational hiccup on Thursday and Friday (someone upset me and caused me some anxiety and I was getting more anxious fearing I'd lose motivation) but I relaxed mostly on Friday, went to the gym Saturday, and it helped clear my head.

I was working on Google Homepage, and struggling SO MUCH with positioning in CSS... I looked at elements with dev tools, it helped a bit, but also made things worse. Trying to align the top items with text and little pics took forever and I still couldn't figure it out and decided I need to go over CSS stuff again and just read more more more. After the gym break, I worked a bit more on Homepage and decided to switch to Etch-a-Sketch.

I had to figure out how to resize the grid properly. What would keep happening is that it would only work if I set the size for the squares, 1 fr wouldn't work! I would set the area size, but it wouldn't work either. Or it would fill out half the area and leave the squares all not-squarey, and just leave a random part of the area black. Also, only 256 squares would get eventListeners assigned.

Then it sort of clicked, I realized that the eventListeners I assigned were assigned at the first building out of the area when the page was displayed. So I cleared the innerHTML of the container as part of resizing and put the eventListener assignment into there as well. And then it just started working beautifully! I changed the color to rainbow (found a function to make a random color on stackoverflow) and called it a day. After getting some feedback on TOP Discord, I improved it a bit (it was really slow when doing large grids - turns out it was because I put adding event listeners into my for loop, and it was adding them every time a new square div was created). Took it out, and it helped. Done with it for now ! (later I'm going to try to make the page responsive and add buttons for different color options).

Now only Google Homepage left. I found some tutorials from Net Ninja on positioning and it really helped me understand why some positioning things I applied to my elements did nothing. I was able to position things better (still need to be improved to make the page responsive) and finished the project for now.

Now I just need to finish a couple reading sections which I skipped earlier (like on writing clean code and debugging) and the stuff on back end, and I'm done with Foundations!

So next week starting the full stack JS track!