Dynamic User Interfaces in JavaScript - Coding

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.

Below are the methods to create a dynamic user interface in JavaScript:

Table of Content

DOM Manipulation
Web APIs and AJAX

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

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>

Output:

dynamic-interface-ex-2

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
Javascript Program to Build a Morse Code Converter
JavaScript Program for Inverse t Distribution Calculator
JavaScript Program for Making a Case for Signals
JavaScript Program for Bartlett's Test Calculator
JavaScript Program for Kruskal-Wallis Test Calculator

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	11