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

Simple Testimonials Slider With JS

P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

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

Reports

Accessibility report (0)

Our reporter did not find any issues in this project! πŸŽ‰

ApplePieGiraffe’s questions for the community

Hey, everybody! πŸ‘‹

This was my first challenge in which I actually had to write more than a few lines of JS. πŸ˜† My solution works (as far as I know) but IDK about my JS... I'd love some feedback, of course, to see how I've done. 😊

I also added a subtle floating animation to the image just to keep things interesting!

Happy coding! πŸ˜„

EDIT: An issue I'm aware of is that there's this weird glitch where the background of the buttons on the page flickers or turns transparent when clicked on in Safari (because of a transform I added to their active state, I think). I added one or two properties that seem to take the flickering away, but I'm still unsure of how I can completely solve this glitch (other than, perhaps, getting rid of the transform completely).

Community feedback

Arturo Simonβ€’ 1,695

@artimys

Posted

Really cool solution. Animation is subtle and not in your face. It complements the page.

In terms of JS using a boolean to switch between 2 slides is very simple and I don't think I would change it since this design only has 2 slides. It even creates the illusion that the slides start over when at the end. To scale more than 2 slides definitely switch from boolean to a counter variable method.

My only tip would be to organize the slide data into js objects and reference them appropriately.

let slide1 = { authorName: 'John Tarkpor', authorTitle: '...', imgPath: '...', review: '...' }
let slide2 = { authorName: 'Tanya Sinclair', authorTitle: '...', imgPath: '...', review: '...' }

slide1.authorName

Keep on Javascripting!!

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@artimys

Thank you for your feedback!

I was wondering if I might somehow be able to use objects in case I was working on a project that involved more than simply two slides. Your tip helps a lot! 😊

1

P
Anna Leighβ€’ 5,135

@brasspetals

Posted

Excellent job! πŸ™Œ It seems whatever you did for the Safari glitch worked, because it looks just fine when I tested it. πŸ‘ Wish I could help you with the JS, but I'm still learning that myself.

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@brasspetals

Thanks for the feedback and the browser testing! πŸ˜†

0

Sourabh Singhβ€’ 165

@6ixline

Posted

Your solution is so perfect! Nice Job

1


P
ApplePieGiraffeβ€’ 30,105

@ApplePieGiraffe

Posted

@Devsourabh

Thank you!

1

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!