We finally started applying JavaScript to websites this week! Yahoo! I’ve been so excited to implement JavaScript functionality into the sites and projects we’ve been doing. Confession: I actually looked over all of the DOM lessons last week since I finished my Build Week project so early…so this week was really easy for me! We learned how to interact with the Document Object Model to be able to manipulate the data and elements. We learned how to add HTML elements and edit their attributes without ever having to touch the HTML or CSS files. Pretty neat! The most exciting part, though, was when we learned about event listeners. Basically, you tell the computer to “listen” for the user to do something, like a click or button press, and when the user does that thing, then the computer will execute a block of code. So when you click on an X to close, say, a menu, there’s an event listener that was “listening” for that click input and when you provide it, it runs the code that closes the menu!

I went all out with the projects this week because I was so excited about applied JavaScript. The first project had a "stretch" section where we had to make a digital timer that counts up to 10 seconds and turns red. It took me a little bit to figure out the logic to get all of the millisecond and second digits to count up, but it was fun! I even figured out how to add a start and reset button.

You can check out my project here or the GitHub repo here.

The second project was super fun. For the main project, we were provided with the HTML and CSS, which was actually one of our previous projects (the Fun Bus website). Our task was to implement 10 different kinds of event listeners. I decided to have some fun! I added modal image functionality so that when you click on an image on the page, it pops out slightly larger and the rest of the screen behind it is a slightly transparent black. Then when you click off of the image, it closes it. That was really fun because I really like when sites use modals when they have image galleries. My other favorite event listener I incorporated was an easter egg! When you press the keys that spell “Fun Bus” all at the same time, it triggers an animation. A little school bus pops up at the bottom left corner and goes all the way around the browser window. I was really proud for figuring out not just the JavaScript logic, but the chaining CSS animations to make it work :)

Check out the finished product here! Or the GitHub repo here.

For the "stretch" section of the second project, we had to manipulate “rocket ships”. They were really just different colored square HTML divs lined up in a single column. So I took it upon myself to make them look somewhat like rocket ships by using different linear and radial gradients for the background images. I digress. The goal was to have event listeners to that when a ship was clicked, it would move to the top. If you clicked and held on a ship, it needed to travel to the right until you released. Then it would travel back to its original spot. Easy enough if you don’t care about smooth, nicer looking transitions. You can just change the order property for the click event. But I wanted it to look nice, so I had to play around with the position and top properties so I could take advantage of CSS transitions. I also spent way too much time figuring out how to append a background image to the bottom of the rocket ship background images to make it look they had their engine on while moving. Upon rendering, the browser adds an extra transparent background image, so I had to figure out how to remove that before adding the engine image. It was a pain to figure out that was even the problem, but it works like a charm now! :) And for the cherry on top, I made the background look like twinkling stars. I actually implemented 3 different ways of doing it, but 2 of them were using a lot of JavaScript and CSS transforms, so it made everything really laggy. I ended up going with the simplest option, albeit most limited as far as color options. It’s just an actual image (black with stars) with a second small repeating black image moving infinitely over the top. When the stars are covered up by the smaller image, it gives off the impression that they’re twinkling. :)

Check it out here!

I’ve also been working on my personal website this week! I don’t like the site I made when we did our personal sites as a Lambda School project several weeks ago, so I decided to make my own instead of using a template. I’m using Gatsby and Netlify CMS, since I want to include my blog. It’s been my biggest challenge by far since I’ve never worked with React or GraphQL, so thankfully my sweet husband has been helping teach me the new concepts. I would like to incorporate a parallax scroll with for the background of the landing page, but for now I’ll keep it clean and simple since I’m still figuring everything out. I’m just excited because Gatsby sites have a reputation of being really fast and it would be nice to use Netlify CMS as my CDN so that I don’t have to write the MD files myself. I can just enter in the CMS side and it converts it and adds it to my GitHub repo and site for me. Sweet :) I can’t wait to see how it turns out!