Added week 4

hkirat · hkirat · commit 74b79ea57863 · 2023-12-26T00:01:13.000+05:30
diff --git a/week-4/README.md b/week-4/README.md
@@ -0,0 +1,19 @@
+You have been given the code of a purely frontend TODO app
+You have to fill in the following functions - 
+ - addTodoToDom
+ - removeTodoFromDom
+ - updateTodoInDom
+ - updateState
+
+These 4 functions comprise of what it means to create a library like React.
+The goal is the following - 
+1. Any time the updateState function is called with a new state, the updateState function calculates the diff between newTodos and oldTodos and call `addTodoToDom`, `removeTodoFromDom` or `updateState` based on the calculated diff.
+2. They id of a todo uniquely identifies it. If the title of a todo with the same id changes in two iterations, updateTodoInDom should be called for it.
+3. The structure of the state variable looks something like this - 
+```js
+    const todos = [{
+        title: "Go to gym",
+        description: "Go to gym from 7-8PM",
+        id: 1
+    }]
+```
diff --git a/week-4/index.html b/week-4/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script>
+    let globalId = 1;
+    let todoState = [];
+    let oldTodoState = [];
+
+    function addTodoToDom() {
+      
+    }
+
+    function removeTodoFromDom(todo) {
+      
+    }
+
+    function updateTodoInDom(oldTodo, newTodo) {
+        
+    }
+
+    function updateState(newTodos) {
+      // calculate the diff b/w newTodos and oldTodos.
+      // More specifically, find out what todos are - 
+      // 1. added
+      // 2. deleted
+      // 3. updated
+      const added = [];
+      const deleted = [];
+      const updated = [];
+      // calculate these 3 arrays
+      // call addTodo, removeTodo, updateTodo functions on each of the
+      // elements
+      oldTodoState = newTodos;
+    }
+
+    function addTodo() {
+      const title = document.getElementById("title").value;
+      const description = document.getElementById("description").value;
+      todoState.push({
+        title: title,
+        description: description,
+        id: globalId++,
+      })
+      updateState(todoState);
+    }
+  </script>
+</head>
+
+<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>
+
+</html>
