Dynamic User Interfaces in JavaScript

Last Updated : 03 Oct, 2023

In this article, we will learn about Dynamic User Interfaces in JavaScript, User interfaces (UIs) have evolved from static layouts to dynamic and interactive experiences and JavaScript is a versatile and powerful programming language that plays a significant role in creating dynamic UIs that respond to user actions in real time.

There are several methods that can be used to create a dynamic user interface in JavaScript, which are listed below:

We will explore the above methods along with their basic implementation with the help of examples.

Approach 1: DOM Manipulation

DOM manipulation involves using JavaScript to modify web page elements, their properties, and content dynamically, creating interactive and responsive user interfaces. With this approach, you can add or remove elements on a web page based on user interactions.

Example : In this example HTML document uses JavaScript for DOM manipulation, toggling the visibility of an element when a button is clicked, making it visible if hidden, and vice versa.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> The DOM Manipulation</title> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <button id="Button"> 
        Toggle Element 
    </button> 
    <div id="element" style="display: none;"> 
        Welcome to GeeksforGeeks Website! 
    </div> 
    <script> 
        let button = document.getElementById("Button"); 
        let element = document.getElementById("element"); 
        button.addEventListener("click", function () { 
            if (element.style.display === "none" 
                || element.style.display === "") { 
                element.style.display = "block"; 
            } else { 
                element.style.display = "none"; 
            } 
        }); 
    </script> 
</body> 
  
</html>

Output:

dynamic-interface-ex-1

Approach 2: Web APIs and AJAX

The Dynamic UIs often involve retrieving data from the external sources and updating the UI accordingly Using the Web APIs and AJAX you can fetch data from the servers without requiring a page refresh.

Example: In this example HTML document uses JavaScript with XMLHttpRequest to fetch data from a JSON API when a button is clicked and displays the fetched title in a div element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Web</title> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <button id="Button"> 
        Fetch Data 
    </button> 
    <div id="data1"></div> 
    <script> 
        let Button = document.getElementById("Button"); 
        let data1 = document.getElementById("data1"); 
        Button.addEventListener("click", () => { 
            let x = new XMLHttpRequest(); 
            x.open("GET", 
"https://jsonplaceholder.typicode.com/posts/1", true); 
            x.onload = function () { 
                if (x.status === 200) { 
                    const data = JSON.parse(x.responseText); 
                    data1.textContent = `Title: ${data.title}`; 
                } else { 
                    console.error( 
                          "Request failed with status:", x.status); 
                } 
            }; 
            x.onerror = function () { 
                console.error( 
                      "An error occurred during the request."); 
            }; 
            x.send(); 
        }); 
    </script> 
</body> 
  
</html>