
Hosted Project
https://js-beginners.github.io/testimonial-project/Github Source Files
https://github.com/JS-Beginners/testimonial-projectJavaScript 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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- Add a link to your finished project below!
What You Should See
- A default image should be displayed when you load the page.
- When you click the “left” button, one of five images should display, all the way until each of the five images display in sequence.
- Repeat step 2 for the “right” button.
- 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
Thanks bro..
These projects, useful in get confidences in myself
Took me a while as I decided to strip the repo from all the bootstrap and start from scratch. Only left image and text content.
I’m actually learning React but felt I want to do some more vanillas js projects in between. This approach turned out to be a great idea as I was able to pick up fair a few tricks. I know things are easier with bootstrap but it just seems so bloated while you can achieve the same fairly quick with simple css.
Here my finished project :
https://aaron-storm.github.io/Testimonials-Mini-Project/