Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive coding bootcamp testimonials slider using HTML - CSS - JS

Giovanni 40

@Giovnni

Desktop design screenshot for the Coding bootcamp testimonials slider coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I can't figure out how to get ride of the text layering. I used the text ID to gave it a hidden visibility or a none display but after that it appears that the text ID properties override the new properties and it don't show up at all

Community feedback

@sankaragomathym

Posted

Hey Giovanni! I guess you have complicated your code. Just keep it simple. Have 2 containers A and B (each inclusive of image, text, name). On initial load, let B have 'display:none'. In JS all you have to do is toggle displays of A and B based on ID or whatever selector you use.

The above is fine since there are only 2 testimonials. But when we have to deal with more number, instead of having containers for each testimonial, we can simply have one container in HTML and the content stored in JSON format. When slider is clicked, just fill in the corresponding content using JS.

Hope this helps.. You can refer my code if needed.

2

Giovanni 40

@Giovnni

Posted

@sankaragomathym Hello Sankara !

Thanks for your feedback, I had a look on your code so I could have an idea about how to do it in an efficient and easier way. It's very clever to use JSON format to store the content ! Since I'm not familiar with this format I haven't though about using it but like you said, on a bigger project it's mandatory to keep the code clean and not overloaded. I will definitely use this solution whenever I come across similar situation and will update the project ! :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord