Space Tourism Site - HTML, CSS, and Vanilla JS with Responsive Layout
Design comparison
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-masolehPosted about 2 years ago
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 helpful1@HarmoniaCodesPosted about 2 years ago@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-masolehPosted about 2 years ago@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
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