In this project, I am making a dynamic new tab page, which will change based on the time of the day. Currently, I have made a new tab page with a title text and 4 shortcuts that I frequently use. I have also added an animated gradient background. Depending on the time of day, the background and text color will change color.
So I tried to ship my project, but I kept getting rejected on the basis that it is AI generated, when I have used 0 AI. I have no idea where they are finding AI use, but I decided to disconnect it from the mission because I was not going to waste my time just for 60 stardust. So a lot of time was just spent tinkering around with code seeing if they would accept it, but no luck, so I’m just going to continue on, add some new features, and hope that that gets accepted.
There was not much progress during this block, it was mainly just adjusting code or typing small lines. I got feedback saying that the CSS looked AI generated, so I should change that. But as I started to, I just felt so sad to see the progress I made go away, so I decided to just keep working on this and continue from there. I added one more link as a shortcut and that is for gmail.
Now its time to really take this project to the max. One thing that I really want to tinker around with is Three.js, and adding interactive 3D models into my webpage. It doesn’t even have to be interactive, it just has to have a 3D effect. I am thinking a space scene. So that is the next goal. I am still thinking of some ideas. But I am done with the mission, and I didn’t use any AI, so I am just going to continue with this.
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.
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.
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.
During this block, I spent some time styling the website in CSS. I wanted it to start looking a bit more like a new tab page before I started in JS. I positioned my text in the middle, and made my shortcuts look nicer. Basically, it was a major styling block.
For now, I decided to keep only a title and some shortcuts just to keep the design simple. I want to then move onto JS to implement a dynamic feature into my website which will change with the time. So the goal is a minimalist style for now.
The styling overall was not too hard. I had already arranged by classes nicely in HTML, so I had to move them around. I finally learned the secrets of the display: flex; rule, and how to use it to center things properly in CSS. So I got that working and then styled my icons. I applied some neat hover effects to them. At first I was planning to have a label text to label the shortcuts, but I already knew what they all were, so I decided to keep the text out, and if I wanted to I could add it again later.
The next thing that I want to do is make the background a moving gradient, but not too fast or bright, because that will be distracting. The main thing I want to add is a dynamic aspect. So I want to make it so that the background color will change with the time of day. Pretty basic, but that’s all I want to do before the inital ship.
Below you can see a image of the page after styling.
I am officially starting my next project! In this project, I am planning to make a dynamic page that will show up when I open a new tab, replacing the regular GOOGLE one. For the first iteration, I am planning on making a simple page that has a large greeting text on it, but it’s background color will change depending on the time of day. I will probably change some stuff after that, but that’s the plan right now for my first ship so I can complete the mission.
So I started with the bare minimum. Because the site for now will not have much content on it, the HTML was pretty simple. I added a h1 tag with my title in it, and I decided that I will add buttons as shortcuts for some links that I use everyday. So I just added some icons that are linked to the sites. I also started with some super basic CSS, like just reseting margins, and starting to change the background color. It looks kinda bad right now, but I will make it look better.
My next steps are just to style it so it actually looks like a new tab page. I am not planning to add a search bar in there, because I don’t use the middle search bar, I only use the one on top, so I don’t want to take up unneccessary space. I want to finish styling in CSS before moving onto JS to set the dynamic changes.
Below is a image of the very rough draft with the icons, labels, and title. (It looks bad right now, but it will look better in the next devlog.)
