I got this challenge done under the wire, but it turned out to be a lot of fun! I took the chance to practice some jQuery, which I’m still very much a beginner at and still learning about in my Udemy course.

This week’s challenge was to create something inspired by Candyland. This is one of my all-time favorite board games, so I was really looking forward to seeing what I could do.

I created five small boxes using <div>, and gave them classic Candyland colors with CSS. I found a cool candy-inspired font on Google Fonts and used that for my title. To achieve the mouse-over effect, I used jQuery to change the color of the background and title color when the mouse hovered over a box. A W3C tutorial gave me the jQuery template I needed. It was fun figuring out how to change the selectors to get the effect I was looking for.

Someday, I’d like to see if there’s a way to use fewer lines of code to make the color-change effect happen, since I used the same set of lines (below) for each box. I suspect there’s a way to do that with just one set of those lines, to be more efficient.

$(“#red”).hover(function() { $(“body”).css(“background-color”, “red”); }, function() { $(“body”).css(“background-color”, “white”); });