Create a Testimonial box switcher using HTML CSS & JavaScript

How to Create Stopwatch using HTML CSS and JavaScript ?

In this article, we will develop an interactive Testimonial box switcher application using HTML CSS & JavaScript Language.

In this application, we have a Card component that has the message given by the testimonial, also there is information about the person and his/her designation. The card component displays the new testimonial message when the custom buttons to switch between the message boxes are clicked.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites:

Approach:

Create a HTML strcuture by usng the HTML tags. We have used h1 to represent the w3wiki heading and h3 for the Application Name. We have created the testimonal conatiner by using the <div> class.
There is external styling file which contains all the styling code for each compoenent of the application. The colurs, efffects, padding, heght width all these is been defined and manage in the styling code file.
In the JavaScript code, we have defined the data of the testiomanl messages. This includes image, name, message and the designation of the perforn. Then we are stroing the referece of HTML testimonal-cont element to display the message and information there.
In the disTestimonial() function, we are rendering the testimonal messahe along with the other information.

Example: Below is the implementation of the above above

Javascript

let data = [
    {
        img: 
"https://media.w3wiki.net/wp-content/uploads/20230816191453/gfglogo.png",
        name: "Rahul",
        role: "Web Developer",
        msg: `w3wiki is an incredible 
        platform that has helped me enhance 
        my web development skills. The tutorials 
        and articles provided here are a valuable 
        resource for anyone in the field.`,
    },
    {
        img: 
"https://media.w3wiki.net/wp-content/uploads/20230816191453/gfglogo.png",
        name: "Priya",
        role: "Data Scientist",
        msg: `I'm grateful for w3wiki, 
        which has been my go-to platform for
        learning and staying updated with the latest 
        developments in data science. The quality of 
        content here is unmatched.`,
    },
    {
        img: 
"https://media.w3wiki.net/wp-content/uploads/20230816191453/gfglogo.png",
        name: "Amit",
        role: "Machine Learning Engineer",
        msg: `As a machine learning engineer, 
        w3wiki has been instrumental in my career 
        growth. The comprehensive tutorials and practical 
        examples have been a game-changer for me.`,
    },
];
let i = 0;
let j = data.length;
let testCont = document.getElementById("testimonial-cont");
let prev = document.getElementById("prev");
let next = document.getElementById("next");
 
let disTestimonial = () => {
    testCont.innerHTML = `
        <p>${data[i].msg}</p>
        <img src=${data[i].img}>
        <h3>${data[i].name}</h3>
        <h6>${data[i].role}</h6>
      `;
};
prev.addEventListener("click", () => {
    i = (j + i - 1) % j;
    disTestimonial();
});
next.addEventListener("click", () => {
    i = (j + i + 1) % j;
    disTestimonial();
});
window.onload = () => {
    disTestimonial();
};

HTML

<!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 Box Switcher 
      Using HTML CSS & JavaScript
  </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1 class="title">
              w3wiki
              </h1>
            <h3 class="switcher">
              Testimonial Box Switcher using 
              HTML CSS & JavaScript
          </h3>
        </header>
        <div id="testimonial-cont"
             class="testimonial-container">
          </div>
        <button id="prev"><</button>
        <button id="next">></button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    background: #ffffff;
    color: #000000;
}
.container {
    background: linear-gradient(to right, #ffd98e, #77efff);
    width: 100vw;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    max-width: 40em;
    min-height: 35em;
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.title {
    font-size: 3em;
    margin: 10px 0;
    text-align: center;
    color: green;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.switcher {
    font-size: 1.5em;
    margin: 10px 0;
    text-align: center;
    color: #000000;
}
.testimonial-container {
    width: 100%;
    max-width: 80%;
    height: auto;
    position: relative;
    margin: auto;
    padding: 2em 1.5em;
    border: 1px solid #f8f8f8;
    border-radius: 0.5em;
    background: rgba(219, 162, 221, 0.849);
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.container:hover .testimonial-container {
    transform: scale(1.05);
}
.container button {
    font-size: 1.7em;
    height: 2.1em;
    width: 2.1em;
    background: #fff;
    position: absolute;
    color: #000000;
    box-shadow: 0 0 1em rgba(1, 17, 39, 0.25);
    border-radius: 50%;
    cursor: pointer;
    margin: auto;
    top: 0;
    bottom: 0;
    border: none;
    transition: background-color 0.3s ease-in-out;
    z-index: 1;
}
.container button:hover {
    background-color: #ffffff;
    color: #000000;
}
.testimonial-container h3 {
    font-size: 1.4em;
    text-align: center;
    margin-bottom: 0.5em;
    color: #001aff;
}
.testimonial-container h6 {
    font-size: 1em;
    letter-spacing: 0.05em;
    font-weight: 400;
    text-align: center;
    color: #ff0d0d;
}
.testimonial-container p {
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-align: center;
    color: #000000;
}
.testimonial-container img {
    display: block;
    margin: 1.8em auto 1.25em auto;
    border-radius: 50%;
    object-fit: cover;
    width: 4.4em;
    height: 4.4em;
}
button#prev {
    left: -1.1em;
}
button#next {
    right: -1.1em;
}
button#prev:hover{
    background-color: #000000;
    color: white;
}
button#next:hover{
    background-color: #000000;
    color: white;
}
@media screen and (max-width: 650px) {
    .container {
        font-size: 14px;
        min-height: 30em;
    }
    .testimonial-container {
        min-height: auto;
    }
}

Output:

Tags:

#Geeks Premier League 2023 #JavaScript-Projects #Geeks Premier League #Web Technologies