I worked on two new features for this devlog. One was kind of an impulse decision to add floating logos that bounce off the edges of the main page, like the DVD logo, and the other was making the time remaining section work on the goal cards instead of being a placeholder.

Floating logos

I felt like the background was super plain here and it felt kind of soulless, so I decided to give it that little nostalgic touch and have logos bounce around the user’s screen without making them too distracting.

I made this by adding 7 floating logos outside of the main HTML, and then I

• Used the Math.random function to randomize the object’s size, speed, and starting point
• Adjusted the opacity of them so they won’t be too annoying
• Bounded the speed so they all are roughly moving at the same type of speed with slight variation
• Made them bounce off the edges of the screen using the window width and height and negating their speed value when they come in contact with the boundary

With that done, I was testing the app’s functionality and discovered that the days remaining was still using a placeholder of “5 days,” which I had put there earlier.

Days Remaining

I made this work by writing a function that calculated how many days remained between the current day and the chosen completion date. I did this by using the new date() function to get dates in the format where I could directly subtract them to get the remaining days. This made it very convenient to work with.