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

Responsive multi-page website using HTML, Sass/CSS, JS

#sass/scss
Marija 80

@Marija-Kov

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


Took upon this challenge as I was getting deeper into (vanilla) JS so naturally I enjoyed flexing my JS skills by creating as many elements as I could dynamically and organizing my code into modules. I was wondering if there was a significantly better practice (in plain JS) than what I've done in this project to display content using async functions and fetch-then chain in each of my .js files (destination.js, crew.js, technology.js in 'starter-code' folder -- apologies for not sensibly organizing all these files into separate folders). Thanks.

Community feedback

P
Vander Santos 1,750

@vanderms

Posted

Well done!

Your solution is very good and I loved it! My only tips are:

  1. A extension like prettier (or other code formatter) could improve the readability of your code. Sometimes, I found the identation of your js solution hard to read.

  2. Considering the risk of XSS atack, I wouldn't recommend using innerHTML, especially when the data is coming from the server. I probably didn't see all uses of innerHTML, but the cases that I saw you could replace it with the safer options innerText or textContent and the result would be the same.

  3. And your solution would be indeed more easy to understand if you had organized the files inside folders.

Keep up the good work!

Marked as helpful

1

Marija 80

@Marija-Kov

Posted

@vanderms Thanks a lot for the kind words and great tips!

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