Dynamic User Interfaces in JavaScript
Last Updated :
19 Jun, 2024
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:
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:
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:
Similar Reads
Implementing Interfaces in JavaScript In JavaScript, there is no built-in concept of interfaces like you might find in languages like Java or C#. However, you can achieve similar functionality by defining and implementing your own interfaces using objects and classes. In this explanation, this article will guide you through the process
2 min read
JavaScript - How is JS Dynamically Typed ? Writing a data type (like we do in C/C++/Java) is not requiredA variable name can hold any type of informationMainly data type is stored with value (not with variable name) and is decided & checked at run timeJavaScriptlet x = 42; console.log(x) x = "hello"; console.log(x) x = [1, 2, 3] console.
1 min read
Generics Interface in typescript "A major part of software engineering is building components that not only have well-defined and consistent APIs but are also reusable. " This sentence is in the official documentation we would start with. There are languages that are strong in static typing & others that are weak in dynamic typ
5 min read
Interfaces in TypeScript TypeScript is a statically typed superset of JavaScript that adds optional types, classes, interfaces, and other features to help developers build robust and maintainable applications. One of the most powerful features of TypeScript is interfaces, which allow you to define the structure of objects,
4 min read
How Dynamic Arrays Work in JavaScript ? A dynamic array, also known as a resizable array or a dynamic array list, is a data structure that allows its size to be changed dynamically during program execution. Unlike static arrays, which have a fixed size determined at the time of declaration, dynamic arrays can grow or shrink in size as nee
3 min read