Skip to content
Submitted almost 3 years ago

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

Nick•160
@HarmoniaCodes
A solution to the Space tourism multi-page website challenge
Preview (opens in new tab)Code (opens in new tab)

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?

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Sahand Masoleh•1,210
    @sahand-masoleh

    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

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