Blog

Hey guys in this post, we will create a simple javascript testimonials application. The project is live on the web.

Topics covered

This application involves the following topics –

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

Complete source code

The below image shows you the project structure –

Add styles to the application

Create a main.css file and add the following content –

.max-height{
 min-height: 100vh;
 background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url('../img/questionBcg.jpeg')center/cover no-repeat fixed;
}
.title-heading{
 color:#f15025;
}
.title-subheading{
 color: white;
}
.customer-card{
 background: transparent!important;
 color:white;
 border:0.05rem solid white;
 padding-bottom: 1rem;
 padding-left: 1rem;
 padding-right: 1rem;
 position: relative;
}
.img-card{
 border-radius: 50%;
 margin-bottom: 1rem;
 margin-top: -3rem;
}
.star-icon{
 color: #f15025;
}
.quote-icon{
 font-size: 2rem;
 color: #f15025;
}
.prevBtn,.nextBtn{
 font-size: 1.5rem;
 padding: 0.1rem;
 color:#f15025;
 border:0.1rem solid #f15025;
 display: inline-block;
 position: absolute;
 padding: 0.4rem;
 border-radius: 50%;
 transition: all 1s ease-in-out;
}
.prevBtn:hover{
background: #f15025;
color: white;

}
.nextBtn:hover{
background: #f15025;
color: white;

}
.prevBtn{
 top: 50%;
 left: 0;
 transform: translate(-120%,-50%);
}
.nextBtn{
 top: 50%;
 right: 0;
 transform: translate(120%,-50%);
}

Add scripts to the application

Create an app.js file and add the following content –

(function(){
    const customerImage = document.querySelector('#customer-img')
    const customerName = document.querySelector('#customer-name')
    const customerText = document.querySelector('#customer-text')
    const buttons = document.querySelectorAll('.btn')
    let index = 0
    const customers = []

    //Create a new customer using a customer constructor
    
    //Customer Constructor
    function Customer(img, name, text) {
        this.img = img
        this.name = name
        this.text = text
    }

    //Create new customer using the constructor function

    function createCustomer(img, name, text) {

        let fullImg = `./img/customer-${img}.jpg`
        let customer = new Customer(fullImg, name, text)

        customers.push(customer)
    }

    
    createCustomer(0, 'John', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis neque reprehenderit laborum, corporis explicabo assumenda. Porro impedit consectetur animi, reprehenderit recusandae sapiente at aliquam reiciendis modi ipsam rerum suscipit distinctio?')
    createCustomer(1, 'Sandy', 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock')
    createCustomer(2, 'Amy', 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don\'t look even slightly believable.')
    createCustomer(3, 'Tyrell', 'If you are going to use a passage of Lorem Ipsum, you need to be sure there isn\'t anything embarrassing hidden in the middle of text.')
    createCustomer(4, 'Wanda', 'Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.')
    

    buttons.forEach(function(button){
        button.addEventListener('click', function(e){
            if (e.target.parentElement.classList.contains('prevBtn')){
               if(index === 0){
                    index = customers.length
               }
               index--
               customerImage.src = customers[index].img
               customerName.textContent = customers[index].name
               customerText.textContent = customers[index].text
            }
            if (e.target.parentElement.classList.contains('nextBtn')){
                index++
                if(index === customers.length){
                     index = 0
                }
                customerImage.src = customers[index].img
                customerName.textContent = customers[index].name
                customerText.textContent = customers[index].text
             }
        })
    })
    
})()

Add HTML to the application

Create an index.html and add the following content –

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <!-- bootstrap css -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <!-- main css -->
 <link rel="stylesheet" href="css/main.css">
 <!-- google fonts -->
 <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">

 <!-- font awesome -->
 <script src="js/all.js"></script>
 <title>Starter Template</title>
 <style>
 </style>
</head>

<body>

 <div class="container-fluid">
  <div class="row max-height align-items-center">
   <!-- col -->
   <div class="col-10 mx-auto col-md-6">
    <div class="row">
     <div class="col text-center my-5">
      <h4 class="title-heading text-uppercase">client</h4>
      <h1 class="title-subheading text-uppercase">testimonials</h1>
     </div>
    </div>

    <div class="card my-5 text-center customer-card ">
     <img src="img/customer-0.jpg" width="150" id="customer-img" class="img-card mx-auto" alt="">
     <h4 id="customer-name" class="text-uppercase">customer name</h4>
     <div class="review-icons my-2">
      <span class="star-icon">
       <i class="fas fa-star"></i>
      </span>
      <span class="star-icon">
       <i class="fas fa-star"></i>
      </span>
      <span class="star-icon">
       <i class="fas fa-star"></i>
      </span>
      <span class="star-icon">
       <i class="fas fa-star"></i>
      </span>
      <span class="star-icon">
       <i class="fas fa-star-half"></i>
      </span>
     </div>
     <p id="customer-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam sit voluptatum illo? Quae fugiat
      aspernatur harum aperiam, quis eos officia.</p>
     <span class="quote-icon">
      <i class="fas fa-quote-left"></i>
     </span>
     <a href="#" class="btn prevBtn"><i class="fas fa-chevron-left"></i></a>
     <a href="#" class="btn nextBtn"><i class="fas fa-chevron-right"></i></a>
    </div>
   </div>
   <!-- end of col -->
  </div>
 </div>



 <!-- jquery -->
 <script src="js/jquery-3.3.1.min.js"></script>
 <!-- bootstrap js -->
 <script src="js/bootstrap.bundle.min.js"></script>
 <!-- script js -->
 <script src="js/app.js"></script>
</body>

</html>

Note: Make sure the download the bootstrap.css, bootstrap.js, and jquery.js library from the internet add them to the respective folders. You can download the images from the Github repository.

Download the complete source code from github repository