/space-web-site

space web sit

Primary LanguageTypeScript

Frontend Mentor - Space tourism website solution

This is a 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 technology

Links

My process

I use vite-react, tailwind, redux-toolkit,lottie-react and react router dom

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Tailwind
  • ReduxToolKit
  • Lottie-react
  • React router dom
  • Mobile-first workflow
  • React - JS library

What I learned

I leant ReduxToolKIt

const destination = dataPage.destinations
const initialState:State = {
    planetName: destination[0].name,
    planetDescription : destination[0].description,
    planetImage : moonImage ,
    planetDistance: destination[0].distance,
    planetTravel: destination[0].travel,
    planetSelected: 0,
    crewSliderIndex:0,
    techSliderIndex:0,
    menu:false
}
export const slice  = createSlice({
    name:'space',
    initialState,
    reducers:{
        moon:(state)=>{
            state.planetDistance = destination[0].distance
            state.planetDescription = destination[0].description
            state.planetName = destination[0].name
            state.planetTravel = destination[0].travel
            state.planetImage = moonImage
            state.planetSelected = 0
        },
        mars:(state)=>{
            state.planetDistance = destination[1].distance
            state.planetDescription = destination[1].description
            state.planetName = destination[1].name
            state.planetTravel = destination[1].travel
            state.planetImage = marImage
            state.planetSelected = 1
        },
        europa:(state)=>{
            state.planetDistance = destination[2].distance
            state.planetDescription = destination[2].description
            state.planetName = destination[2].name
            state.planetTravel = destination[2].travel
            state.planetImage = europaImage
            state.planetSelected = 2
        },
        titan:(state)=>{
            state.planetDistance = destination[3].distance
            state.planetDescription = destination[3].description
            state.planetName = destination[3].name
            state.planetTravel = destination[3].travel
            state.planetImage = titanImage
            state.planetSelected = 3
        },
        crewScrollIndex:(state, payload:PayloadAction<number>)=>{
            state.crewSliderIndex = payload.payload
        },
        techScrollIndex:(state,index:PayloadAction<number>)=>{
            state.techSliderIndex = index.payload
        },
        handleMenu:(state,show:PayloadAction<boolean>)=>{
            state.menu = show.payload
        }
    }
})
 export const {moon,mars,europa,titan,crewScrollIndex,techScrollIndex,handleMenu} = slice.actions

 export default slice.reducer

Useful resources

Author