Battery Countdown (See How Long Before Your Battery Dies!)

I made a software that tells you how much time you have got before your battery dies! Silly? I know right!! This project is for the silly inventions contest. This project is easily accessed with an assigned keyboard shortcut: (option+control+1). Once you launch it a pop-up widget will appear, as shown in the thumbnail above!

The Software will detect if the usage is intense and therefore set the remaining battery time accordingly. It changes colors and does all that fun stuff!!

If you would like the software then i would be more than happy to send it to you! If you like a challenge and whant to make it on your own i have included all the steps, trials and errors, pictures, and videos in the planning pdf attached above.

Thank you! and Have Fun!!

SUPPLIES:

-Instructables

-MacBook Pro

-Canva

-Google

-Pen

-Micro

-Pages

-iMovie

-Terminal

-Visual Studio

For the first step of course you have to plan out everything to make sure it all works out. To do this i used Micro free online whiteboard (Find the Link to it in the supplies). Attached is the Pdf for the planning whiteboard.

Ok for the next step you need to find something to let you read the battery sensors of your mac (you cant do this using Terminal) so i used Visual Studio. You can see the above photos of the trial and error and both separate platforms.

So we know that Terminal wont work, above is the failed Terminal attempt. Now we need to write the code for the Battery Countdown Pop-Up in Visual Studio. I decided to use the following different codes to do the different tasks:

1. Index: Html
2. Script: Js
3. Style: Css

See the next steps for the different codes (must use all of them to get Pop-Up to work).

Here Is the Index Html code, which is the foundation of the whole project. This is the final working result, see the planning pdf for the trials and errors.

Here Is the Script Js code, which is the structure of the project. This is the final working result, see the planning pdf for the trials and errors.

Here Is the Style Css code, which is the looks of this project. This is the final result, see the planning pdf for the trials and errors.

Now all you have to do is put all of these codes into on file, and link that file to open a chrome browser throught visual studio to view your result!