Devlog #3

I am ready to ship my first version of this project. I have added an animated gradient background to the webpage. I have also added the dynamic features. So the gradient color and the text color will change color based on the time of day. I had to use just a bit of JS for this, but it was easy to figure out as JS has the ability to pull the time by itself.

Current Progress

I first worked on making the looping gradient. I wanted it to be at -31 degrees, but the looping was not working. I tried a lot of things, like increasing the size of the background, the keyframes of the animation, the width of the keyframes, and reversing the gradient colors. But nothing worked, so I decided to keep it just going horizontally as I had done that before and was able to quickly make.

I then moved to JS, in which I made a const for the hour. I discovered that JS can automatically pull the time of day from your device, so that was super convenient. I am actually learning JS in school, so I was able to add classes to the body depending on the time of day using if and else if statements. So it wasn’t too hard, and I got a really nice result out of it.

Next Steps

I am planning to ship next just so I can complete this mission. I already took way too many hours (only for 60 stardust). But I will for sure keep adding to this project. I want to connect it to my school schedule so that I can track my classes. I also want to include some productivity widgets, so I can remember things and get some stuff done in my life. But I will ship for now and continue working on it later.

Below you can see pictures of all the gradient backgrounds.

Challenge: try to guess what time of day they are each for.