.png)
NASA API
By
@Sushmita
- 3 Devlogs
- 2 Total hours
im gonna fetch all nasa's data mwahaha...
Ship #1
I made a website that uses a NASA API to load information on space. The most challenging part was styling my website with CSS because changing the size of the image, trying to center the text, and other small tweaks caused results I didn’t intend. However, I’m most proud that I was able to finally get my website to look how I want it to, and that I have ideas on how to improve it on my next ship.
.png)
Devlog #3: Styling
I added basic styling by following step 6 of the guide. I had trouble making the zig-zag lines because I was indecisive and didn’t want to make the points by hand. Like the guide suggested, I tried using https://bennettfeely.com/clippy/, but it didn’t fit what I wanted, so I generated the the points using AI. The rest of the styling was done by hand. I added two fonts from Google, Black Ops One and Noto Sans Mono. My next step is to make the date picker functional.
.png)
Devlog #2: Loading NASA’s Data
This devlog is all from part 4 of the guide. I learned more about JavaScript and used it to load an image and fun fact/explanation. I used a conditional statement to check what data type the media was (I checked for video and image using the guide and iframe/Youtube videos as the challenge note) and added basic error handling to show the error message on screen. The next step is to start styling with CSS (because myy website lowkey looks like a chud right now lol)
.png)
Devlog #1: Setting Up
I learned how to set up Node.js and Vite! The guide taught me about how APIs worked and how to keep them private using a .env and .gitignore file. I learned how to set up a Vite development server in my terminal (which is similar to Live Server extensions on VS Code/GitHub Codespaces). I had an error when deploying my project to GitHub Pages, but after rereading the guide I realized I missed the part that said to delete everything in src/main.js and src/style.css as good dev practice.
.png)