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.
Below are the methods to create a dynamic user interface in JavaScript:
Table of Content
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.
<!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>
<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:
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.
<!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>
<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:
