By
@ronitserva
A cool styled website for you to view NASA's Picture of the day, but with an interesting surprise: view the NASA picture of the day from the day you were born.
I built a website that displays the NASA Astronomy Picture of the Day (unique for each day), but in a cool and stylish way and also a feature to view the Picture of the Day for the date you were born.
The mission guide was a very useful resource throughout the project however I used other sources to learn about a few different things that I needed to get my project working. Like I wanted a model to open up which will contain a form for collecting user’s birthdate once the button “Take me back…” was clicked. So I referred to google AI mode to help me do that. (especially because I wanted the modal to be centered).
This was a very special learning experience: I learned finally how to make interactive websites instead of just static HTML files.
Honestly, the difficult thing was to load every piece of code into my brain fresh every time I had to start a new code, because it’s difficult for me to write new code if I don’t understand what I previously wrote does. But here logic came to my aid where otherwise I would be intimidated seeing the complex code and trying to wrap my head around it.
I really want you to experience my website to the fullest, thus based on what I’ve observed I would recommend the following:
If the loading page doesn’t disappear or an error comes up, I request you to try to reload the page since the API sometimes takes too long and returns an error
Please try to click at the “Take me Back…” button at the bottom of page which will lead you to a dialog to enter your birthdate and from there you can view the Picture of the day on the date you were born.
Happy Review :)
59m 4s logged
I worked primarily on three things
getting a website deployment issue sorted (using Codex) due to a name mismatch in the local vite.config.js file and the remote github repo name.
Updating the README with complete project description, demo image, and website URL.
Finally the website is deployed at: here
1h 50m 3s logged
I just did re-implement the final feature for it to be more visually appealing, but another thing is that I observed that the website took more time to reload and even had a few failed attempts to load the APOD. IDK why it’s happening, if any of you might please lemme know.
Now I only have to complete the project info and ship it.
Here’s how the new feature looks:
1h 58m 24s logged
This took a little bit of time as I had to figure out how to add forms in HTML, how to connect them to my JS logic so that I can access their data, and write the event logic.
I was able to do it without using any tutorial just using Google AI mode and Copilot. (I didn’t use them to write code for me)
TLDR; added a small form you can fill out on the website to view the APOD for your birthdate.
btw here’s the APOD for my birthdate:
1h 36m 45s logged
I styled my website using clip-path: property and added custom fonts for the explanation as well as the title.
I then started the work on the feature and soon realized after a bit of experimenting I have to watch a JS learning tutorial to learn how to add forms/fields to my website and use the collected data.
1h 51m 32s logged
Majorly I worked on modifying main.js logic in order to handle occasional youtube video urls in the response and handle errors during the process using .error(...)
After that I worked on styling my website: adding pseudo-elements and styling them.
Now the website kinda looks like this:
1h 43m 10s logged
I implemented the logic to fetch APOD data from NASA api then convert it into a JS object and then display the Title, Image and Explanation of the APOD on the website.
Along the way I learnt to use the fetch(...) function, .then(...) methods and creating conditionals in JS as well as constructing strings with placeholders ${...}.
TLDR; I worked primarily on writing the logic of my website in main.js.
49m 27s logged
I am following the mission guide (Website Pulse) for this project.
TLDR; This session was about setting up Vite in the project and automating the deployment and build workflow
In the first session I worked on creating Vite in my project repo, setting up a remote github repo, and creating a deploy.yml file in the project root specifying the deployment workflow.
Now whenever I push to the main branch of the repo, the workflow will be automatically triggered and the website will be built and deployed live.
I also create and securely added the NASA API key in a .env file.
