Hey everyone! Decided to make this song on Strudel and add it as a project here! It doesn’t have a name yet - just Song#1 for now. Maybe it will stay that way or maybe I’ll get creative. I usually do web dev so this is definitely new to me but it’s really just a project for fun more than anything else.
Ready to Ship!!
I haven’t done much since the last devlog, just some random fixes, polishing whatever. But I’ve added a bunch since my last ship that I’ll talk more about in my ship itself!
I added some statistics on a page! It’s not much but it was fun to make and I like it. There’s 6 different charts that each show different data. I think it’s cool to see and fits in with the “discover” theme. Currently I’m working on making it work well on mobile because rn it looks like it needs fixing. When I’m done I think I’m ready to ship!
Introducing Favorites! Used local storage so I’m not taking anyone’s info lol. It allows you to heart any planet and filter to favorites on the discover page. This way you can keep track of the planets you like! I like finding the matches of planets I like using the quiz then favoriting those!
I’ve been playing around with the locator page. For now I have it like this, where the info is entered and it tells the user where (better CSS than last devlog in my opinion). I don’t know if I can make it into a whole map thing mostly because I would probably use SVG but I don’t really have any experience with that. Anyway, if I have tons of extra time I might try that. For now, I’m just fixing the styling on mobile.
So - another (not done) new feature. This one is kind of different. I found ra and dec values in the NASA archive I’ve been using and came up with this idea. My original idea was to make a map of the exoplanet and then you could search for one and it would find it on the map. There are sites that do same type of thing like Stellarium or the app Night Sky. I might do that or something like that later but this is what I have for now. It’s basically the math and JS that the map would use, just not made into a map. I’m hoping to make this more sophisticated than it currently is but I’m not sure quite how far I’ll be able to take it. I hope that the end product for this feature turns out well.
Edit: When I say map I mean like a 360 view of the night sky from the ground type thing (you can look at Stellarium to understand what I mean if you are curious).
I added a print button on the planet page! Next to the side navigation button, there’s a button with the print symbol that allows the user to print that planet’s page. Lot of styling went into it to figure out how to get it to show the background image and colors and stuff but overall it was pretty simple to make.
Added a navigation side bar menu! Not in love with the styling, so maybe I will change up the CSS to make it prettier. But overall it works fully and is much more helpful than navigating through the site using home and back buttons.
I added a glossary. When my sister was looking at my project I realized there’s a lot of terms some people might not know so I made a page explaining those terms. I also have been keeping my project updated to work on mobile.
Guys I need help. I have a question and I can’t figure out what I should do. I have a whole bunch of files for my website I’ve been making and I don’t know how I’m supposed to organize my files. You may be thinking, this isn’t really a problem. Well I guess you’re right in the sense that it doesn’t affect how my website works. BUT it’s like lowkey making me anxious because my file list keeps growing and whatnot. I tried to start sorting the files. I have folders for the JS files, the JSON files, and the images. Do I keep this pattern and make a folder for the html files and another for css files? I guess my real question is this: Is there a conventional way of organizing them that I’m supposed to know? If not, is there like a best way to do it?
So I was thinking about like what I could add to my site and came up with some fun ideas. First, I added a formula (from NASA’s website) to calculate the ESI (Earth Similarity Index) of each exoplanet. Then, I made certain exoplanets “medalists”. Basically if a exoplanet is like unique in a quantitative way (with the data I’m already using) then it is awarded a medal. Some examples are largest/smallest mass, highest/lowest ESI Score, etc. In total, right now, there are 11 exoplanets with medals (out of like 6,000 total). Then I added having a medal to the filters and connected it to a button on the home screen.
I APOLOGIZE FOR THE 18 COMMITS THAT ARE ALL FOR THE SAME THING. So I decided to style the site for mobile as well as laptop because it worked okay on mobile but was very zoomed out and stuff. So it’s not like I have vs code on my phone and there probably is an easier way but I didn’t want to figure out getting a live server on my phone so I kept changing the CSS, committing, checking it on my phone, and repeat. But hey - now it looks better for mobile!
Introducing Planet of the Day and some neat CSS changes! I added a planet of the day on the home page which is clickable just like the cards on the discover page. I also added skeleton loading states for the list of planets on the discover page. I noticed that it was consistently taking time to load and render the planets (not surprisingly) so I added it to make it feel more polished and less sharp. And yes, the screenshot of the loading states was timed so that I caught them on the screen before the planets appeared.
I added a new feature! A quiz that matches the user’s preferences with exoplanets. The user answers 5 questions and gets a collection of exoplanets that match those preferences!
Update - Changes Since My Ship
Photos!
As I mentioned in my last 2 devlogs, I changed the planets’ photos. I used to have a single blue planet that was on every planet’s page and that seemed boring, so I changed it. Most exoplanets don’t actually have photos, so I took a handful of photos and sorted the planets into types. Now, there is a photo for each type and the planet’s corresponding photo is on its planet page and its card in the discover page. I have a photo for each type: terrestrial, super-earth, Neptune-like, mini-Neptune, gas giant, and hot Jupiter. Mini-Neptunes and hot Jupiters are really just subsections of Neptune-like and gas giants, respectively, but I decided to give them their own photo anyways.
Random Planet Button!
I added a button right next to the filters that brings the user to a random planet page obeying the filters that they set. I thought it’s a fun little feature to make my site a bit more fun. Hopefully, I’ll be adding a couple other features too.
I made like some minor CSS changes to the filters and stuff. Barely noticeable but I think that little part looks better than before. Yay!
More to come!
So … I added the images to the discover page, which makes it less boring. The planets are sorted into 6 categories, each with a different photo. I also finally sorted my files. Yay! I wasn’t quite sure how I should organize them - like do I put css in one folder and html in another? So I left some unorganized for now.
A lot of people who reviewed my ship mentioned all the planet pages having the same image - which is totally fair. I felt the same way (and so did my sister), so I decided to do something about it. Most exoplanets just simply don’t have photos, so it’s not like I could put a photo of each planet. I decided to put different photos for different types of planets (terrestrial, super earth, neptune-like, gas giant). Hope you guys like it!
I’ve added two apps and wallpaper options! Now, there is a welcome tab, a quote generator, a JARVIS style terminal, and a calculator. The welcome tab plays the marvel intro, the quote generator rotates through >20 of the best marvel quotes, the terminal has around 10 commands, and the calculator, well, it’s a calculator. Using the terminal, there are 4 options for wallpapers (options 2 and 3 are my fav). I also made it so everything is fitting the same black and red vibe.
