Create 9 Fun Web Components with JavaScript Free Guide and Source Code Included

JavaScript Components Web Dev

JavaScript Components Web Dev

Accordion Component:

An accordion component is a UI element that allows users to expand and collapse sections of content. Here’s an example implementation of an accordion component:

<div class=”accordion”>

  <div class=”accordion-header” onclick=”toggleAccordion(event)”>

    Header 1

  </div>

  <div class=”accordion-content” style=”display: none;”>

    Content 1

  </div>

  <div class=”accordion-header” onclick=”toggleAccordion(event)”>

    Header 2

  </div>

  <div class=”accordion-content” style=”display: none;”>

    Content 2

  </div>

</div>

<script>

  function toggleAccordion(event) {

    const accordionContent = event.target.nextElementSibling;

    if (accordionContent.style.display === “none”) {

      accordionContent.style.display = “block”;

    } else {

      accordionContent.style.display = “none”;

    }

  }

</script>

This implementation uses simple HTML and JavaScript to toggle the display of the accordion content when the user clicks on the header.

Modal Component:

A modal component is a UI element that displays content on top of the current page, often used for displaying forms, dialogs, or other content. Here’s an example implementation of a modal component:

<div class=”modal”>

  <div class=”modal-content”>

    <span class=”close” onclick=”closeModal()”>&times;</span>

    <h2>Modal Title</h2>

    <p>Modal content goes here.</p>

  </div>

</div>

<script>

  const modal = document.querySelector(“.modal”);

  function openModal() {

    modal.style.display = “block”;

  }

  function closeModal() {

    modal.style.display = “none”;

  }

</script>

This implementation uses a CSS class to style the modal, and JavaScript to open and close the modal by setting the display property of the modal element.

Slider Component:

A slider component is a UI element that allows users to slide a handle to select a value within a range. Here’s an example implementation of a slider component:

<div class=”slider-container”>

  <input type=”range” min=”0″ max=”100″ value=”50″ class=”slider” oninput=”updateValue(event)”>

  <p>Value: <span class=”slider-value”>50</span></p>

</div>

<script>

  function updateValue(event) {

    const value = event.target.value;

    const valueElement = document.querySelector(“.slider-value”);

    valueElement.textContent = value;

  }

</script>

This implementation uses an HTML input element of type “range” to create the slider, and JavaScript to update the displayed value as the user moves the slider.

Dropdown Component:

A dropdown component is a UI element that displays a list of options for the user to select. Here’s an example implementation of a dropdown component:

   <div class=”dropdown”>

     <button class=”dropdown-toggle” onclick=”toggleDropdown()”>Select an option</button>

     <ul class=”dropdown-menu” style=”display: none;”>

       <li><a href=”#”>Option 1</a></li>

       <li><a href=”#”>Option 2</a></li>

       <li><a href=”#”>Option 3</a></li>

     </ul>

   </div>

   <script>

     const dropdownMenu = document.querySelector(“.dropdown-menu”);

     function toggleDropdown() {

       if (dropdownMenu.style.display === “none”) {

         dropdownMenu.style.display = “block”;

       } else {

         dropdownMenu.style.display = “none”;

       }

     }

   </script>

This implementation uses HTML, CSS, and JavaScript to create a button that displays a list of options when clicked. The JavaScript code toggles the display of the dropdown menu when the button is clicked.

Tab Component:

A tab component is a UI element that allows users to switch between different sections of content. Here’s an example implementation of a tab component:

   <div class=”tabs”>

     <div class=”tab” onclick=”openTab(event, ‘tab-1’)”>Tab 1</div>

     <div class=”tab” onclick=”openTab(event, ‘tab-2’)”>Tab 2</div>

     <div class=”tab” onclick=”openTab(event, ‘tab-3’)”>Tab 3</div>

     <div id=”tab-1″ class=”tab-content”>Tab 1 content goes here.</div>

     <div id=”tab-2″ class=”tab-content” style=”display: none;”>Tab 2 content goes here.</div>

     <div id=”tab-3″ class=”tab-content” style=”display: none;”>Tab 3 content goes here.</div>

   </div>

   <script>

     function openTab(event, tabId) {

       const tabContents = document.querySelectorAll(“.tab-content”);

       const tabs = document.querySelectorAll(“.tab”);

       for (let i = 0; i < tabContents.length; i++) {

         if (tabContents[i].id === tabId) {

           tabContents[i].style.display = “block”;

         } else {

           tabContents[i].style.display = “none”;

         }

       }

       for (let i = 0; i < tabs.length; i++) {

         tabs[i].classList.remove(“active”);

       }

       event.target.classList.add(“active”);

     }

   </script>

This implementation uses HTML, CSS, and JavaScript to create a set of tabs that display different content when clicked. The JavaScript code sets the display style of the selected tab to “block” and hides the other tab contents by setting their display style to “none”. The code also adds an “active” class to the selected tab to highlight it visually.

Accordion Component:

An accordion component is a UI element that allows users to expand and collapse sections of content. Here’s an example implementation:

   <div class=”accordion”>

     <div class=”accordion-item”>

       <div class=”accordion-header” onclick=”toggleAccordion(event)”>Section 1</div>

       <div class=”accordion-content” style=”display: none;”>Content for section 1 goes here.</div>

     </div>

     <div class=”accordion-item”>

       <div class=”accordion-header” onclick=”toggleAccordion(event)”>Section 2</div>

       <div class=”accordion-content” style=”display: none;”>Content for section 2 goes here.</div>

     </div>

     <div class=”accordion-item”>

       <div class=”accordion-header” onclick=”toggleAccordion(event)”>Section 3</div>

       <div class=”accordion-content” style=”display: none;”>Content for section 3 goes here.</div>

     </div>

   </div>

   <script>

     function toggleAccordion(event) {

       const accordionContent = event.target.nextElementSibling;

       if (accordionContent.style.display === “none”) {

         accordionContent.style.display = “block”;

       } else {

         accordionContent.style.display = “none”;

       }

     }

   </script>

This implementation uses HTML, CSS, and JavaScript to create a set of accordion sections that expand and collapse when clicked. The JavaScript code toggles the display of the accordion content when the header is clicked.

Modal Component:

A modal component is a UI element that displays content on top of the current page. Here’s an example implementation:

   <button onclick=”openModal()”>Open Modal</button>

   <div id=”modal” class=”modal” style=”display: none;”>

     <div class=”modal-content”>

       <span class=”close” onclick=”closeModal()”>&times;</span>

       <p>Modal content goes here.</p>

     </div>

   </div>

   <script>

     const modal = document.querySelector(“#modal”);

     function openModal() {

       modal.style.display = “block”;

     }

     function closeModal() {

       modal.style.display = “none”;

     }

   </script>

This implementation uses HTML, CSS, and JavaScript to create a modal that appears when a button is clicked. The JavaScript code toggles the display of the modal when the openModal() or closeModal() functions are called.

Tabs Component:

A tabs component is a UI element that allows users to switch between different sections of content. Here’s an example implementation:

   <div class=”tabs”>

     <div class=”tabs-header”>

       <button class=”tab-button active” onclick=”showTab(0)”>Tab 1</button>

       <button class=”tab-button” onclick=”showTab(1)”>Tab 2</button>

       <button class=”tab-button” onclick=”showTab(2)”>Tab 3</button>

     </div>

     <div class=”tabs-content”>

       <div class=”tab-panel” style=”display: block;”>

         <p>Content for tab 1 goes here.</p>

       </div>

       <div class=”tab-panel” style=”display: none;”>

         <p>Content for tab 2 goes here.</p>

       </div>

       <div class=”tab-panel” style=”display: none;”>

         <p>Content for tab 3 goes here.</p>

       </div>

     </div>

   </div>

   <script>

     function showTab(tabIndex) {

       const tabButtons = document.querySelectorAll(“.tab-button”);

       const tabPanels = document.querySelectorAll(“.tab-panel”);

       for (let i = 0; i < tabButtons.length; i++) {

         if (i === tabIndex) {

           tabButtons[i].classList.add(“active”);

           tabPanels[i].style.display = “block”;

         } else {

           tabButtons[i].classList.remove(“active”);

           tabPanels[i].style.display = “none”;

         }

       }

     }

   </script>

This implementation uses HTML, CSS, and JavaScript to create a set of tabs that switch between different sections of content. The JavaScript code toggles the active class and the display style of the tab buttons and panels based on which tab is clicked.

Menu Component:

A menu component is a UI element that displays a list of options that users can choose from. Here’s an example implementation:

   <div class=”menu”>

     <button class=”menu-toggle” onclick=”toggleMenu()”>Menu</button>

     <ul class=”menu-items” style=”display: none;”>

       <li><a href=”#”>Option 1</a></li>

       <li><a href=”#”>Option 2</a></li>

       <li><a href=”#”>Option 3</a></li>

     </ul>

   </div>

   <script>

     const menuItems = document.querySelector(“.menu-items”);

     function toggleMenu() {

       if (menuItems.style.display === “none”) {

         menuItems.style.display = “block”;

       } else {

         menuItems.style.display = “none”;

       }

     }

   </script>

This implementation uses HTML, CSS, and JavaScript to create a menu that displays a list of options when a button is clicked. The JavaScript code toggles the display of the menu items when the toggleMenu() function is called.