EvergreenTab
By
@kas_kadiia
- 4 Devlogs
- 8 Total hours
A nature-themed new tab page.
4h 6m 26s logged
Devlog #4
Figuring out APIs took a long time as this is my first time using one and using Vite…
Before all of that, I spent almost an hour changing the search button to an icon and wondering why it was misaligning the search engine selector and search bar, and then I added the foundation for a settings menu.
Now over three hours were spent on figuring out Pexels API. I installed Vite midway through this project, so I had to sift through what was unnecessary. Okay, then came the image API. I bounced between Unsplash and Pexels and landed with Pexels. I had no clue how to integrate an API key at this point, so that took me a long time. Actually getting fetching images to work was a hell of a lot of debugging on my own. Eventually I got it to work after a lot of time… I decided to make the background images randomized per hour, but for now it is per minute for testing. I will need to adjust styles further later.
It’s also bugged with the GitHub Pages deployment, so I’ll need to figure that out too… oh well.
1h 45m 19s logged
Devlog #3
I burned an hour and 45 minutes on making the search engines switchable… :D
I spent around an hour trying to make a functioning drop down menu, first with CSS :hover pseudo-class but to no avail, before moving to a button with JS to toggle it. Then I had to fight the positioning for maybe ten minutes. Getting it to work was much easier, but still took me some time as I needed to figure out how I could more easily add click event listeners to all options without separately getting each element.
I’ll add more engines later, but I want to make a shortcut dock for preferred or most visited sites next.
1h 9m 57s logged
Devlog #2
I spent time adding CSS styles to the search bar and added a clock. I experimented with more pseudo-classes so that there is a slight glow effect when you select or hover over the search buttons. The clock was simple but the first JS I used in this project. I also added another font to use for the time and search bar text itself, still using Google Fonts.
46m 6s logged
A nature-themed New Tab page
I’m now working on the New Tab mission. I have started with making a basic search query that does function along with a basic design.
It took me some time to figure out how to make the search bar actually work, all because I put name="q" in the wrong place…
I decided to experiment with custom fonts using the Google Font API. I spent some time trying to figure out how to get it to work with a .ttf file and other ways, before I realized how Google makes it very simple by providing the HTML links.
