Frontend Mentor - Coding bootcamp testimonials slider solution

This is a solution to the Coding bootcamp testimonials slider challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• Navigate the slider using either their mouse/trackpad or keyboard

Screenshot

Links

• Solution URL: (https://github.com/Deva-Mari/testimonial-slider)
• Live Site URL: (https://musical-rugelach-67f52c.netlify.app/)

My process

Built with

• Semantic HTML5 markup
• Mobile-first workflow
• Sass
• React - JS library
• Typescript

What I learned

• Practiced useState and useEffect

const [image, setImage] = useState("");
const [person, setPerson] = useState(0);
useEffect(() => {
  import(`./assets/${data[person].img}`).then((image) =>
    setImage(image.default)
  );
}, [person]);

• improved Layouting skills
• learned how to attach keydown Event to div

const keyPressHandler = (e: React.KeyboardEvent<HTMLDivElement>) => {
  if (e.code === "ArrowRight") {
    nextClickHandler();
  }
  if (e.code === "ArrowLeft") {
    prevClickHandler();
  }
};

Continued development

• improve box-shadow to get closer to design

Author

• Website - Deva Mari
• Frontend Mentor - @Deva-Mari
• GitHub- @Deva-Mari