Building Interactive Components with Vanilla JavaScript

Interactive components are the backbone of modern web applications, providing users with engaging and dynamic experiences. While libraries and frameworks like React, Angular, and Vue are popular choices, mastering Vanilla JavaScript allows you to build such components from scratch, deepening your understanding of core JavaScript concepts.

In this blog, we’ll explore how to create interactive components using Vanilla JavaScript, with practical examples to get you started.

Table of Contents

What Are Interactive Components?

Interactive components are elements on a webpage that respond to user actions, such as clicks, hovers, or form inputs. Examples include:

Accordions
Modals
Tabs
Sliders
Dropdown menus

Creating these components without relying on external libraries ensures lightweight and efficient solutions tailored to your needs.

Getting Started with Vanilla JavaScript

Before diving into interactive components, ensure you’re comfortable with basic JavaScript concepts like DOM manipulation, event listeners, and CSS styling.

Example 1: Accordion

An accordion is a collapsible section that displays or hides content when clicked.

htmlCopy code<div class="accordion">
  <button class="accordion-btn">Section 1</button>
  <div class="accordion-content">
    <p>Content for Section 1</p>
  </div>
  <button class="accordion-btn">Section 2</button>
  <div class="accordion-content">
    <p>Content for Section 2</p>
  </div>
</div>

<style>
  .accordion-content {
    display: none;
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

<script>
  const buttons = document.querySelectorAll(".accordion-btn");
  buttons.forEach((btn) => {
    btn.addEventListener("click", () => {
      const content = btn.nextElementSibling;
      content.style.display =
        content.style.display === "block" ? "none" : "block";
    });
  });
</script>

This code toggles the display of the content section when the button is clicked.

Example 2: Modal

A modal is a pop-up that appears on top of the current content, often used for notifications or forms.

htmlCopy code<button id="open-modal">Open Modal</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span id="close-modal" class="close">&times;</span>
    <p>This is a modal!</p>
  </div>
</div>

<style>
  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }

  .modal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
  }

  .close {
    cursor: pointer;
    float: right;
    font-size: 20px;
  }
</style>

<script>
  const openModal = document.getElementById("open-modal");
  const closeModal = document.getElementById("close-modal");
  const modal = document.getElementById("modal");

  openModal.addEventListener("click", () => {
    modal.style.display = "flex";
  });

  closeModal.addEventListener("click", () => {
    modal.style.display = "none";
  });

  window.addEventListener("click", (e) => {
    if (e.target === modal) {
      modal.style.display = "none";
    }
  });
</script>

This example demonstrates how to open and close a modal using Vanilla JavaScript.

Example 3: Tabs

Tabs are a common UI component used to switch between different views or sections of content.

htmlCopy code<div class="tabs">
  <button class="tab-btn" data-tab="1">Tab 1</button>
  <button class="tab-btn" data-tab="2">Tab 2</button>
  <button class="tab-btn" data-tab="3">Tab 3</button>
</div>

<div class="tab-content" id="tab-1">Content for Tab 1</div>
<div class="tab-content" id="tab-2" style="display:none;">Content for Tab 2</div>
<div class="tab-content" id="tab-3" style="display:none;">Content for Tab 3</div>

<script>
  const tabButtons = document.querySelectorAll(".tab-btn");
  const tabContents = document.querySelectorAll(".tab-content");

  tabButtons.forEach((button) => {
    button.addEventListener("click", () => {
      const tabId = button.getAttribute("data-tab");

      tabContents.forEach((content) => {
        content.style.display = content.id === `tab-${tabId}` ? "block" : "none";
      });
    });
  });
</script>

This code creates tabs that show and hide content dynamically when clicked.

Why Build Components with Vanilla JavaScript?

Lightweight and Fast: No dependency on libraries, resulting in better performance.
Customizable: Full control over the code and design.
Learning Opportunity: Improves your understanding of JavaScript and the DOM.

Tips for Building Interactive Components

Use semantic HTML to ensure your components are accessible.
Test across multiple browsers to maintain compatibility.
Keep your code modular and reusable.

Conclusion

Building interactive components with Vanilla JavaScript is a valuable skill that allows you to create dynamic, responsive, and lightweight user experiences. By mastering these foundational techniques, you’ll be better equipped to tackle larger projects and frameworks with confidence.