In this lecture, Harkirat addresses the challenges encountered in vanilla JavaScript while building a Todo application. Focusing on the limitations of manual DOM manipulation and the lack of a centralized statethe discussion sets the context for transitioning to React. The session highlights the pain points faced during development and introduces React's declarative and component-based approach as a solution for more efficient and scalable web development.
DOM manipulation, in its raw form, poses significant challenges for developers. Constructing dynamic websites using the basic primitives offered by the DOM—such as document.createElement, document.appendChild, element.setAttribute, and element.children—can be a complex and labor-intensive process. The inherent difficulty lies in orchestrating intricate interactions and updates within the document structure using these primitive tools.
Recognizing the intricacies involved, React, a JavaScript library, emerged as a powerful solution. React abstracts away much of the manual DOM manipulation complexity, providing developers with a declarative and component-based approach to building user interfaces. This abstraction not only enhances code readability and maintainability but also simplifies the creation of dynamic and interactive web applications.
However, before jumping directly into React, let's us first try building a simple todo application using vanilla JavaScript. This exercise will serve a dual purpose—it will not only reinforce your JavaScript concepts but also allow you to grasp the problem statement, setting the stage to appreciate the elegance of React even more.
In today's session, our focus shifts to constructing a straightforward todo application. Unlike the previous day's example where we were overwriting the innerHTML to display results of calculateSum, today's task involves a different approach. We aim to append elements instead of overwriting them, creating a more seamless user experience. The goal is to have all entered todos consistently displayed on the screen, eliminating the abrupt resetting of content and ensuring a continuous and fluid representation of the user's input.
First, let's take a comprehensive look at the entire code for building the frontend of a Todo Application in vanilla JavaScript. Later, we will delve deep into each line and component of the code to gain a thorough understanding of its workings.
<body>
<input type="text" id="title" placeholder="Todo title"></input> <br /><br />
<input type="text" id="description" placeholder="Todo description"></input> <br /><br />
<button onclick="addTodo()">Add todo</button>
<br /> <br />
<div id="todos">
</div>
</body>
<script>
let globalId = 1;
function markAsDone (todoId) {
const parent = document.getElementById(todoId);
parent.children[2].innerHTML = "Done!"
}
function createChild(title, description, id) {
const child = document.createElement("div");
const firstGrandParent = document.createElement("div");
firstGrandParent.innerHTML = title;
const secondGrandParent = document.createElement("div");
secondGrandParent.innerHTML = description;
const thirdGrandParent = document.createElement("button");
thirdGrandParent.innerHTML = "Mark as done";
thirdGrandParent.setAttribute("onclick", `markAsDone(${id})`);
child.appendChild(firstGrandParent);
child.appendChild(secondGrandParent);
child.appendChild(thirdGrandParent);
child.setAttribute("id", id);
return child;
}
function addTodo() {
const title = document.getElementById("title").value;
const description = document.getElementById("description").value;
const parent = document.getElementById("todos");
parent.appendChild(createChild(title, description, globalId++));
}
</script>