You are browsing as a guest. Sign up (or log in) to start making projects!

MAK_Tab

  • 3 Devlogs
  • 7 Total hours

A New Tab page for you Web Browser that is NASA-Inspired and has all the stuff you need. GitHub: https://github.com/Ak-Web-Dev/mak_tab. Web: https://ak-web-dev.github.io/mak_tab/

Ship #1

Introducing MAK TAB!
A New Tab page for you Web Browser that is NASA-Inspired and has all the stuff you need. Includes a Calculator Too! I Tried to make it a complete-replacement for your New Tab. It is followed with the guide but before the styling. Styling uses Bootstrap for extreme responsiveness and yes it fits on a smartwatch screen too(320x320). You can search on google all you want whenever you like! It can also store upto 5 website shortcuts. It also displays local time, and local weather using postal code. I needed AI to learn two things, a weather system and how to use localStorage in JS. I am very proud that i know JS much more than befor and i now also know how to store items in local storage in JS. But above all, i first time used a Framework(vite) rather than plain html+css+js website! I also learned how websites handle api keys! The most difficult part for me was the "Weather" i spent most of the time on that, fixing errors but now it works smoothly! The NASA Image refreshes everyday and all its INFO is visible upon pressing the "NASA Image Info" button. All other tools, settings are visible upon pressing "Tools" Button. There is also 1 AOS Fade-down animation.
Try it now!

Try project → See source code →
Open comments for this post

2h 24m 57s logged

🎉🎉 MAK_Tab, is finally COMPLETED and LIVE! ✨✨

MAK_Tab, your new browser new tab is All Done and ready for Use!

Features Added: ✅

  • Weather System changed from GPS to Postal Code System.
  • 5 Shortcut Buttons to your favourite websites which save the url using localStorage.setItem(‘’) in JS!
  • Small Created by Badge added cleanly.
  • From 4 Welcome phrases, one is chosen randomly from each time you reload or open the page to give a living touch!

That’s It! The Project is finally completed!
To set it as your default new tab:
If you are on chrome or chromium-based browser, download “New Tab Redirect” Extension from chrome web store and set the URL of this site to show as your Default New Tab!

0
1
11
Open comments for this post

2h 45m 33s logged

MAK-Tab is almost complete! ✨

(Hopefully last devlog before ship!)

MAK Tab, your new browser new-tab, is on its way to last Devlog! I added much more working features to make it work seamlessly as your new-tab replacement. I kept running into errors in JS for functions but most of them were typos. I also accidentally corrupted my git repo by doing commit without adding “-m” but now it is fixed.

Key Features Added✅:

  • Working Local Time Clock
  • Working local weather temperature (requires location permission)
  • Calculator in the Tools Box (triggered with the Tools Button)
  • NASA image description hidden until the button is clicked.

Next Goals🎯:

  • Make the Shortcut link editor work and add more shortcut buttons
  • Think to add some more things in toolbox (ideas in comments are welcome)
  • Implement use of Cookies to save the URL links and also to remember that location permission is already given (now everytime browser restarts, it asks for location again)

Please give me some recommendations and also some ideas for things in toolbox in the comments!

0
1
9
Open comments for this post

2h 9m 27s logged

Added Working NASA Image API:

MAK_Tab(your new browser new tab) is on the progress
I Finally made all the basic core functions working✨. Now by just adding things to that core structure, i can make this browser New Tab complete in no time!


Key Features added ✅:

  • NASA Image API Handler using JS
  • Exceptions handling for videos
  • Styling to set it as background Image
  • JS Structure is ready to add any new stuff along the way.
  • I used GoogleSans font to keep text cleaner.
  • Bootstrap is used for UI elements, though only a single blank div is developed yet. More things will come soon!

Next Steps 🎯:

  • Search Box
  • Place the NASA API text in a nice box
  • Add some tools to the Page.
  • Empower the website using AOS Animations.
0
1
19

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…