JavaScript DOM Manipulation and Fetch API Usage

Introduction: In this blog post, we will explore two important concepts in JavaScript: DOM manipulation and Fetch API. We'll learn how to manipulate the DOM to change element properties and dynamically create elements. Additionally, we'll see how to use the Fetch API to make asynchronous requests to external APIs.

Snippet 1: Changing Element Color Here's an example code snippet that demonstrates how to change the colour of an element when a button is clicked:

const button = document.getElementById('btn');
const colors = document.getElementById("h4");

button.addEventListener("click", () => {
    if (colors.style.color === 'red') {
        colors.style.color = "blue";
    } else {
        colors.style.color = "red";
    }
});

Explanation: This code snippet showcases event handling and modifying CSS properties dynamically. When the button is clicked, the colour of the h4 element toggles between red and blue. By accessing the element's style object, we can change its colour property to achieve the desired effect.

Snippet 2: Dynamically Creating Elements In this code snippet, we'll see how to create a new h1 element and append it to a container when a button is clicked:

const button = document.getElementById("btn");
const container = document.getElementById("my-container");

button.addEventListener("click", () => {
    const el = document.createElement("h1");
    el.innerText = "Bhavin Ondhiya";
    container.appendChild(el);
});

Explanation: By utilizing the createElement method, we create a new h1 element. We set its innerText property to "Bhavin Ondhiya" and then append it to the container element. This demonstrates how elements can be created dynamically and manipulated as needed.

Snippet 3: Fetch API Usage The Fetch API allows us to make asynchronous requests to external APIs. Here's an example of how to use Fetch to retrieve data:

 codefetch("https://jsonplaceholder.typicode.com/posts")
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    })
    .finally(() => {
        console.log("Request completed");
    });

Explanation: Using the Fetch API, we make a GET request to the provided URL. The returned response object contains information such as the response status, headers, and data. By utilizing the .then and .catch methods, we handle the success and error scenarios respectively. The .finally method is used to perform actions that should execute regardless of the request's outcome.

Conclusion: In this blog post, we explored JavaScript DOM manipulation techniques, including changing element colours and dynamically creating elements. We also saw how to use the Fetch API to make asynchronous requests and handle responses. By mastering these concepts, you'll have a strong foundation for building interactive web applications.

Remember to provide further explanations, examples, and additional insights as needed for each code snippet.