DEV Community: Ediomo Jose

Pop-up Modal: Using HTML, CSS, and JavaScript to Create a Modal.

Ediomo Jose — Mon, 21 Aug 2023 11:44:45 +0000

An introduction to using modal pop-ups to make your website more engaging and interactive.

Introduction

This article's main focus is on using the HTML dialog element to create a Modal Pop-up. To do this, we'll develop a subscription form that pops up a Modal success message after the form is submitted.

Prerequsite

JavaScript fundamentals (beginning level is acceptable; I'd go into great length to explain everything )
You have a basic understanding of HTML and CSS and have used them to build at least one webpage.
An editor for code (VS Code is suggested).
Of course, a browser—we advise using Chrome or Firefox.

Table of content

What is a Modal?
When to use a Modal.
Exploring the HTML Dialog element.
The open attribute
Building our HTML Structure
Building our form structure.
Building our Modal Pop-up using the HTML Dialog element.
Styling our form
Styling our dialog
Backdrop pseudo-element
Adding JavaScript functionality to our elements.
Javascript show() and showmodal() function.
Javascript close() function.

What is a Modal?

A modal is a type of display that pops up as an overlay over the main page of a website, its appearance deactivates all the page content just like an alert. But the difference is that a modal needs to be interacted with to deactivate, it either comes with a dismiss button or is deactivated when the user clicks on the keyboard or the mouse.
Modals do not allow users to interact with the web page when it appears. Aside from interactivity, modals allow for focusing increase in the user focus as it appears.

When to use a modal

Modals can be used for a variety of purposes, which are alerts, warnings, confirmations,
Forms, media shows(Like videos and music), and an onboarding page for a multi-step procedure as an example.

Exploring the HTML dialog element

The dialog element is a representation of a dialog box or other interactive web components, like a subwindow or an alert that can be dismissed. It is simple to develop an interactive modal thanks to the dialog element.



<dialog>

</dialog>

The open attribute -

Without the open attribute, the dialog element will be hidden from our browser by default. Additionally, it will allow us to see the dialog's content as we style it using CSS.

The `open` attribute appears as follows:



<dialog open>

</dialog>

Building our HTML structure

Building the form

We will create a subscription form that asks for the user's email address before we can develop the structure of how our modal should appear. When the subscribe button is hit, a modal with a confirmation message will appear.



<section class="signup__container">
        <picture>
          <source
            media="(min-width:700px)"
            srcset="./assets/images/illustration-sign-up desktop.svg"
            class="desktop__img"
          />
          <img
          src="./assets/images/illustration-sign-up-mobile.svg"
          alt=""
          srcset=""
          class="mobile__img"
        />
        </picture>
        <form method="dialog">
          <h1 class="form__header">Stay updated!</h1>
          <p class="form__paragraph">
            Join 60,000+ product managers receiving monthly updates on:
          </p>
          <ul class="outline">
            <li class="outline__text">
              Product discovery and building what matters
            </li>
            <li class="outline__text">
              Measuring to ensure updates are a success
            </li>
            <li class="outline__text">And much more!</li>
          </ul>
          <div class="label__error__text">
            <label for="email__address">Email Address</label>
            <span class="error__state__text"></span>
          </div>

          <input
            type="email"
            name="email"
            id="email__address"
            placeholder="email@company.com"
          />
          <button class="form__submit" type="submit">Subscribe to monthly newsletter</button>
        </form>
</section>
    <!-- Sign-up form end -->

The form method is dialog, which is a crucial point to keep in mind.

Building the modal

As demonstrated in the code below, the dialog element must be used to create the modal.



<dialog>

<dialog/>

We must use the open attribute, which was discussed at the beginning of this article, to see the result of what our dialog structure will look like. Remember to remove the open attribute once you're finished because adding it only serves to show the developer how the modal would appear on his browser.

Code breakdown

If you carefully go through the code, you will notice that we created a div with the class success__msg__container, which contains the entire content of our success message. If I give the dialog element a display grid property directly, we will have defeated the purpose of a dialog because the dialog would no longer disappear from view even if the open attribute was removed. I took this step because I want to give a display grid property to the sccess__msg__container.



<dialog class="success__msg">
      <div class="success__msg__container">
        <img src="./assets/images/icon-success.svg" alt="" />
        <h2 class="success__msg__head">
          Thanks for subscribing!
        </h2>
        <p class="success__note">
          A confirmation email has been sent to
          <span id="user__email__address"></span>. Please open
          it and click the button inside to confirm your subscription.
        </p>
        <button type="button" title="dismiss" class="dismiss__btn">Dismiss message</button>
      </div>
</dialog>

Also, take note that we added a button after adding all the content that is required and that we wish to display. The modal will be closed when this button is clicked.

Finally, here is the structure of our HTML code.



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Newsletter sign-up form with success message</title>
    <link rel="stylesheet" href="style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <!-- Sign-up form start -->


      <section class="signup__container">
        <picture>
          <source
            media="(min-width:700px)"
            srcset="./assets/images/illustration-sign-up-desktop.svg"
            class="desktop__img"
          />
          <img
          src="./assets/images/illustration-sign-up-mobile.svg"
          alt=""
          srcset=""
          class="mobile__img"
        />
        </picture>
        <form method="dialog">
          <h1 class="form__header">Stay updated!</h1>
          <p class="form__paragraph">
            Join 60,000+ product managers receiving monthly updates on:
          </p>
          <ul class="outline">
            <li class="outline__text">
              Product discovery and building what matters
            </li>
            <li class="outline__text">
              Measuring to ensure updates are a success
            </li>
            <li class="outline__text">And much more!</li>
          </ul>
          <div class="label__error__text">
            <label for="email__address">Email Address</label>
            <span class="error__state__text"></span>
          </div>

          <input
            type="email"
            name="email"
            id="email__address"
            placeholder="email@company.com"
          />
          <button class="form__submit" type="submit">Subscribe to monthly newsletter</button>
        </form>
      </section>
    <!-- Sign-up form end -->

    <!-- Success message start -->
    <dialog class="success__msg">
      <div class="success__msg__container">
        <img src="./assets/images/icon-success.svg" alt="" />
        <h2 class="success__msg__head">
          Thanks for subscribing!
        </h2>
        <p class="success__note">
          A confirmation email has been sent to
          <span id="user__email__address"></span>. Please open
          it and click the button inside to confirm your subscription.
        </p>
        <button type="button" title="dismiss" class="dismiss__btn">Dismiss message</button>
      </div>

    </dialog>
    <!-- Success message end -->
  </body>
</html>

Take note of the class name given to each of the elements.

Styling our Form and our Dialog Element

The first step is to link our CSS stylesheet to our HTML file. Since the modal is the main focus of this article, I created some basic styling for the form and its container. We also added some basic styling to our dialog, which you can see in the code below.



@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap");

:root {
  --sucesspage-list: url(./assets/images/icon-list.svg);
  --dark-slate-grey: hsl(234, 29%, 20%);
  --charcoal-grey: hsl(235, 18%, 26%);
  --grey: hsl(231, 7%, 60%);
  --tomato: hsl(4, 100%, 67%);
  --white: hsl(0, 0%, 100%);
}

html {
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  background-color: var(--white);
}

.signup__container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-flow: dense;
  border: none;
  border-radius: 0.5rem;
  margin: 2rem 1.2rem;
  box-shadow: 1px 2px 5px var(--grey);
}

.mobile__img {
  border-radius: 10px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 1rem;
  gap: 1rem;
  color: var(--dark-slate-grey);
}

.form__header {
  font-size: 2em;
}

.form__paragraph {
  font-size: 0.9em;
  margin-bottom: 0.8rem;
}

.outline {
  list-style: none;
  font-size: 0.9em;
}

.outline__text {
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
}

.outline__text::before {
  content: var(--sucesspage-list);
}

.label__error__text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

label {
  font-weight: bold;
  font-size: 0.8em;
  color: var(--dark-slate-grey);
}

.error__state__text {
  font-weight: bold;
  font-size: 0.8em;
  color: red;
}

input {
  padding: 0.7rem;
  font-size: 1em;
  font-family: "Roboto Condensed", sans-serif;
  border-radius: 0.4rem;
  border: 1px solid var(--grey);
}

form button {
  padding: 1.2rem;
  margin-bottom: 2rem;
  background: var(--dark-slate-grey);
  color: var(--white);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  outline: none;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  box-shadow: 1px 2px 5px var(--grey);
  transition: all 5s ease;
}

form button:hover{
  background: linear-gradient(0.25turn,#e04313, hsl(4, 100%, 67%));
}

.success__msg {
  margin: auto;
  height: 70vh;
  width: 100%;
  padding: 3rem 2rem;
  border: none;
  border-radius: 1rem;
}

dialog::backdrop {
  background-color: hsl(234, 29%, 20%);
}

.success__msg__container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;

}

.success__msg__head {
  font-size: 2.5em;
  color: var(--dark-slate-grey);
}

.success__note {
  color: var(--dark-slate-grey);
  line-height: 1.5rem;
}

#user__email__address {
  font-weight: 700;
}

.dismiss__btn {
  padding: 0.9rem;
  background: var(--dark-slate-grey);
  color: var(--white);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  outline: none;
  border: none;
  border-radius: 0.4rem;
  cursor: pointer;
  box-shadow: 1px 2px 5px var(--grey);
  transition: all 0.5s ease-in-out;
}

.dismiss__btn:hover {
  background: linear-gradient(0.25turn,#e04313, hsl(4, 100%, 67%));

}

/* Js class */

.error__state {
  border: 2px solid red;
}

.error__placeholder::placeholder {
  color: red;
}

.input__background {
  background-color: rgba(219, 26, 26, 0.1);
}

.body__position {
  position: fixed;
}

@media (width >= 600px) {
  body {
    margin: auto;
  }

  .signup__container {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    width: 80%;
    border-radius: 1rem;
  }

  form button {
    margin: 0;
  }

  picture {
    grid-column: 2;
    padding: 1rem;
    display: flex;
  }

  .success__msg {
    width: 50%;
    height: 45vh;
    padding: 2rem;
  }

  .success__msg__container {
    gap: 2rem;
  }
}

@media (width >= 1024px) {
  .signup__container {
    width: 50%;
  }

  .success__msg {
    width: 30%;
    min-height: 70vh;
  }

  .success__msg__container {
    gap: 1rem;
  }
}

@media (width >= 1800px) {
  .signup__container {
    width: 35%;
  }

  .success__msg {
    width: 20%;
    min-height: 50%;
    padding: 2rem;
  }
}

Backdrop pseudo-element

The area behind our dialog is styled using the ::backdrop pseudo-element in this case, we gave it a background color.



dialog::backdrop {
  background-color: hsl(234, 29%, 20%);
}

Adding JavaScript functionality to our elements.

Moving on to where the magic happens, we'll get a detailed understanding of how the modal pop-up is triggered, but first, we'll run a few lines of code to authenticate the input field. Although there are other methods of form authentication, for the purposes of this article, we'll stick with this one.



const pageBody = document.querySelector("body");
const openModalBtn = document.querySelector(".form__submit");
let emailInput = document.querySelector("#email__address");
let errorStateText = document.querySelector(".error__state__text");
const successMessage = document.querySelector(".success__msg");
const successMsgEmail = document.querySelector("#user__email__address");
const dismissSucessMsgBtn = document.querySelector(".dismiss__btn");

const emptyFieldMsg = "Input field can not be blank";

openModalBtn.addEventListener("click", function () {
  if (!emailInput.value) {
    emailInput.classList.add("error__state");
    emailInput.classList.add("error__placeholder");
    emailInput.classList.add("input__background");
    errorStateText.innerText = emptyFieldMsg;
  } else {
    successMessage.showModal();
    successMsgEmail.innerText = emailInput.value;
  }
});

dismissSucessMsgBtn.addEventListener("click", function () {
  successMessage.close();
});

To store elements in a variable, the document.querySelector() method calls the appropriate element in our DOM.

The body of our website is stored in the pageBody variable. Why must we perform this? This is done because we want to make the page unscrollable by adding the position:fixed property to the body when the Modal comes into view.

The button that will cause the modal to populate is the subscribe button from our form, and it is stored in the openModalBtn variable.

The email input field is stored in the emailInput variable.

In our HTML, the span with the class of error__state__text is stored in the errorStateText variable. If the input field is left empty, this should display the error message.

successMessage variable stores the dialog element which is the modal

successMsgEmail represents the empty span we included in our success__note in our HTML, and it is intended to display the email address the user supplied in the form.

dismissSuccessMsgBtn variable keeps track of the button in our modal, which closes the modal.

The emptyFieldMsg variable, which records the error message that will be displayed, is the last of the variables.

Next, a callBack function that monitors the openModalBtn click event is launched using the addEventListener method. We added a conditional statement to the code that checks whether emailInput contains a value. If it doesn’t, the error states should be triggered; else, the success message should appear.

Javascript `show()` and `showmodal()` function.

JavaScript includes two methods called show() and showModal(). You may specify exactly how you want your dialog element to function by utilizing the show() and showModal() methods because sometimes you want a genuine modal and other times you want more of a popup-style dialog. To display our modal in our code, we utilized the showModal() method.

Simply use the close() method to close a dialog element. Therefore, we utilize the addEventListener method to start a callBack function that watches for the dismissSuccessBtn click event.

Source Code

Live project preview

Conclusion

Sharing knowledge gives it its full power. I will ask you to do well to spread this information if it has been useful to you, as I know it has. There may be someone out there who is having trouble or needs clarification incorporating this into Modal-pop.

Carousel: How to create a testimonial carousel with HTML, CSS, and Javascript.

Ediomo Jose — Mon, 24 Jul 2023 12:52:30 +0000

Introduction

When developing web applications, one of the most crucial considerations for developers is responsiveness and interactivity. I have some exciting news for you: the carousel is one of the ways we can make our site appear spectacular.

What is a carousel

A carousel is a round platform containing model horses, cars, and other items that revolves around that children ride on at a funfair.

In the context of web development, a carousel is a multi-content format used to display photographs, videos, customer testimonials, and other content. Carousels allow you to display several photos, videos, or a combination of images and text in a single container block and provide navigation buttons for moving forward and backward, resulting in an engaging experience.
The excitement that children have when riding on a merry-go-round can be compared to the joy that our website visitors experience when they encounter interactive features such as a carousel on our website or web application.

Prerequisites

Knowledge of HTML
Knowledge of CSS
Knowledge of Javascript

HTML Setup: Building the foundation

The initial step in this process is to create our HTML fragment for this project. Once we've finished creating our HTML boilerplate, the next step is to connect our document to our CSS and Script files. Once that's done, we're ready to go.

Creating our carousel

Once your external files have been properly linked. We may now proceed to develop an HTML carousel. To accomplish this, we will create the carousel parent container and give it the class name carousel__container. We'll have four user testimonials in our carousel container, each with the class name carousel__item associated to it. The initial carousel item will additionally have the class carousel__item—selected assigned to it. Its new class will allow us to switch between chosen carousel items.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonial carousel</title>
    <link rel="stylesheet" href="post.css">
    <script src="./post.js" defer></script>
</head>
<body>
    <aside class="testimonials">
        <h2 class="testimonials__head">What they've said</h2>
        <div class="carousel__container">
          <div class="carousel__item carousel__item--selected">
            <img
              src="./images/avatar-anisha.png"
              alt="user__avatar"
              srcset=""
            />
            <div class="testimonial__block">
              <h4 class="name">Anisha Li</h4>
              <p class="testimonial__paragraph">
                “Manage has supercharged our team’s workflow. The ability to
                maintain visibility on larger milestones at all times keeps
                everyone motivated.”
              </p>
            </div>
          </div>

          <div class="carousel__item ">
            <img src="./images/avatar-ali.png" alt="user__avatar" srcset="" />
            <div class="testimonial__block">
              <h4 class="name">Ali Bravo</h4>
              <p class="testimonial__paragraph">
                “We have been able to cancel so many other subscriptions since
                using Manage. There is no more cross-channel confusion and
                everyone is much more focused.”
              </p>
            </div>
          </div>

          <div class="carousel__item">
            <img
              src="./images/avatar-richard.png"
              alt="user__avatar"
              srcset=""
            />
            <div class="testimonial__block">
              <h4 class="name">Richard Watts</h4>
              <p class="testimonial__paragraph">
                “Manage allows us to provide structure and process. It keeps us
                organized and focused. I can’t stop recommending them to
                everyone I talk to!”
              </p>
            </div>
          </div>

          <div class="carousel__item">
            <img
              src="./images/avatar-shanai.png"
              alt="user__avatar"
              srcset=""
            />
            <div class="testimonial__block">
              <h4 class="name">Shanai Gough</h4>
              <p class="testimonial__paragraph">
                “Their software allows us to track, manage and collaborate on
                our projects from anywhere. It keeps the whole team in-sync
                without being intrusive.”
              </p>
            </div>
          </div>
      </aside>
</body>
</html>

I know you're wondering where the button that allows us to switch between carousel items is; don't worry, this will be implemented utilizing our javascript.

CSS: Styling carousel

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap");

:root {
  --bright-red: hsl(12, 88%, 59%);
  --dark-blue: hsl(228, 39%, 23%);
  --dark-grayish-blue: hsl(227, 12%, 61%);
  --very-dark-blue: hsl(233, 12%, 13%);
  --very-pale-red: hsl(13, 100%, 96%);
  --very-light-grey: hsl(0, 0%, 98%);
  --font-vietnam: "Be Vietnam Pro";
}

*,
::before,
::after {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

body {
  font-size: 0.875rem;
  background-color: var(--very-pale-red);
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: var(--font-vietnam);
}

img {
  max-width: 100%;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  place-items: center;
}

.testimonials__head {
  font-size: 2.3em;
  padding: 2rem 0;
  color: var(--dark-blue);
}

.carousel__container {
  position: relative;
  padding: 2rem;
}

.carousel__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem 0 4rem 0;
  position: relative;
  display: none;
}

.carousel__item--selected {
  display: flex;
}

img[alt="user__avatar"] {
  width: 25%;
  position: absolute;
  top: -30px;
}

.testimonial__block {
  background: var(--very-light-grey);
  padding: 5rem 1.5rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.name {
  font-size: 1.2em;
  color: var(--dark-blue);
}

.testimonial__paragraph {
  font-size: 1em;
  text-align: center;
  line-height: 1.7rem;
  padding: 1rem 0;
  color: var(--dark-grayish-blue);
}

.carousel__nav {
  width: 100%;
  padding: 20px 0;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
}

.carousel__btn {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  border: 1.5px solid var(--bright-red);
  background: transparent;
  cursor: pointer;
  margin: 0 5px;
  transition: 0.5s ease-in;
}

.carousel__btn--selected {
  background-color: var(--bright-red);
}

.carousel__action__btn {
  color: white;
  background-color: var(--bright-red);
  margin: 2rem 0;
  padding: 1rem 2.5rem;
  outline: none;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 1px 10px 6px var(--very-pale-red);
}

@media (500px <= width <= 915px) {
  body {
    font-size: 0.9375rem;
  }

  .carousel__container {
    padding: 2rem 8rem;
  }

  img[alt="user__avatar"] {
    bottom: 2rem;
    width: 20%;
  }

  .testimonial__block {
    padding: 6rem 1.5rem 1rem 1.5rem;
  }
}

@media (width >= 916px) {
    body{
        font-size: 1.1rem;
    }

  .testimonials {
    margin: 5rem auto;
    max-width: 50%;
  }

  img[alt="user__avatar"] {
    width: 15%;
  }

  .testimonial__block {
    padding: 6rem 3rem 3rem 3rem;
    width: 100%;
  }
}

@media(width >= 1500px ){
  .testimonials {
    margin: 5rem auto;
    max-width: 30%;
  }

}

I'll do a good job of explaining some of the styling in our cascading style sheet (CSS). Take note we used a Mobile First approach in the styling.

carousel__container: We gave the carousel container a relative position, which is critical for stacking carousel items.
carousel__item: We also provided our carousel item a display none, of which hides the items. We did this because we wanted the selected carousel item to be visible.
carousel__item__selected: This is where the class "carousel__item-selected" comes in, which has now been allocated the display flex attribute. After doing so, the carousel item with this class will be presented in view.

We also added the classes carousel__nav, carousel__btn, and carousel__btn-selected to assist us in distinguishing between the buttons that are selected and those that are not. Remember that our JavaScript will construct these button elements.

JavaScript: Bring it to life

You are welcome to where the magic happens, and I hope you have had a good time so far.

document.querySelectorAll(".carousel__container").forEach((carousel) => {
    const items = carousel.querySelectorAll(".carousel__item");
    const buttonHtml = Array.from(items, () => {
      return `<span class="carousel__btn"></span>`;
    });
    carousel.insertAdjacentHTML(
      "beforeend",
      `<div class="carousel__nav">${buttonHtml.join("")}</div>`
    );

    const carouselBtns = carousel.querySelectorAll(".carousel__btn");

    carouselBtns.forEach((carouselBtn, i) => {
      carouselBtn.addEventListener("click", () => {
        // un-select all the items
        items.forEach((item) =>
          item.classList.remove("carousel__item--selected")
        );
        carouselBtns.forEach((carouselBtn) =>
          carouselBtn.classList.remove("carousel__btn--selected")
        );

        items[i].classList.add("carousel__item--selected");
        carouselBtn.classList.add("carousel__btn--selected");
      });
    });
  });

I'm going to go over the JavaScript code we just wrote in detail so we can understand exactly what we're doing.

Using document.querySelector , we selected every item in our carousel, the method returns a nodeList, which we now loop through to loop over each of the items in the carousel__container using forEach(). It is worth noting that in our forEach() method, the term carousel that is found inside the parentheses symbolizes each item in the carousel__container. Following that, we store each of these items in a variable called items, specifying that items should be the variable that represents our carousel__item; in essence, the items variable now returns an array.

Next, we made a variable called buttonHtml and used the Array.from() method to construct an array of buttons tied to each item, giving it the class carousel__btn. We needed to include this navigation in our carousel__container, so we used the insertAdjacentHTML method to create a div with the class carousel__nav. Then, in the div, we used the .join() method to add each of the buttons we made in the carousel__nav section.

We must make our buttons react to click events. If you look in your browser, you will notice buttons that have been stylized; this style was derived from the class name of our CSS file. We made a variable called CarouselBtns and saved all of our buttons in it.

We used the forEach() loop to go through each of the buttons because the carouselBtns variable returns an array in the pretenses we named each of the buttons carouselBtn and the i signifies their index. We provided a click eventListener to each button within the forEach() method code block.

Following that, we took the items variable and looped through it with the forEach() method to see if the class name carousel__item—selected had been added and then removed it. We also used the forEach() method on the corouselBtns to remove the class name carousel__btn—selected if it had been added.

Finally, we removed the selected class if it was present. The next step is to add those classes to both the carouselBtn and the items using the items index.

Links

Testimonial Carousel Live Preview

Code GitHub Repository

Conclusion

Congrats!!!!!!
You have successfully created a carousel; I recommend that we go read up on some of the principles used in this implementation, particularly some of the JavaScript methods and functions.

Buy me a coffee☕

You can show your appreciation for me by purchasing me a cup of coffee if you enjoyed and found value in my article.

Buy me a cofee

You should also like and follow for more stuff. Also, given this is my first technical article, please provide comments if you have any queries or see any errors.

DEV Community: Ediomo Jose

Pop-up Modal: Using HTML, CSS, and JavaScript to Create a Modal.

An introduction to using modal pop-ups to make your website more engaging and interactive.

Introduction

Prerequsite

Table of content

What is a Modal?

When to use a modal

Exploring the HTML dialog element

The open attribute -

The open attribute appears as follows:

Building our HTML structure

Building the form

Building the modal

Code breakdown

Finally, here is the structure of our HTML code.

Styling our Form and our Dialog Element

Backdrop pseudo-element

Adding JavaScript functionality to our elements.

Javascript show() and showmodal() function.

Conclusion

Carousel: How to create a testimonial carousel with HTML, CSS, and Javascript.

Introduction

What is a carousel

Prerequisites

HTML Setup: Building the foundation

Creating our carousel

CSS: Styling carousel

JavaScript: Bring it to life

Links

Conclusion

Buy me a coffee☕

The `open` attribute appears as follows:

Javascript `show()` and `showmodal()` function.