A Valentine’s Day Card

In February of 2020, in addition to a physical Valentine’s gift to a wonderful woman I’m fortunate to have, I decided to build her a digital extra.

The project starts with the image of a Mouse head – Mickey’s, that is, on a black background, pulsating with a brighter shade every few seconds. Once you move the computer mouse over the Mouse head elements, the Mouse head changes colours from grey to white, and scrolls down to the first of two slides which show random (and true) sentences that change on the screen at a rate of 20 sentences per second. Once you click each sentence, the cycling of multiple sentences stops, a setTimeout event happens which pops a Font Awesome icon onto the screen at the end of the sentence, and the site automatically scrolls down to the next slide.

This project was a smaller one – did not take long to build at all, but gave me experience with scrollIntoView, setInterval, setTimeout, and mouseover events, as well as randomizing the text that appears on screen. Colours were chosen with help from paletton.com, icons used are from the Font Awesome free icon collection, and design inspiration came from Mickey Mouse.

Also, she liked it 😀

View more project posts in the JavaScript category.