Skip to content
Submitted over 3 years ago

Coding Bootcamp Testimonials Slider

Luis•270
@luibernip
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Coding bootcamp testimonials slider
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hi community!

Hope you are having a great day and thank you for helping me in my coding road. I have 2 questions:

  1. Can I increase font size depending on screen width without the use of media queries? I used media queries in this project but I don't find it that usefull if the project is much larger.

  2. Do you think my JS approach was alright or is there a way to make it cleaner and still scalable?

Once again thank you for your help in my harsh but fun coding road.

Community feedback

  • Jonathan•370
    @crolettePosted over 3 years ago

    Hi ! First : Nice job ! I just submitted my solution to this challenge too : https://github.com/crolette/coding-bootcamp-testimonials-slider https://www.frontendmentor.io/challenges/coding-bootcamp-testimonials-slider-4FNyLA8JL/hub/testimonials-slider-with-javascript-lFM7cori6

    I had a look to your Javascript, I am definitely not an expert, but I think you could have done it a little bit easier. Why do you toggle an active class on the testimonial ? What is the slideOut function for ?

    0
    Luis•270
    @luibernipPosted over 3 years ago

    Hello @crolette, thank you for passing by my solution. I'm pretty new in the coding world so any advise will be very kindly appreciated.

    1. The slideOut function was added in order to use animations to text and image when the transition between users was applied. As I finally didn't used any animations I just removed that function in the latest push.

    2. Toggle and active class was copied from another project I saw online but as you pointed out it has no use in my project. Once agin, this function was removed from the project.

    Thank you for pointing both things out and making my code cleaner. Now the only functions left are displayUser, prevSlide, nextSlide. The rest of the code was not used or just redundant so it was removed.

    0
  • John Rey Faciolan•220
    @juani2Posted over 3 years ago

    Hi there!

    I can only give give an answer to your first question. For responsive font size without using media query, you can leverage the clamp() function together with vw units.

    say for example you want your font size to scale up relative to viewport from 16px to 24px. You can use:

    font-size: clamp(16px,4.26vw,24px)

    this way your font size will scale starting from 16px (on 375px viewport width) and will grow all the way up-to 24px.

    I used this technique on my Clipboard Landing Page solution. You can check it out here:

    https://www.frontendmentor.io/solutions/responsive-fonts-and-spacing-vanilla-css-using-sass-5YNak8g2h

    hope this helps.

    0
    Luis•270
    @luibernipPosted over 3 years ago

    Thank you @juani2 for your advise!! I will study and try this function in my next submits! With your solution as an initial guide I will be able to apply this easier.

    Thank you for your great advise and taking the time helping me.

    0

Please log in to post a comment

Log in with GitHub

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