Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Week3 assignment #272

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Week3 assignment #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
af97c30
executed and modified script-less-ugly.js file
Vasant18 Aug 24, 2024
60cef3e
executed and modified script-ugly.js file
Vasant18 Aug 24, 2024
c2c0a8f
executed and modified vdom and reconsilers
Vasant18 Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 192 additions & 59 deletions week-3/01-reconciler/script-less-ugly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,204 @@
/** ==========================================================================================
IN THIS FILE WE ARE GOING TO FIND THE DIFFERENCE DDOMS AND INSTED OF REMOVING AND ADDDING THE WHOLE DOM (WHICH IS VERY INEFFICIENT) WE WILL FIND THE DIFF AND ALOS JUST UPDATE THE CHANGES IN THE EXCISTING DOM , (THIS IS WHAT REACT DOES BEHIND THE SCENES).
========================================================================================== */


document.addEventListener('DOMContentLoaded', (event) => {
var parentElement = document.getElementById("mainArea");
console.log(parentElement);
// Ensure no DOM manipulation code is placed before this log statement
});

// var parentElement = document.getElementById("mainArea");
function createDomElements(data) {
var parentElement = document.getElementById("mainArea");
var parentElement = document.getElementById("mainArea");
console.log(parentElement);

// Get the current children of the parent element and convert it to an array
var currentChildren = Array.from(parentElement.children);
// Get the current children of the parent element and convert it to an array
var currentChildren = Array.from(parentElement.children);
console.log(currentChildren);

let added = 0, deleted = 0, updated = 0;
// Process each item in the data array
data.forEach(function(item) {
// Check if a child with this ID already exists
var existingChild = currentChildren.find(function(child) {
return child.dataset.id === String(item.id);
});
let added = 0, deleted = 0, updated = 0;
// Process each item in the data array
data.forEach(function (item) {
// Check if a child with this ID already exists
var existingChild = currentChildren.find(function (child) {
console.log(child.dataset.id);
console.log(String(item.id));
return child.dataset.id === String(item.id);
});
console.log(existingChild);

if (existingChild) {
updated++;
// If it exists, update it
existingChild.children[0].innerHTML = item.title;
existingChild.children[1].innerHTML = item.description;
// Remove it from the currentChildren array
currentChildren = currentChildren.filter(function(child) {
return child !== existingChild;
});
} else {
added++;
// If it doesn't exist, create it
var childElement = document.createElement("div");
childElement.dataset.id = item.id; // Store the ID on the element for future lookups

var grandChildElement1 = document.createElement("span");
grandChildElement1.innerHTML = item.title

var grandChildElement2 = document.createElement("span");
grandChildElement2.innerHTML = item.description

var grandChildElement3 = document.createElement("button");
grandChildElement3.innerHTML = "Delete"
grandChildElement3.setAttribute("onclick", "deleteTodo(" + item.id + ")")

childElement.appendChild(grandChildElement1)
childElement.appendChild(grandChildElement2)
childElement.appendChild(grandChildElement3)
parentElement.appendChild(childElement);
}
});
if (existingChild) {
updated++;
// If it exists, update it

existingChild.children[0].innerHTML = item.title;
console.log(existingChild.children[0].innerHTML);
existingChild.children[1].innerHTML = item.description;
console.log(existingChild.children[1].innerHTML);

// Remove it from the currentChildren array
// currentChildren = currentChildren.filter(function(child) {
// console.log(child !== existingChild); //if existingChild is not equal to child, push to currentChildren, if equal, remove .
// console.log(currentChildren);
// return child !== existingChild;
// });


// Assuming existingChild is defined somewhere above this code
// and currentChildren is an array of child elements

// Initialize an empty array to hold the filtered results
var filteredChildren = [];

// Loop through each element in the currentChildren array
for (var i = 0; i < currentChildren.length; i++) {
console.log(currentChildren.length);
console.log(currentChildren[i]);
var child = currentChildren[i];

// Check if the current child is not the existingChild
if (child !== existingChild) {
console.log(child);
console.log(existingChild);
// If it's not the existingChild, add it to the filteredChildren array
filteredChildren.push(child);
console.log(filteredChildren);
} else {
// Optionally, log the existingChild being removed
// This will only log when the existingChild is found
console.log("Removing existingChild:", child);
}
}

// After the loop, filteredChildren contains all elements except existingChild
// Reassign currentChildren to the new array without existingChild
currentChildren = filteredChildren;

// At this point, currentChildren no longer includes existingChild


console.log(currentChildren);
} else {
added++;
// If it doesn't exist, create it
var childElement = document.createElement("div");
childElement.dataset.id = item.id; // Store the ID on the element for future lookups
console.log(childElement.dataset.id);
var grandChildElement1 = document.createElement("span");
grandChildElement1.innerHTML = item.title
console.log(grandChildElement1.innerHTML);

// Any children left in the currentChildren array no longer exist in the data, so remove them
currentChildren.forEach(function(child) {
deleted++;
parentElement.removeChild(child);
});
var grandChildElement2 = document.createElement("span");
grandChildElement2.innerHTML = item.description
console.log(grandChildElement2.innerHTML);

console.log(added);
console.log(updated);
console.log(deleted);
var grandChildElement3 = document.createElement("button");
grandChildElement3.innerHTML = "Delete"
grandChildElement3.setAttribute("onclick", "deleteTodo(" + item.id + ")")

childElement.appendChild(grandChildElement1)
childElement.appendChild(grandChildElement2)
childElement.appendChild(grandChildElement3)
parentElement.appendChild(childElement);
}
});

// Any children left in the currentChildren array no longer exist in the data, so remove them
currentChildren.forEach(function (child) {
deleted++;
parentElement.removeChild(child);
});

console.log(added);
console.log(updated);
console.log(deleted);
}


// for (let i = 0; i < data.length; i++) {
// let item = data[i];
// let existingChild = null;

// // Find existing child
// for (let j = 0; j < currentChildren.length; j++) {
// if (currentChildren[j].dataset.id === String(item.id)) {
// existingChild = currentChildren[j];
// break; // Stop searching once found
// }
// }

// if (existingChild) {
// updated++;
// // Update existing child
// existingChild.children[0].innerHTML = item.title;
// existingChild.children[1].innerHTML = item.description;

// // Remove the existing child from currentChildren
// let tempChildren = [];
// for (let k = 0; k < currentChildren.length; k++) {
// if (currentChildren[k] !== existingChild) {
// tempChildren.push(currentChildren[k]);
// }
// }
// currentChildren = tempChildren;
// } else {
// added++;
// // Create new child
// let childElement = document.createElement("div");
// childElement.dataset.id = item.id;
// let grandChildElement1 = document.createElement("span");
// grandChildElement1.innerHTML = item.title;
// let grandChildElement2 = document.createElement("span");
// grandChildElement2.innerHTML = item.description;
// let grandChildElement3 = document.createElement("button");
// grandChildElement3.innerHTML = "Delete";
// grandChildElement3.setAttribute("onclick", "deleteTodo(" + item.id + ")");
// childElement.appendChild(grandChildElement1);
// childElement.appendChild(grandChildElement2);
// childElement.appendChild(grandChildElement3);
// parentElement.appendChild(childElement);
// }
// }

// // Remove any children left in currentChildren
// for (let i = 0; i < currentChildren.length; i++) {
// deleted++;
// parentElement.removeChild(currentChildren[i]);
// }

// console.log(added);
// console.log(updated);
// console.log(deleted);
// }


window.setInterval(() => {
let todos = [];
for (let i = 0; i<Math.floor(Math.random() * 100); i++) {
todos.push({
title: "Go to gym",
description: "Go to gym form 5",
id: i+1
})
}

createDomElements(todos)
let todos = [];
var todoGen = Math.floor(Math.random() * 10);
console.log(todoGen);
for (let i = 0; i < todoGen; i++) {
todos.push({
title: "Go to gym",
description: "Go to gym form 5",
id: i + 1
})
}
console.log(todos);
createDomElements(todos)
}, 5000)


// let todos = [];
// var todoGen = Math.floor(Math.random() * 10);
// console.log(todoGen);
// for (let i = 0; i < todoGen; i++) {
// todos.push({
// title: "Go to gym",
// description: "Go to gym form 5",
// id: i + 1
// })
// }
// console.log(todos);
// createDomElements(todos);
85 changes: 83 additions & 2 deletions week-3/01-reconciler/script-ugly.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,14 @@ function createDomElements(data) {
console.log(added);
}


//THE ABOVE IS i.e createDomElements THE RECOSILER FUNCTION , we have done the updating and deleting logic in this function so that others don't need to dwell into the DOM and all things they just specify things like what to be added and deleted and how many times etc ,for like this in numerous other cases , THIS IS WHAT REACT DOES BEHIND THE SCENES.



window.setInterval(() => {
let todos = [];
for (let i = 0; i<Math.floor(Math.random() * 100); i++) {
for (let i = 0; i < Math.floor(Math.random() * 100); i++) {
todos.push({
title: "Go to gym",
description: "Go to gym form 5",
Expand All @@ -43,4 +48,80 @@ function createDomElements(data) {

createDomElements(todos)
}, 5000)





/** USING REACT TO IMPLEMT THE ABOVE FUNCTIONALITY


*Set Up a React Project:
npx create-react-app my-react-app
cd my-react-app


*Create the React Component:
import React, { useState, useEffect } from 'react';

function TodoList() {
const [todos, setTodos] = useState([]);

useEffect(() => {
const interval = setInterval(() => {
const newTodos = [];
for (let i = 0; i < Math.floor(Math.random() * 100); i++) {
newTodos.push({
title: "Go to gym",
description: "Go to gym from 5",
id: i + 1
});
}
setTodos(newTodos);
}, 5000);

return () => clearInterval(interval);
}, []);

const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};

return (
<div id="mainArea">
{todos.map(item => (
<div key={item.id} data-id={item.id}>
<span>{item.title}</span>
<span>{item.description}</span>
<button onClick={() => deleteTodo(item.id)}>Delete</button>
</div>
))}
</div>
);
}

export default TodoList;




*Render the React Component:

Use the Component in Your App:
import React from 'react';
import './App.css';
import TodoList from './TodoList';

function App() {
return (
<div className="App">
<header className="App-header">
<h1>Todo List</h1>
<TodoList />
</header>
</div>
);
}

export default App;

*/
12 changes: 10 additions & 2 deletions week-3/01-reconciler/script-vdom-batch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@

/**
* THIS IS SIMILAR TO SCRIPT VDOM COMPARISON BUT INSTEAD OF UPDATING THE DOM IMMEDIATELY AFTER EACH CHANGE IS DETECTED,
* WE BATCH MULTIPLE UPDATES TOGETHER AND APPLY THEM TO THE DOM IN A SINGLE OPERATION. THIS FURTHER REDUCES THE NUMBER
* OF DOM MANIPULATIONS, LEADING TO EVEN BETTER PERFORMANCE.
*/


let vDOM = []; // Our initial vDOM is an empty array

function createDomElements() {
Expand Down Expand Up @@ -77,10 +85,10 @@ window.setInterval(() => {
}

updateVirtualDom(todos);
}, 5000);
}, 5000); // Every 5 seconds, we'll update our vDOM with new data

window.setInterval(() => {
createDomElements();
}, 1000);
}, 1000); // Every second, we'll update our actual DOM with the new vDOM


Loading