Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Space Tourism Site - HTML, CSS, and Vanilla JS with Responsive Layout

Nick 160

@HarmoniaCodes

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I learned a LOT while completing this challenge! A few things that I could not figure out: How can I load content from the JSON file in a way that javascript can parse? How can I change the styling of the active tabs and dots once the content has been changed via javascript? How can I add animation effects to the tabs/dots content so that the loading of content is more elegant?

Community feedback

@sahand-masoleh

Posted

Hey Nick! Nice job!

First off, don't use in-line HTML event handlers (e.g. <button onclick="someFunction()" />), they are deprecated, see here. Use your JavaScript to listen for the click event and run the function that you want.

This also answers your last question I believe, inside that function toggle CSS classes with animations that you want for the desired elements. I hope I understood your question correctly.

As for loading data with JS, you normally use the fetch API to pull external data. But if your json is local and you're using a bundler, you can also import it like any other ES module.

Marked as helpful

1

Nick 160

@HarmoniaCodes

Posted

@sahand-masoleh Thank you so much for taking the time to review my code! Your feedback is very helpful. This is the first time I've tried to use Javascript, so I have a lot to learn. Thank you for giving me some areas to start with!

0

@sahand-masoleh

Posted

@HarmoniaCodes Oh wow, it's very brave of you to tackle a multi-page challenge as your first JS project. Kudos to you! But I would start with something easier. 😬

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord