Devlog #3:
Previously the little guy have a pretty solid cylindrical shape and it looked fine, but I wanted to try something different…I used the conic tool and made it’s body wider right above the base. This makes it’s body look more dynamic. Although this was a very simple change it took be about 30 minutes of trial and error before I got it right.
Also…
This will likely be the last devlog for this project since all the modeling is basically done, all that’s left is to print it.
Body and Legs:
I scrapped my old technique. I adopted a new one where i create a normal rectangle and then I create a semi-circle on the top and bottom. Very similar to my old technique, but this time i only extrude the rectangle, and I use the revolve tool to create a sphere at the bottom and the top to give it a better look.
Eyes and backpack:
I also used the rectangle tool to sketch out the eyes and the backback and then I extruded it and used fillet to give it rounded edges. However, its still pretty basic as of now. Soon I will work more on them if needed or I might improve the body and legs.
I also removed a chunk from the bottom to make it flat for the among us character can sit on my table.
After many failed sketches and techniques I used the 1 rectangle + 2 3 point arc technique to make pill like shapes that I’m using to make the body and the legs. I also added a rectangle at the bottom to remove a part of the body to make it’s bottom flat. And for the legs I used the fillet tool at the correct proportions to make it round but also flat at the bottom.
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:
nav bar:
Heading:
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
Devlog #13
New databases:
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.