Create a Testimonial box switcher using HTML CSS & JavaScript Last Updated : 23 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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:HTMLCSSJavaScriptApproach:Create a HTML strcuture by usng the HTML tags. We have used h1 to represent the GeeksforGeeks 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 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"> GeeksforGeeks </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; } } JavaScript let data = [ { img: "https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png", name: "Rahul", role: "Web Developer", msg: `GeeksforGeeks 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.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png", name: "Priya", role: "Data Scientist", msg: `I'm grateful for GeeksforGeeks, 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.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png", name: "Amit", role: "Machine Learning Engineer", msg: `As a machine learning engineer, GeeksforGeeks 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(); }; Output: Comment More infoAdvertise with us Next Article Create a Testimonial box switcher using HTML CSS & JavaScript G gauravgandal Follow Improve Article Tags : JavaScript JavaScript-Projects Geeks Premier League 2023 Similar Reads How to Create Stopwatch using HTML CSS and JavaScript ? In this article, we will learn How to create a Stopwatch using HTML CSS, and JavaScript. The StopWatch will have the Start, Stop, and Reset functionality.Prerequisites:HTML CSS JavaScriptApproach:Create one container in which all the elements are present.Inside this container add 2 divs that contain 3 min read How to create Popup Box using HTML CSS and JavaScript? Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.ApproachCreate the Popup structure using HTML tags, Some tags a 3 min read How to Create a Modal Box using HTML CSS and JavaScript? We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen.Approach to Create Modal BoxHTML Structure:Create a button that opens the m 2 min read How to create a Snackbar using HTML, CSS & JavaScript? Snackbar or toast notifications are brief messages that pop up on a webpage to convey information or feedback to users. They are versatile tools for signaling different states, like success, error, or invalid input, and can appear at various positions on the screen.Approach:First, create a basic HTM 3 min read Build a Text to Speech Converter using HTML, CSS & Javascript A text-to-speech converter is an application that is used to convert the text content entered by the user into speech with a click of a button. A text-to-speech converter should have a text area at the top so that, the user can enter a long text to be converted into speech followed by a button that 3 min read Create a Pomodoro Timer using HTML CSS and JavaScript In this article, we will see how to design Pomodoro Timer with the help of HTML CSS, and JavaScript. The Pomodoro Technique is a time management method that involves breaking your work into focused intervals, typically 25 minutes, followed by short breaks. After completing four cycles, take a longer 3 min read Create ChatGPT Template using HTML CSS & JavaScript Create a customizable ChatGPT interface using HTML, CSS, and JavaScript. Implement features like message input, display area, and toggle buttons for themes. Customize styles and interactions to suit your preferences and requirements. Prerequisites:HTMLCSSJavaScriptApproachCreate a new HTML file and 7 min read How to Create a Snackbar or Toast using CSS & JavaScript? Snackbar or toast notifications are brief messages that pop up on a webpage to convey information or feedback to users. They are versatile tools for signaling different states, like success, error, or invalid input, and can appear at various positions on the screen.Snackbar or Toast ApproachFirst, c 4 min read How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and 3 min read How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v 7 min read Like