Frontend Mentor - Space tourism website solution

This is a solution to the Space tourism website challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for each of the website's pages depending on their device's screen size
• See hover states for all interactive elements on the page
• View each page and be able to toggle between the tabs to see new information

Screenshot

Links

• Solution URL: Click here
• Live Site URL: Click here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Bootstrap grid
• JavaScript

What I learned

When developing this Space tourism multi page website project, these new things I have learned.

-How to read current browser window URL and using that output how to initiate things in script.

if(window.location.href.indexOf("index") != -1){
    homeNavBtn.classList.add("nav-btn-active");
}
else if(window.location.href.indexOf("destination") != -1){
    destNavBtn.classList.add("nav-btn-active");
    homeNavBtn.classList.remove("nav-btn-active");
}
else if(window.location.href.indexOf("crew") != -1){
    crewNavBtn.classList.add("nav-btn-active");
    homeNavBtn.classList.remove("nav-btn-active");
}
else if(window.location.href.indexOf("tech") != -1){
    techNavBtn.classList.add("nav-btn-active");
    homeNavBtn.classList.remove("nav-btn-active");
}

---

-How to work with responsive breakpoints using JavaScript script.

techBtn1.addEventListener('click', changeImg1);
function changeImg1(){
    if (sWidth >= 1280){
        tecImage.style.backgroundImage = "url(/assets/technology/image-launch-vehicle-portrait.jpg)";
    }
    else if (sWidth >= 768){
        tecImage.style.backgroundImage = "url(/assets/technology/image-launch-vehicle-landscape.jpg)";
    }
    else if (sWidth >= 375){
        tecImage.style.backgroundImage = "url(/assets/technology/image-launch-vehicle-landscape.jpg)";
    }
}

---

-Most importantly, I learned using onload is a bad practise. Instead of using onload event, it is better to use load with addEventListner.

window.addEventListener('load',crewFunc);

Continued development

There are some multiple issues that I have faced constantly during this project. Those are,

-The browser console showing me some errors as below.

Uncaught TypeError: Cannot read properties of null (reading 'classList')

---

Uncaught TypeError: Cannot set properties of null (setting 'onclick')

Nevertheless, there are no any not working sections in the live site. So, I couldn't manage to find a way to resolve these issues. I am intend to find the solutions for these issues in the future projects.

Useful resources

• Stackoverflow - This helped me for many issues I have faced during the development of the project.
• W3Schools - Same as Stackoverflow , this helped me to understand some fundamental things about CSS and JS.

Author

• Website - SLGPLAY
• Frontend Mentor - @T-Induwara
• Github - @T-Induwara
• LinkedIn - @t-induwara

Acknowledgments

I want to give thanks specially to Web Dev Simplified YouTube channel for helping me to get some inspiration to develop the navbar of this project.