By
@brlin888
Creating a website for people to learn more about the solar system, a simple way to learn about the planets along with animations
@brlin888
on
Solar System Explorer
Hi all, this is my ship for Solar System Explorer! Solar System Explorer is an interactive educational website I created to help people learn more about our Solar System and where we are in space. The website features an animated Solar System with all eight planets orbiting the Sun, allowing users to click on individual planets to learn more about them. The project is built using HTML, CSS, and JavaScript, all written together in a single HTML file. In addition to the animation, I included controls to pause the planets, adjust their orbital speed, and toggle planet labels, as well as a planet index, an interactive quiz, and a Learn More section! Keep in mind this is my first website, and I learned all of this from scratch so it took me a long time…
The most challenging part of this project was making sure all the different components worked together while keeping the website organized and easy to use. Creating the orbital animation required positioning the Sun at the center and making each planet move along its own circular path. I also had to make sure that the controls actually affected the animation, that clicking on planets displayed the correct information, and that the quiz and navigation links worked properly. Another challenge was designing the website so that it looked visually appealing without making it too overwhelming, while also ensuring that the layout remained usable on smaller screens. Overall, testing each feature individually and then checking how everything worked together helped me gradually develop the website into a complete project.
One thing I am particularly proud of is turning learning into something people can explore interactively. I wanted users to be able to experiment with the animation, explore individual planets at their own pace, and test their knowledge through the quiz. The animation is not intended to represent the planets’ actual sizes, distances, or orbital speeds to scientific scale, but it provides a visual way to understand the basic arrangement of our Solar System.
If you want to test the project, simply open the website through its published GitHub Pages link in a browser or click “try project” here. Try clicking on different planets to read their information, using the pause button to stop and resume the animation, changing the speed, and toggling the labels on and off, etc. You can also explore the planet index, complete the quiz, and use the navigation bar to jump between sections of the website.
This pretty much sums up Solar System Explorer as a whole! I hope whoever tries it enjoys exploring our Solar System as much as I enjoyed building this project!
@brlin888
on
Solar System Explorer
20m logged
Hi everyone,
I know I said that the last devlog was going to be the last one, but I made some final edits to me code such as testing parts and ensuring the code looks pretty organized… I also ensured that the animation looked good and everything was functional so I am ready for shipping my project.
Look out for my ship!
@brlin888
on
Solar System Explorer
3h 20m 18s logged
Hi everyone!
Welcome back to Solar System Explorer!
Over the past few days, I have been working on this project continuously but didn’t have much time creating devlogs each day. With that said, I have been mostly working on adding functionality to the website such as adding animations for the solar system (I know it’s not accurate because planets don’t orbit in circles), which took me an extremely long time because I am not used using html.
Other than that, I also added a part where users can answer questions and change the speed of the animation. Overall, a pretty simple project and I am very proud of sharing this project with you all! I will probably be shipping it in a bit, so stay tuned for that!
Thank you for all of you that have been part of this journey!
@brlin888
on
Solar System Explorer
1h 51m 1s logged
Hi all,
This is Days 3, 4, 5 of solar system explorer. Over these couple of days, I mainly focused on getting the background stars to work, and started to add clickable buttons where users can click buttons to learn more about the planets. Here is summary of what I accomplished:
What worked: I made the planets interactive and created a system for displaying information about each planet.
Issue: The website needed a way to organize all of the planet information.
How I worked on it: I created a JavaScript object called planetData. Each planet stores its information inside the object. Clicking a planet calls the showPlanet() function.
Next goal: Create a planet index so users can select planets without having to find them in the animation.
@brlin888
on
Solar System Explorer
32m 44s logged
Hi all,
This is Day 2 on working on solar system explorer. Today I learned more about how to actually use HTML to format this website, I am learning fast. Here is the conclusion of todays session:
What worked:
I created the main structure of the website and added navigation
Issue:
The sections were only text and did not contain the actual educational parts yet
How I worked on it:
I used HTML sections and navigation links. CSS was used to organize the header and page
Next goal:
Create the actual Solar System visual
@brlin888
on
Solar System Explorer
18m 33s logged
Hi all,
Starting a new project today which is going to be called Solar System (Explorer)! Since I haven’t made a website using HTML before, today was really simple and just getting the basics going.
What worked:
I created the basic structure of the Solar System Explorer website using HTML.
Issue:
The website initially had no interactive features or solar system graphics.
How I worked on it:
I used HTML to create the page structure and CSS to control the background, text, and spacing.
Next goal:
Create the main website layout and navigation.
