/space-tourism-website

Primary LanguageCSS

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

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Bootstrap
  • Mobile-first workflow
  • Vanilla Javascript

What I learned

I took up this challenge to practice my javascript skills and learn more, i learnt how to fetch data from a json folder and manipulate said data to be displayed on various pages.

I also learnt to loop through an array using the map() array method, and also used the eventlistener in my script and not my html as i usually did.

The code below is what i've learnt in code, haha.

fetch('../js/json/data.json')
  .then((Response) => {
    return Response.json();
  })

  .then((data) => {
    const { crew } = data;

    arrofData = [role, bio, dp, userName];

    arrofImg.forEach((member, index) => {
      member.addEventListener('click', (e) => {
        userName.innerHTML = crew[index].name.toUpperCase();
        bio.innerHTML = crew[index].bio;
        role.innerHTML = crew[index].role.toUpperCase();
        dp.src = crew[index].images.png;
        e.preventDefault();
      });
    });
  });

Continued development

I look forward to working more with Javascript and be able to implement and solve more problems with it

Useful resources

  • GOOGLE has helped me alot, through the different parts of this project

Author

Acknowledgments

Many thanks to my friend Micheal Nwogu, he was of great help during this project. Alongside the dev accountability group i belong to, they helped in easy they do not know. Also i also want to thank another friend of mine, Asah Victor for always pushing me in his own way unknowingly.