Added Todo List Feature

[Thunder-Blaze]

Description

Added a ToDo List on the right corner of the page.

• Followed the default colorscheme.
• The todo list has an input box to add items.
• You can either click the plus button or press enter to add an item
• It alerts the user to write something if the input field is empty
• And each added item has a remove button to remove them from the list.
• You can check the list item by clicking on it.
• The list will automatically reset after 23:59

Related Issues

• Closes Add To Do List #255

Checklist

• I have read and followed the Contributing Guidelines.
• The ToDo List refreshes next day automatically
• I have done necessary testing.
• Added a toggle for Todo List in Settings Page

New.Tab.-.Brave.2024-12-14.22-16-02.mp4

New.Tab.-.Brave.2024-12-14.23-05-07.mp4

[prem-k-r]

Great work, really impressive!
It would be even better if you could add a toggle to hide or show the ToDo list in the menu.

[Thunder-Blaze]

Done :D
there is only one Issue, the To Do List auto closes (as it looses focus) when a item is removed from it

[prem-k-r]

Btw guys, on an unrelated note, I noticed that the menu icon is not perfectly centered in the screen recording.

[Thunder-Blaze]

hmm, can you clarify which menu icon are we talking about

[prem-k-r]

hmm, can you clarify which menu icon are we talking about

No worries bro,
As I said, it's unrelated to the changes made in the PR

[prem-k-r]

I can only add new items in list.. unable to delete or complete it
error:

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
Understand this errorAI
index.html:1337 Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

[prem-k-r]

in windows/chrome

[prem-k-r]

There is one minor issue.. upon page reload, todo icon briefly flash in default blue color theme for a split second.
this is also for google apps 9-dot icon.
check 6fa436a , same approach can be used

Also can you please make alert translatable like other alerts

No hurry bro.. take your time

[prem-k-r]

Wrong translation

[Thunder-Blaze]

¯\_(ツ)_/¯ Used google translate

[prem-k-r]

Odd, they transliterated it lol

[itz-rj-here]

He translation should be "তোমার কিছু লেখা উচিত"

[Thunder-Blaze]

I gave up on languages I don't know.
Someone who knows them can maybe add them later in language.js :)

[prem-k-r]

Also wrong.
Other languages could also be incorrect.
You can leave the translations for languages you're not familiar with.

[Thunder-Blaze]

sure I'll leave the translations then 👍

[Thunder-Blaze]

done

[prem-k-r]

Thanks.

Please do same for ToDo icon

[Thunder-Blaze]

it works for both as I reused the dot-icon class for the to do icon

[prem-k-r]

Ohk nice

[Thunder-Blaze]

I checked it on Chrome, Brave and Firefox (Windows), so I think it should work properly
but you can check again for cross-platform or cross-browser compatibility issues

New.Tab.-.Google.Chrome.2024-12-15.01-33-57.1.mp4

[prem-k-r]

You removed Hindi too for you must write something by mistake
Translation for toggle, and To Do list and placeholder type here.. these four are missing
Placeholder Type here... can be To-do..., Add task..., New task..., Add item..., New item..., etc.
Rest seems okay

[Thunder-Blaze]

I added the translation for toggle, and To Do list and placeholder in English and Hindi
Oh should I change the placeholder to Add task ?

[prem-k-r]

I added the translation for toggle, and To Do list and placeholder in English and Hindi Oh should I change the placeholder to Add task ?

Yeah, would be better, I think

[prem-k-r]

todoListHeading and todoInput missing

[Thunder-Blaze]

There was no need to write the same thing twice so I did this

Added the todoPlaceholder in my recent commit

[prem-k-r]

my bad, didn't noticed

[Thunder-Blaze]

no problem :)

[itz-rj-here]

looks like this new person is better than prem 😄

[prem-k-r]

Hehe.. I always miss something when checking from mobile

[Thunder-Blaze]

lol no, I am not better
I'm still learning from other great people
Before yesterday I didn't even knew what XSS was
so you have my thanks @prem-k-r

[itz-rj-here]

Nah we are just friends. Just making some fun. Thats all. 🙃
Don't worry.

[prem-k-r]

Extra

[prem-k-r]

Changed wrong

[Thunder-Blaze]

oh lol, I'll fix this in a min

[Thunder-Blaze]

done 👍

[Thunder-Blaze]

btw @prem-k-r

to

I tried fixing the icon but idk if this is right or not ?
If it is right then I'll commit and push the changes

[prem-k-r]

• When a task is marked as completed, the strikethrough data is not being saved; it reverts to a normal task after the page reloads.
• Assigning innerText directly from user input (e.g., li.innerText = todoInput.value) is not sanitized. This can still lead to XSS
• It would be better if clicking on to-do icon moves the cursor to the input area.
• Since you are using "\u00d7" (×), if it is contained within a task, it breaks the task into multiple tasks. Also, users can create blank tasks with it, but their row width is shortened.

You may switch to json based approach.. it will solve 2 and 4.

[Thunder-Blaze]

New.Tab.-.Brave.2024-12-15.16-44-54.mp4

I switched to JSON and this is the current situation
I don't know much about XSS (I thought since the h1 tag is getting rendered as normal text, XSS attacks will not work)

• Fixed the problem, now you cannot give empty spaces as input
• Now the strikethrough remains on reload
• Focus shifts to todo input box when clicked on Todo Icon
• You can now use the "\u00d7" (×) without breaking the todo task into parts

these all are getting rendered as normal text, so I think there should be no problem

[prem-k-r]

we generally use something like this
function sanitizeInput(input) {
const div = document.createElement('div');
div.textContent = input;
return div.innerHTML;
}

I ask chatgpt, it gave me following code.. please check..
there are other minors changes too..
note: there might be mistakes

// ----------------------------------- To Do List ----------------------------------------

// DOM elements for managing the To-Do list
const todoContainer = document.getElementById("todoContainer");
const todoListCont = document.getElementById("todoListCont");
const todoulList = document.getElementById("todoullist");
const todoAdd = document.getElementById("todoAdd");
const todoInput = document.getElementById("todoInput");
let todoList = {}; // Object to store To-Do items

// Utility function to sanitize input
function sanitizeInput(input) {
    const div = document.createElement('div');
    div.textContent = input;
    return div.innerHTML;
}

// Add a new To-Do item on button click or "Enter" keypress
todoAdd.addEventListener("click", addtodoItem);
todoInput.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
        addtodoItem();
    }
});

function addtodoItem() {
    const inputText = todoInput.value.trim();

    // Alert user if input is empty
    if (inputText === '') {
        alert(translations[currentLanguage]?.emptytodoinput || translations['en'].emptytodoinput);
        return;
    }

    const sanitizedText = sanitizeInput(inputText); // Prevent unsafe input

    // Create a new list item with the sanitized input
    let li = document.createElement('li');
    li.textContent = sanitizedText;

    // Add a remove button to the item
    const span = document.createElement("span");
    span.setAttribute("class", "todoremovebtn");
    span.textContent = "\u00d7";

    li.appendChild(span);
    li.addEventListener("click", SetTaskCheckEvent); // Attach event listener for item actions
    li.setAttribute("class", "todolistitem");

    // Generate a unique ID for the item using the current timestamp
    const t = "t" + Date.now();
    li.setAttribute("data-todoitem", t);

    // Store the new item in the todoList object
    todoList[t] = { title: sanitizedText, status: "pending" };
    todoulList.appendChild(li);

    todoInput.value = ''; // Clear the input field
    SaveToDoData(); // Persist the updated list in localStorage
}

// Event handler for marking items as completed or removing them
var SetTaskCheckEvent = (event) => {
    if (event.target.tagName === "LI") {
        // Toggle "checked" status for the item
        event.target.classList.toggle("checked");
        const id = event.target.dataset.todoitem;
        todoList[id].status = todoList[id].status === "completed" ? "pending" : "completed";
        SaveToDoData(); // Update localStorage
    } else if (event.target.tagName === "SPAN") {
        // Remove the item from the list and delete it from the object
        const id = event.target.parentElement.dataset.todoitem;
        event.target.parentElement.remove();
        delete todoList[id];
        SaveToDoData(); // Update localStorage
    }
};

// Save the current state of the To-Do list to localStorage
function SaveToDoData() {
    try {
        localStorage.setItem("todoList", JSON.stringify(todoList));
    } catch (error) {
        console.error("Error saving to localStorage:", error); // Log storage errors
    }
}

// Load and display the To-Do list from localStorage
function ShowToDoList() {
    try {
        todoList = JSON.parse(localStorage.getItem("todoList")) || {}; // Parse stored data or initialize empty

        for (let id in todoList) {
            const todo = todoList[id];

            // Create a list item for each saved To-Do
            let li = document.createElement('li');
            li.textContent = sanitizeInput(todo.title);

            const span = document.createElement("span");
            span.setAttribute("class", "todoremovebtn");
            span.textContent = "\u00d7";

            li.appendChild(span);
            li.addEventListener("click", SetTaskCheckEvent);
            li.setAttribute("class", "todolistitem");

            // Add "checked" class if the item is completed
            if (todo.status === 'completed') {
                li.classList.add("checked");
            }

            li.setAttribute("data-todoitem", id);
            todoulList.appendChild(li);
        }
    } catch (error) {
        console.error("Error loading from localStorage:", error);
        localStorage.setItem("todoList", '{}'); // Reset corrupted data
    }
}

// Initialize the To-Do list based on the date to separate daily tasks
let todoLastUpdateDate = localStorage.getItem("todoLastUpdateDate");
let todoCurrentDate = new Date().toLocaleDateString();

if (todoLastUpdateDate === todoCurrentDate) {
    ShowToDoList(); // Load existing tasks if the date matches
} else {
    // Reset list for a new day
    localStorage.setItem("todoLastUpdateDate", todoCurrentDate);
    localStorage.setItem("todoList", '{}');
    ShowToDoList();
}

// Toggle menu and tooltip visibility
todoListCont.addEventListener("click", function (event) {
    const isMenuVisible = todoContainer.style.display === 'grid';

    // Toggle menu visibility and adjust tooltip
    todoContainer.style.display = isMenuVisible ? 'none' : 'grid';
    if (!isMenuVisible) {
        todoListCont.classList.add('menu-open');
        todoInput.focus(); // Focus input when menu opens
    } else {
        todoListCont.classList.remove('menu-open');
    }
});

// Close menu when clicking outside the To-Do list or menu button
document.addEventListener("click", function (event) {
    const isClickInside = todoContainer.contains(event.target) ||
        todoListCont.contains(event.target) ||
        event.target.classList.contains('todoremovebtn');

    if (!isClickInside && todoContainer.style.display === 'grid') {
        // Hide menu and restore tooltip
        todoContainer.style.display = 'none';
        todoListCont.classList.remove('menu-open');
    }

    event.stopPropagation(); // Prevent event bubbling
});

// ------------------------------- End of To Do List -------------------------------------

[Thunder-Blaze]

thanks, this helped me learn new js functions
but there is a problem when we are sanitizing the text

this becomes this

after reloading the page

I think as long as we are getting the data using innerText there should be no XSS vulnerabilities, I even tried the methords of XSS attacks but there were no problems without even sanitizing the input
(I added screenshots in my previous comment)

What do you suggest ?

[prem-k-r]

Actually, most likely, this will give security warnings in firefox add-on update

[prem-k-r]

but there is a problem when we are sanitizing the text this becomes this after reloading the page

The problem occurs because the text is sanitized twice.. once during input storage and again when rendering from localStorage
chatgpt:

// Utility function to sanitize input for DOM rendering
function sanitizeInput(input) {
    const div = document.createElement('div');
    div.textContent = input;
    return div.innerHTML;
}

function addtodoItem() {
    const inputText = todoInput.value.trim();

    if (inputText === '') {
        alert(translations[currentLanguage]?.emptytodoinput || translations['en'].emptytodoinput);
        return;
    }

    const t = "t" + Date.now(); // Unique ID
    const rawText = inputText; // Store raw text

    // Store raw text in the todoList object
    todoList[t] = { title: rawText, status: "pending" };

    // Create and append DOM element with sanitized text
    createTodoItemDOM(t, rawText, "pending");

    todoInput.value = ''; // Clear input
    SaveToDoData(); // Save changes
}

function createTodoItemDOM(id, title, status) {
    let li = document.createElement('li');
    li.innerHTML = sanitizeInput(title); // Sanitize before rendering in DOM

    const span = document.createElement("span");
    span.setAttribute("class", "todoremovebtn");
    span.textContent = "\u00d7";

    li.appendChild(span);
    li.addEventListener("click", SetTaskCheckEvent);
    li.setAttribute("class", "todolistitem");

    if (status === 'completed') {
        li.classList.add("checked");
    }

    li.setAttribute("data-todoitem", id);
    todoulList.appendChild(li);
}

function ShowToDoList() {
    try {
        todoList = JSON.parse(localStorage.getItem("todoList")) || {};

        for (let id in todoList) {
            const todo = todoList[id];
            createTodoItemDOM(id, todo.title, todo.status);
        }
    } catch (error) {
        console.error("Error loading from localStorage:", error);
        localStorage.setItem("todoList", '{}');
    }
}

[prem-k-r]

Also it's a good practice to add minimal comments in code (script.js) :)

[Thunder-Blaze]

Done :)

I thought of doing the same but didn't as you said no use of innerHTML
Its working fine now, I used the code you provided 👍🏻

[prem-k-r]

Thanks.
I said no direct use..., nvm now lol

The code I gave didn't have changes from last commit of that time
33bae92
Please check this part

[Thunder-Blaze]

ah, I didn't knew what way was direct and what was indirect so don't mind me

and no need to worry about that

this line 357 will automatically deal with the problem when there is nothing set in local storage

[prem-k-r]

Ok perfect..

[prem-k-r]

This is last suggestion lol.
Current code is funtionality and security-wise perfect

Optimized version.. slightly reduces CPU and memory usage
This minimizes reflows for larger lists.

// ----------------------------------- To Do List ----------------------------------------

// DOM Variables
const todoContainer = document.getElementById("todoContainer");
const todoListCont = document.getElementById("todoListCont");
const todoulList = document.getElementById("todoullist");
const todoAdd = document.getElementById("todoAdd");
const todoInput = document.getElementById("todoInput");
let todoList = {}; // Initialize todoList JSON

// Add event listeners for Add button click or Enter key press
todoAdd.addEventListener("click", addtodoItem);
todoInput.addEventListener("keypress", (event) => {
    if (event.key === "Enter") {
        addtodoItem();
    }
});

// Utility function to sanitize input
function sanitizeInput(input) {
    const div = document.createElement('div');
    div.textContent = input;
    return div.innerHTML;
}

// Function to add items to the TODO list
function addtodoItem() {
    const inputText = todoInput.value.trim(); // Remove useless whitespaces
    if (inputText === '') {
        alert(translations[currentLanguage]?.emptytodoinput || translations['en'].emptytodoinput);
        return; // Return the function when the input is empty
    }
    const t = "t" + Date.now(); // Generate a Unique ID
    const rawText = inputText;
    todoList[t] = { title: rawText, status: "pending" }; // Add data to the JSON variable

    const li = createTodoItemDOM(t, rawText, "pending"); // Create List item
    todoulList.appendChild(li); // Append the new item to the DOM immediately

    todoInput.value = ''; // Clear Input
    SaveToDoData(); // Save changes
}

function createTodoItemDOM(id, title, status) {
    let li = document.createElement('li');
    li.innerHTML = sanitizeInput(title); // Sanitize before rendering in DOM
    const span = document.createElement("span"); // Create the Cross Icon
    span.setAttribute("class", "todoremovebtn");
    span.textContent = "\u00d7";
    li.appendChild(span); // Add the cross icon to the LI tag
    li.setAttribute("class", "todolistitem");
    if (status === 'completed') {
        li.classList.add("checked");
    }
    li.setAttribute("data-todoitem", id); // Set a data attribute to the li so that we can uniquely identify which li has been modified or deleted
    return li; // Return the created `li` element
}

// Event delegation for task check and remove
todoulList.addEventListener("click", (event) => {
    if (event.target.tagName === "LI") {
        event.target.classList.toggle("checked"); // Check the clicked LI tag
        let id = event.target.dataset.todoitem;
        todoList[id].status = ((todoList[id].status === "completed") ? "pending" : "completed"); // Update status
        SaveToDoData(); // Save Changes
    } else if (event.target.tagName === "SPAN") {
        let id = event.target.parentElement.dataset.todoitem;
        event.target.parentElement.remove(); // Remove the clicked LI tag
        delete todoList[id]; // Remove the deleted List item data
        SaveToDoData(); // Save Changes
    }
});

// Save JSON to local Storage
function SaveToDoData() {
    localStorage.setItem("todoList", JSON.stringify(todoList));
}

// Fetch saved JSON and create list items using it
function ShowToDoList() {
    try {
        todoList = JSON.parse(localStorage.getItem("todoList")) || {}; // Parse stored data or initialize empty
        const fragment = document.createDocumentFragment(); // Create a DocumentFragment
        for (let id in todoList) {
            const todo = todoList[id];
            const li = createTodoItemDOM(id, todo.title, todo.status); // Create `li` elements
            fragment.appendChild(li); // Add `li` to the fragment
        }
        todoulList.appendChild(fragment); // Append all `li` to the `ul` at once
    } catch (error) {
        console.error("Error loading from localStorage:", error);
        localStorage.setItem("todoList", '{}'); // Reset corrupted data
    }
}

// Code to reset the List on the Next Day
let todoLastUpdateDate = localStorage.getItem("todoLastUpdateDate"); // Get the date of last update
let todoCurrentDate = new Date().toLocaleDateString(); // Get current date
if (todoLastUpdateDate === todoCurrentDate) {
    ShowToDoList();
} else {
    // Reset the list when last update date and the current date does not match
    localStorage.setItem("todoLastUpdateDate", todoCurrentDate);
    localStorage.setItem("todoList", '{}');
    ShowToDoList();
}

// Toggle menu and tooltip visibility
todoListCont.addEventListener("click", function (event) {
    const isMenuVisible = todoContainer.style.display === 'grid';

    // Toggle menu visibility
    todoContainer.style.display = isMenuVisible ? 'none' : 'grid';

    // Add or remove the class to hide the tooltip
    if (!isMenuVisible) {
        todoListCont.classList.add('menu-open'); // Hide tooltip
        todoInput.focus();
    } else {
        todoListCont.classList.remove('menu-open'); // Restore tooltip
    }
});

// Close menu when clicking outside
document.addEventListener("click", function (event) {
    const isClickInside =
        todoContainer.contains(event.target) || todoListCont.contains(event.target) || event.target.classList.contains('todoremovebtn');

    if (!isClickInside && todoContainer.style.display === 'grid') {
        todoContainer.style.display = 'none'; // Hide menu
        todoListCont.classList.remove('menu-open'); // Restore tooltip
    }

    event.stopPropagation();
});

// ------------------------------- End of To Do List -------------------------------------

[prem-k-r]

@XengShi good to go, i think
You can review and merge it

[itz-rj-here]

The codes look fine to me :)
Later i will check on my computer.

[XengShi]

Great work, but you can remove this :

Just do nothing when clicking on "+" button if there is empty string

[Thunder-Blaze]

thanks :)
Done 👍🏻

[prem-k-r]

An issue realised only now

when a long string is entered without space.. we get a bottom scrollbar

[Thunder-Blaze]

Wait, I'll try to fix that
It shouldn't be much hard

[Thunder-Blaze]

And done, should I make a seperate PR for that as this one is closed ?

[prem-k-r]

Yeah