DOM + Modern JS - Class II

Lecture 43 :- DOM + Modern JS - Class II

In "DOM + Modern JS - Class II," we'll continue exploring more advanced DOM manipulation techniques and modern JavaScript concepts. We'll cover topics such as event delegation, working with forms, using fetch API for AJAX requests, and using modern JavaScript features like async/await. Let's dive in:

Event Delegation (Continued): Event delegation allows you to handle events on multiple elements efficiently, especially for dynamically generated content.

Working with Forms: You can work with form elements and handle form submissions.

Fetch API and AJAX Requests: Fetch API allows you to make AJAX requests to retrieve data from APIs or web servers.

Async/Await: Async/await provides a cleaner way to work with promises and asynchronous code.

Local Storage: Local Storage allows you to store key-value pairs locally in the user's browser.

Creating and Using Modules: Organize your code into modules for better maintainability and code reuse.

These are some more advanced DOM manipulation techniques and modern JavaScript concepts to enhance your web development skills. Practice regularly and explore real-world projects to become proficient in these topics.

If you have any specific questions or need further clarification on any topic, feel free to ask! Happy coding!

javascriptCopy code

// Module: utils.js export function add(a, b) {  return a + b; } // Module: main.js import { add } from "./utils.js"; const result = add(3, 5); // Output: 8

javascriptCopy code

// JavaScript localStorage.setItem("username", "John"); // Store data const username = localStorage.getItem("username"); // Retrieve data localStorage.removeItem("username"); // Remove data localStorage.clear(); // Clear all data

javascriptCopy code

// JavaScript async function fetchData() {  try {    const response = await fetch("https://api.example.com/data");    const data = await response.json();    // Process data  } catch (error) {    console.error("Error fetching data: " + error);  } } fetchData();

javascriptCopy code

// JavaScript fetch("https://api.example.com/data")  .then((response) => response.json())  .then((data) => {    // Process data  })  .catch((error) => {    console.error("Error fetching data: " + error);  });

javascriptCopy code

// JavaScript const myForm = document.getElementById("myForm"); myForm.addEventListener("submit", function (event) {  event.preventDefault(); // Prevent default form submission behavior  const formData = new FormData(event.target);  const username = formData.get("username");  const password = formData.get("password");  // Process form data or send it to the server });

htmlCopy code

<!-- HTML --> <form id="myForm">  <input type="text" name="username" />  <input type="password" name="password" />  <button type="submit">Submit</button> </form>

javascriptCopy code

// JavaScript const todoList = document.getElementById("todoList"); todoList.addEventListener("click", function (event) {  if (event.target.classList.contains("deleteBtn")) {    event.target.parentElement.remove();  } });

htmlCopy code

<!-- HTML --> <ul id="todoList">  <li>Task 1 <button class="deleteBtn">Delete</button></li>  <li>Task 2 <button class="deleteBtn">Delete</button></li>  <!-- More dynamically added tasks with delete buttons --> </ul>