@EndLess9

Devlog #3
With a little bit of javascript I made the search bar functional, you can see me using it in the GIF attached below.

I also added a new feature that shows the time and date at the top left of the screen.

I also created the ReadME for this project.

Devlog #2:

Made a section under the shortcuts for the NASA science stuff about Eclipse paid. Including its picture and a paragraph. I also added video compatibility so if NASA releases a video my site can load it.

I also set up the vite config.

Then I deployed the site on github pages url: https://endlessdude.github.io/SimpleTab/

Devlog #1

• I created the search bar using html and css. The search bar isnt functional yet so I haven’t used any javascript.

• I created a place under the search bar for shortcuts. I also only used html and css for this since js wasn’t needed. By clicking any of the 4 icons you are redirected to the application in a new tab.

• I also set up the .env with the nasa api’s and used java script to get information through the api’s, but I haven’t really made anything using it in my tab.

Devlog #3Changed the body’s color to black, and the header’s color to red instead of cyan.1. Nav bar:- Increased height- The Nav bar is now white, the opened page will appear as red and the ones that aren’t opened will be black2. Home:Added 2 bigger buttons that lead the user to the about me or projects page.3. About me:Here I wrote my introduction and added pictures of video games, animes, and f1 drivers that I like.4. Projects:Here I added hyper linked images of some of my programing projects.5. Readme:I wrote a basic readme for my repo.

Devlog #2

I haven’t done much work in the website yet, but after about 30 minutes I figured out how to create separate pages for each href in my project.

How I did it:
I used some js to comepletely hide the sections for the hrefs while they weren’t selected in the nav bar.

I also added some css to make the selected button look darker to show that it’s selected.

Devlog #1:

This is the first time I’m making a website from scratch without AI or video tutorials so it took me a while to create a simple heading for my website and the nav bar.

Here is what I did to the nav bar’s buttons:

• text color: white
• bold
• un-underlined
• added a border radius of 7px to give it curvey edges
• changed the background to brown
• added a padding of 5px

nav bar:

• vertically centered it
• horizontally aligned it to the right
• added a gap of 40px between each href

Heading:

• gave it a height of 40px
• gave it a background color of bisque

Devlog #3

I added 2 new features and wrote my readme.

Feature #1: Orange Keys
By checking off this check-box the white keys in the piano simply become orange. I did this by creating new css styling for the orange keys, created a check-box using html, and then used a event listener in JS to switch the white keys css styling with the orange keys.

Feature #2: Trial Song
For this feature I basically created a box above the piano with the notes for the song: Mary had a little lamb. Instead of using musical notes I used the letters on the piano keys so everyone can easily play it.

Devlog #2:

Phase 1:
In phase one I created the piano keys using css. Then I used html to reverse the gradient of the piano keys to make it look like they are pressed. Then I used html again to write letters on the keys. These letters will later be used to play the piano though your computer’s keyboard.

Phase 2:
In phase 2 I added the notes for the keys of the piano. I added the data set for each key in html which corresponds to the letter of each key. Then using javascript the corresponding sound will be played when the key is clicked using the cursor.

Phase 3:
In phase 3 I added event listeners in my javascript file which play the piano’s notes when you press letters on your keyboard. I also added a 150ms cool down which untoggles the active piano keys, without this the piano keys look so they are pressed down even after releasing the key.

Devlog #1

I used html and css to create the top part of the piano which shows the header(Name of the Project), a slider which controls the volume, and a sliding checkbox that shows/hides the letters on the piano keys.

Currently the letters for the piano keys are in the top part but soon when the piano keys are made they will be shown individually on the keys.

Devlog #15

Finally included details about the new databases and new apps since my last update to my ReadMe.

Devlog #14

• Added a 10 second video of f1 cars that transitions into the start os screen.
• Reworked the color scheme of the windows, header, countdown, start os screen, select time format screen. This was done to make the OS feel modern and clean.
• Changed the position of the buttons in the windows and make them size adjustable.
• Added a rectangular task bar with curved edges.

Devlog #13

New databases:

• constructors.json
• drivers.json
• season.json
• teams.json
• laprecords.json

New Apps:

• Drivers Standings
  A table of the drivers standings in the 2026 f1 season.
  Database used: drivers.json

• Constructor Standings
  A table of the constructors standings
  Database used: constructors.json

• Lap Records
  An app that shows information about the lap record at each track.
  Database used: laprecords.json

• F1 Calendar
  An app that shows the entire f1 calendar for 2026. Previously a similar app just showed an image, but this app uses a database to show accurate information.
  Database used: season.json

• F1 Teams
  An app that shows information about each F1 team.
  Database used: teams.json

constructors.json:
This database stores the position number, team name, and how many points every team has so far this F1 season.

drivers.json:
This database stores the position, name, country, team, and points for every driver.

season.json:
This database stores values for the following: round, country, city, month, days, flag, circuitMap. Round is the order of which f1 race weekends take place 1-24. Country is obviously the country the race weekend will take place. City is the city the race track is located. Month is the month the race weekend takes place, the days are the days the race weekend takes place, race weekends last 3 days. Day 1: practice 1 and 2, Day 2: practice 3 and quali, Day 3: grand prix. The value for flag and circuitMap are the path to the images for the country’s flag’s image and the circuit’s image.

teams.json:
This database contains values for the team’s name, team principal’s name, drivers names, the engine manufacturer, the car’s name, and paths to the logo and cars images.

laprecords.json:
This database contains information about the lap records for each track on the F1 calendar. It has values for: round #, race name, circuit, track length, lap record time, driver, team, year, image of the circuit, image of the country’s flag where the track is located.

Devlog #6:

• Change the entire database from SQLite to PostgreSQL for deployment purposes
• Deployed the app using Neon + Render
• Please note that this web service is using the Render’s free plan which means that due to inactivity their SERVERS GO TO SLEEP please be patient and REFRESH your screen! 
• Finally created the ReadME.md

Devlog #5
After users are logged into their account, they can go to the home page and begin to use the notes application.

Their notes are stored in a database specific to their account so their data stays safe. These notes can simply be deleted by clicking the ‘x’ button.

When a new note is added a notification appears at the top saying “Note Added!”.

Once the user logs out they cannot access the home page. This way notes cannot be viewed/changed without proper authentication.

Devlog #4

Login/Signup/Logout has been setup.

When a user Signs up a database.db is created to store the user’s stuff. And after signing up they are automatically logged in and redirected to the home page. The home page is only available once the user has been logged in.

If you already have an account you can login and after doing so you will be redirected to the home page.

If the user clicks logout the are sent back to the login page and they must login to access the home page.

Hashing:
When the user creates/enters the password it is hashed using SHA-256. Imported from werkzeug.security

Sign up page’s constraints:

• If the email entered already has an account the new user will not be able to sign up with that email.
• The email must be greated than 4 characters.
• The first name must have 1 character
• The first password entered must match the password entered under “confirm password”
• The password must be atleast 7 characters