Artemis Hub

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.