Testimonials JavaScript Project

Hosted Project

https://js-beginners.github.io/testimonial-project/

Github Source Files

https://github.com/JS-Beginners/testimonial-project

JavaScript Used

• DOM Manipulation
• Control Structures
• Arrays
• Array.forEach()
• JavaScript CSS Manipulation
• eventListeners
• Immediately Invoked Function Expressions
• Object Constructors
• Event Bubbling

Project Description/Summary

This project seems to combines two of the previous completed projects. It involves pieces of the Background Image Slider JavaScript Project and the Random Quotes JavaScript Project.  This project can easily be completed using an array of objects, but John adds a bit of complexity (if you're a beginner) to the project by using a Constructor function.

New Things Learned or Refreshed

It was nice to see how Object Constructors are used in real projects. This project used a function that made a call to an Object Constructor. On the surface, it made the project a bit more complex than it had to be, but I now see the value of using a function to create a new instance an Object. This project also focused on selecting the parent element from the DOM to register the click element of a child element that contained a specific CSS class as opposed to selecting the button element.

Time to Code

This took about 20 minutes to code.

Lines of Code

This took me 59 lines of code.

Biggest Take Away(s)

Object Constructors are not bad once you learn how to use them in small projects. I'm glad John switched it up in his solution.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. Add a link to your finished project below!

What You Should See

1. A default image should be displayed when you load the page.
2. When you click the “left” button, one of five images should display, all the way until each of the five images display in sequence.
3. Repeat step 2 for the “right” button.
4. If the user continues to click the left or right button, the images should reset once it passes the first image in the array.

Need to see the video solution for this project?

Get John's JavaScript Tutorial and Projects Course