Amazing Experience with JavaScript: A Testimonial

A testimonial in JS refers to a written or spoken statement from a user or customer of JavaScript that expresses their positive experience with the language. Testimonials are often used to showcase the benefits and features of JavaScript and to convince others to use it for their own projects.

A JavaScript testimonial may discuss the ease of use of the language, the ability to create dynamic and interactive websites, the flexibility of the frontend and backend development, the speed and performance of JavaScript applications, or the wide range of frameworks and libraries available to developers.

Testimonials can be featured on a website, in marketing materials, or on social media to help promote the use of JavaScript and to provide social proof to potential users. They can be an effective way to demonstrate the value and effectiveness of the language and to encourage others to try it out for their own projects.

Here is an example code snippet that demonstrates this approach:

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testimonial Slider</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  </head>
  <body>
    <div class="container">
      <i class="fa fa-chevron-circle-left arrow" id="btn-left"></i>
      <h2>Testimonial <span>Design</span></h2>
      <div class="img-box">
        <div class="pic">
          <img src="https://randomuser.me/api/portraits/men/9.jpg" alt="User" id="pic" />
        </div>
        <div class="profile">
          <h4 id="name">John Doe</h4>
          <p id="role">Web Developer</p>
        </div>
      </div>
      <div class="text">
        <p id="text">
          <i class="fa fa-quote-left"></i> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque maxime quasi tempore sint minima? Aspernatur quia dignissimos ut aliquid veniam, possimus necessitatibus distinctio, optio ipsam eligendi, aperiam vero repellendus explicabo.
          <i class="fa fa-quote-right"></i>
        </p>
      </div>
      <i class="fa fa-chevron-circle-right arrow" id="btn-right"></i>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

js/script.js

const data = [
  {
    id: 1,
    name: "Thomas",
    job: "Graphic Designer",
    img: "https://randomuser.me/api/portraits/men/1.jpg",
    text: "I am extremely satisfied with the software services provided by this company. Their team is highly skilled, professional, and efficient. They delivered a top-notch solution that exceeded my expectations. I highly recommend their services to anyone looking for reliable and innovative software development",
  },
  {
    id: 2,
    name: "Jacob",
    job: "Web Designer",
    img: "https://randomuser.me/api/portraits/men/7.jpg",
    text: "I have been using the software developed by this company for a few months now, and I must say that it has been a game-changer for my business. Its user-friendly, robust and highly customizable, making it an ideal solution for my needs. The team has been responsive and supportive throughout the development process, and Im glad I chose them for this project",
  },
  {
    id: 3,
    name: "Annie",
    job: "Manager",
    img: "https://randomuser.me/api/portraits/women/66.jpg",
    text: "The software services offered by this company are exceptional. They have a deep understanding of the latest technologies and trends, and their solutions are designed to meet the specific needs of their clients. Their team is highly professional, responsive and collaborative, making it easy to work with them. I highly recommend their services to anyone looking for high-quality software solutions.",
  },
  {
    id: 4,
    name: "Daisy",
    job: "CEO",
    img: "https://randomuser.me/api/portraits/women/56.jpg",
    text: "Working with this company has been a great experience. Their software development process is well-organized, and they are always open to feedback and suggestions. They have a talented team of developers, designers and project managers who work together to deliver exceptional solutions. I would definitely recommend their services to anyone looking for reliable and innovative software development",
  },
];

const img = document.querySelector("#pic");
const btnNext = document.querySelector("#btn-right");
const btnPrevious = document.querySelector("#btn-left");
const name = document.querySelector("#name");
const role = document.querySelector("#role");
const text = document.querySelector("#text");
let index = 0;

//Function on window load
window.addEventListener("DOMContentLoaded", function () {
  const testimonial = data[0];
  loadTestimonial(testimonial);
});

function loadTestimonial(data) {
  img.src = data.img;
  name.textContent = data.name;
  role.textContent = data.job;
  text.innerHTML = ` <i class="fa fa-quote-left"></i> ${data.text}
  <i class="fa fa-quote-right"></i>`;
}

btnNext.addEventListener("click", function () {
  index++;
  if (index > data.length - 1) {
    index = 0;
  }
  loadTestimonial(data[index]);
});
btnPrevious.addEventListener("click", function () {
  index--;
  if (index < 0) {
    index = data.length - 1;
  }
  loadTestimonial(data[index]);
});

function autoLoad() {
  index++;
  if (index > data.length - 1) {
    index = 0;
  }
  if (index < 0) {
    index = data.length - 1;
  }
  loadTestimonial(data[index]);
}

setInterval(autoLoad, 3000);

This code is an example of a JavaScript program that displays a set of testimonials in a web page.

The data variable is an array of objects that contains the information for each testimonial, such as the name of the person who provided it, their job title, an image of them, and the text of the testimonial.
The loadTestimonial function is responsible for updating the HTML elements in the page with the data of the current testimonial. It takes one argument, which is the data object of the current testimonial, and updates the img, name, role, and text elements accordingly.
The btnNext and btnPrevious variables are buttons that allow the user to navigate through the testimonials by clicking them. They are attached with event listeners that increment or decrement the index variable, which is used to keep track of the current testimonial being displayed, and then calls the loadTestimonial function with the new data.
The autoLoad function is used to automatically cycle through the testimonials every 3 seconds by calling the loadTestimonial function with the next data object in the array. It is set to run repeatedly using the setInterval function.
The window.addEventListener method is used to call the loadTestimonial function with the first testimonial in the array when the window is first loaded.

Finally, you can add some CSS styles to enhance the look and feel of the button and container. you can adjust the CSS styles as desired to match the design of your website.

css/style.css

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@600&family=Teko:wght@500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito", sans-serif;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #b1cb8c;
  display: grid;
  place-items: center;
}

.container {
  background-color: #fff;
  width: 600px;
  height: 450px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  position: relative;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  user-select: none;
}

.img-box {
  display: flex;
  justify-content: center;
}

.container h2 {
  font-size: 30px;
  font-weight: 600;
  margin: 20px 10px;
  position: relative;
  padding: 5px;
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  font-weight: normal;
}

.container h2 span {
  color: #95ca61;
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
}
.container h2 ::after {
  content: "";
  width: 150px;
  height: 3px;
  background-color: #2f671c;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(220px);
}

.pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ece9ea;
  position: relative;
}
.pic img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.pic::before {
  content: "";
  background-color: #2f671c;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  left: -5px;
}
.pic::after {
  content: "";
  background-color: #95ca61;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  right: 0;
  bottom: 0;
  position: absolute;
}

.profile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
  margin-left: 20px;
}

.profile h4 {
  font-size: 18px;
  position: relative;
}
.profile h4::after {
  content: "";
  width: 30px;
  height: 3px;
  background-color: #2f671c;
  position: absolute;
  left: 0;
  bottom: 0;
}
.profile p {
  font-size: 14px;
}
.text p {
  padding: 30px;
  font-size: 16px;
  color: #222;
}

.arrow {
  position: absolute;
  font-size: 30px;
  color: white;
  top: 200px;
  cursor: pointer;
}

.fa-chevron-circle-right {
  right: -50px;
}

.fa-chevron-circle-left {
  left: -50px;
}

Output

Live Preview