Custom Tab
- 6 Devlogs
- 10 Total hours
im gonna fetch all nasa's data mwahaha...
Ship #1
I made a simple new-tab page for web browser with live clock and date, google search, customizable shortcuts, and widgets that use public APIs to get data from github, nasa apod, and open meteo websites. The hardest part was making the shortcuts work so I could add and delete them. I’m proud that I turned a basic idea into a useful new-tab page. To test it, run npm install, configure env file, then npm run dev, open the page in the browser, and try the search, shortcuts, etc.
1h 1m 18s logged
Today I added a new widget that uses public github API to get details about the user profile. Then I restyled the widgets layout and added readme file. I also checked all the changes to make sure everything worked as expected before shipping.
1h 4m 16s logged
Today I added widgets to my tab. Now it has two widgets that load data from external APIs: a NASA APOD widget that shows today’s astronomy picture of the day, and a weather widget that uses user’s location to load current weather data from open-meteo website.
2h 46m 27s logged
Today I worked on the shortcuts. I changed them to render from an array, saved them in local storage, and made them clickable. I also added fancy modal form for adding new shortcuts to the list and a small delete button that appears on hover and deletes shortcut from the saved list.
1h 48m 46s logged
Today I improved my tab page by adding a blinking clock separator. I also made google search work and add a dynamic background with dark overlay.
2h 17m 31s logged
Today I started the new tab redesign with static layout, clock and date, search box, and shortcuts placeholders. Then I moved the page content from hardcoded html into javascript and split the logic into small js files (e.g. clock, search, shortcuts, etc.) so the project is easier to build step by step.
58m 34s logged
Today I started the initial NASA project by going through the guide, setting up the project, working with html, and getting the files ready for github and deployment. I also added javascript and css parts to build out the page.
