Artemis Hub
- 8 Devlogs
- 25 Total hours
A website providing centralized information on the Artemis Program.
A website providing centralized information on the Artemis Program.
This is the first devlog that’s formatted nicely, I’ve been writing them on my phone and for some reason it doesn’t format there at all just displays as a large paragraph. But I’m writing this one on a computer allowing me to format paragraphs and headings.
I’ve been working on the Artemis II page, I’m not quite finished but got the history of it and the preperations which explains the stacking timeline and the heatshield issue.
I added a timeline to the Artemis I page which you can see in the demo link. It shows major events that happened from stacking to reentry. Another thing I did was update the status of Artemis III below that countdown banner.
Hello It’s been a little while since my last devlog but I plan to make them more frequently. This is my first log sincemy first shipment and Ive been spending thelasst 5 hours trying to implement the feedback I got. 1. Someone said it would be nice to see some facts about the astronauts, so I did something like that. I made an array that displays a random fact about the missions every time the page loads. This one took me a while to do because I was running into an issue where the Artemis I facts would display but not the subsequent ones. I went onto Stack Overflow and problem is resolved. 2. Someone said it would be nice to read texts about the missions rather thaan rely on videos because some people have different preferences for how they learn information. So what I did is created a series of dropdowns on the very bottom that tells you information aout the mission. I chose a dropdown format so they dont take up as much space on the page if its not being read.
During this time, I have embedded two NASA simulations into the website for visualization. You can fine them by going to the Artemis II page and going to the moon base page under “Explore”. I also embedded some YouTube videos to #1 let people understand the idea of the Artemis Program and CLPS who aren’t familiar, and #2 you don’t have to search for multiple YouTube videos potentially on different channels. They all are here. And honestly, when you’re navigating a website, it’s more convenient to watch an embedded video than navigate to YouTube. The last thing I worked on a little bit was making the moon base section more mobile responsive. Still looks a little off, but better than it was before.
Quite afew things have been added since my first devlog. So far I’ve worked a little bit on responsive design to make it more viewable on mobile. I also created a little bubble menu which allows you to transition between Hubs. I created a moon basepage which will provide centralized infirmation on our moon base plans specifically. I’m currently inn the process of implementing some of the simulations NASA created within my website through embedding.
I did quite a few things during this 6 hours. First off, I moved the countdown to the top, andit sticks to the top. Secondly, I added a timeline to visually see each launch. The timeline I used is called JSTimrline which ises a spreadsheet you can embed to add a timeline. They also leave the option for you to create a JSON file ehich gives you more styling options. But I didn’t opt into that. Last thing, I’m leaarning how to use api’s. What you can see in the console is the bio for Cristina Koch provided by Launch Library II. I plan to create a bio for eaach of these astronauts only using the api, if the contents of the api change the web page should change automatically. Although I’m limited to 15 requests per hour which is annoying.
I figured out how to make a countdown timer with JavaScript. This will count down the time left until the next Artemis launch. I also included a little tour of the website in the video.
In the video I wait fir about 20 seconds to see that number hit 0. You can skip about 20 seconds if you don’t want to wait for that. Then the bottom of the countdown I will input the status of the Artemis mission. I don’t spend a whole lot of time with JavaScript which is why it took me 2 hours to do. Most of my time was figuring out the milliseconds to years, months, days, etc. I wanted it to show 2 days and 4 hours instead of something like 4000 hours.
Another thing included in the video is a tour of some of my code.
Let me know if you have any feedback.
I’m creating a website that will provide centralized information about the Artemis Program. Demo is linked in the project for you to try out.
I still need to make the website more responsive.
What I did today was make the landing page for this website. This so far will include Artemis livestreams, videos, and information on specific missions.
Deploying this on Github was a big pain because I needed to restructure the entire website directory, so GitHub could find my index.html file, stylesheet, and images.
Let me know if you have any feedback, I’m probably going to make the carousels smaller.