/frontend-mentor-space

Explore Space. Frontend Mentor project. SPA using React, Tailwind CSS.

Primary LanguageJavaScript

Frontend Mentor - Space tourism website solution

This is my solution to the Space tourism website challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Home

Destination

Crew

Tech

Links

My process

Built with

  • HTML5, CSS
  • Mobile-first workflow
  • React
  • Tailwind
  • Framer Motion

What I learned

The first thing I learned was how to solve the white space issue when using height: 100vh. This has been an issue for me with most projects I have done.

Here is the issue that height: 100vh creates:

The fix is to use display flex, flex-direction column and height 100vh in the parent div. Then in the last child div use flex grow:1 and height auto.

Here is the code:

<div className="App flex flex-col h-screen">
      <div id='mainWrapper' className='flex justify-center h-auto grow bg-[url("/src/assets/home/background-home-mobile.jpg")] bg-cover pt-6 pb-12 bg-no-repeat mix-blend-screen'>

... well, fast forward a few days... and the above was not the solution. It helped, but I spent a few hours more customizing a javascript function to elminate the white space on all screen sizes. I think I have the solution now.

useEffect(()=>{
    // change the height
    let mainWrapper = document.getElementById("mainWrapper"); 
    let appOriginalHeight = document.getElementById('mainApp').clientHeight
    let mainWrapperHeight = mainWrapper.clientHeight
    
    if (appOriginalHeight < mainWrapperHeight) {
     let difference = mainWrapperHeight - appOriginalHeight
     document.getElementById('mainApp').style.height = appOriginalHeight + difference + 'px'
    } else if (appOriginalHeight >= mainWrapperHeight) {
     console.log('main O is less')
    }
  },[])

Basically the code takes note of the original height of the app div (content) then as clicks are made compares the app div height to the height of the main content div. Next it figures out the difference in height between the 2 divs. If the main content div is larger (in height) than the original height of the app div then the code adds the difference in px to the main app div. I did not figure out how to revert it. As it stands if a click is made on the destination links then the app height is expanded from then on out for any new link clicked. In the best world I would have it revert back to the original height that fits the content appropriately.

Continued development

See the last statement above.

Author