XengShi · XengShi · Dec 16, 2024 · Dec 14, 2024 · Dec 14, 2024 · Dec 14, 2024
diff --git a/index.html b/index.html
@@ -24,6 +24,31 @@
 </head>
 
 <body>
+    <!----------------------- ToDo List Setup Starting ----------------------->
+    <!-- 9 Dot Icon -->
+    <div class="todoListCont" id="todoListCont">
+        <svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="dot-icon" width="36" height="36" viewBox="0 0 32 32" xml:space="preserve">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.128"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M11,30H5c-1.7,0-3-1.3-3-3v-6c0-1.7,1.3-3,3-3h6c1.7,0,3,1.3,3,3v6C14,28.7,12.7,30,11,30z"></path> </g> <g> <path d="M29,6H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,6,29,6z"></path> </g> <g> <path d="M24,10h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,10,24,10z"></path> </g> <g> <path d="M29,22H17c-0.6,0-1-0.4-1-1s0.4-1,1-1h12c0.6,0,1,0.4,1,1S29.6,22,29,22z"></path> </g> <g> <path d="M24,26h-7c-0.6,0-1-0.4-1-1s0.4-1,1-1h7c0.6,0,1,0.4,1,1S24.6,26,24,26z"></path> </g> <path d="M11,2H5C3.3,2,2,3.3,2,5v6c0,1.7,1.3,3,3,3h6c1.7,0,3-1.3,3-3V5C14,3.3,12.7,2,11,2z M11.7,6.7l-3,3C8.5,9.9,8.3,10,8,10 S7.5,9.9,7.3,9.7l-2-2c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0L8,7.6l2.3-2.3c0.4-0.4,1-0.4,1.4,0S12.1,6.3,11.7,6.7z"></path> </g>
+        </svg>
+        <!-- Text to appear on hover -->
+        <span class="tooltip-text" id="todoListHover">ToDo List</span>
+    </div>
+
+    <!-- Centered Icon Container -->
+    <div id="todoContainer" class="todo-container" style="display: none;">
+        <h2 id="todoListHeading">To Do List</h2>
+        <div class="searchbar-content">
+            <input id="todoInput" placeholder="Type here..." type="text" autocomplete="off">
+            <div class="searchControls">
+                <!-- Add Button -->
+                <button id="todoAdd">+</button>
+            </div>
+        </div>
+        <ul class="todolist" id="todoullist">
+
+        </ul>
+    </div>
+
     <!----------------------- Google App Menu Setup Starting ----------------------->
     <!-- 9 Dot Icon -->
     <div class="googleAppsCont" id="googleAppsCont">
@@ -960,6 +985,17 @@ <h1>Material You NewTab</h1>
                                 <span class="toggle"></span>
                             </label>
                         </div>
+
+                        <div class="ttcont">
+                            <div class="texts">
+                                <div class="bigText" id="todoListText">To Do List</div>
+                                <div class="infoText" id="todoListInfo">Show a Daily To Do List</div>
+                            </div>
+                            <label class="switch">
+                                <input id="todoListCheckbox" type="checkbox">
+                                <span class="toggle"></span>
+                            </label>
+                        </div>
                         <!-- ---🟡--- -->
                         <div class="ttcont">
                             <div class="texts">

diff --git a/languages.js b/languages.js
@@ -27,6 +27,8 @@ const translations = {
         "enable_ai_tools": "Show shortcuts for AI tools",
         "googleAppsMenuText": "Google Apps",
         "googleAppsMenuInfo": "Show shortcuts for Google Apps",
+        "todoListText": "To Do List",
+        "todoListInfo": "Show a Daily To Do List",
         // Digital Clock
         "digitalclocktittle": "Digital Clock",
         "digitalclockinfo": "Switch to the digital clock",
@@ -83,10 +85,12 @@ const translations = {
         "enterBtn": "Search",
         "searchPlaceholder": "Type here...",
         "listenPlaceholder": "Listening...",
+        "todoPlaceholder": "Add task...",
         "searchWithHint": "Search With",
         "ai_tools": "AI Tools",
         "userText": "Click here to edit",
         "googleAppsHover": "Google Apps",    // Keep this untranslated if string width is much longer
+        "todoListHover": "ToDo List",    // Keep this untranslated if string width is much longer
         // End of Body and New Tab Items
 
         // Greeting
@@ -345,6 +349,8 @@ const translations = {
         "enable_ai_tools": "AI उपकरणों के शॉर्टकट्स प्रदर्शित करें",
         "googleAppsMenuText": "गूगल ऐप्स",
         "googleAppsMenuInfo": "गूगल ऐप्स के शॉर्टकट्स प्रदर्शित करें",
+        "todoListText": "कार्य सूची",
+        "todoListInfo": "अपनी दैनिक कार्य सूची देखें और व्यवस्थित रहें",
         // Digital Clock
         "digitalclocktittle": "डिजिटल घड़ी",
         "digitalclockinfo": "डिजिटल घड़ी पर स्विच करें",
@@ -402,6 +408,7 @@ const translations = {
         "enterBtn": "खोजें",
         "searchPlaceholder": "यहाँ लिखें...",
         "listenPlaceholder": "सुन रहे हैं...",
+        "todoPlaceholder": "कार्य जोड़ें...",
         "searchWithHint": "खोज माध्यम",
         "ai_tools": "AI उपकरण",
         "userText": "यहाँ अपना टेक्स्ट लिखें",
@@ -427,6 +434,7 @@ const translations = {
         "firefly": "एडोबी फायरफ्लाई",
         "github": "गिटहब",
         "googleAppsHover": "गूगल ऐप्स",
+        "todoListHover": "कार्य सूची",
 
         // Wallpaper and alerts
         "uploadWallpaperText": "वॉलपेपर अपलोड करें",
@@ -1858,6 +1866,9 @@ function applyLanguage(lang) {
         { id: 'enable_ai_tools', key: 'enable_ai_tools' },
         { id: 'googleAppsMenuText', key: 'googleAppsMenuText' },
         { id: 'googleAppsMenuInfo', key: 'googleAppsMenuInfo' },
+        { id: 'todoListHeading', key: 'todoListText' },
+        { id: 'todoListText', key: 'todoListText' },
+        { id: 'todoListInfo', key: 'todoListInfo' },
         { id: 'fahrenheitCelsiusCheckbox', key: 'fahrenheitCelsiusCheckbox' },
         { id: 'fahrenheitCelsiusText', key: 'fahrenheitCelsiusText' },
         { id: 'micIconTitle', key: 'micIconTitle' },
@@ -1893,6 +1904,7 @@ function applyLanguage(lang) {
         { id: 'conditionText', key: 'conditionText' },
         { id: 'enterBtn', key: 'enterBtn' },
         { id: 'searchQ', key: 'searchPlaceholder', isPlaceholder: true },
+        { id: 'todoInput', key: 'todoPlaceholder', isPlaceholder: true },
         { id: 'searchWithHint', key: 'searchWithHint' },
         { id: 'ai_tools', key: 'ai_tools' },
         { id: 'humidityLevel', key: 'humidityLevel' },
@@ -1916,6 +1928,7 @@ function applyLanguage(lang) {
         { id: 'metaAI', key: 'metaAI'},
         { id: 'github', key: 'github' },
         { id: 'googleAppsHover', key: 'googleAppsHover' },
+        { id: 'todoListHover', key: 'todoListHover' },
         { id: 'uploadWallpaperText', key: 'uploadWallpaperText' },
         { id: 'backupText', key: 'backupText' },
         { id: 'restoreText', key: 'restoreText' },

diff --git a/script.js b/script.js
@@ -278,6 +278,139 @@ document.addEventListener("click", function (event) {
     }
 });
 // ------------------------End of Google App Menu Setup-----------------------------------
+// ----------------------------------- 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 === '') {
+        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(); // Auto focus on input box
+    } 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 -------------------------------------
 
 // Retrieve current time and calculate initial angles
 var currentTime = new Date();
@@ -2313,6 +2446,7 @@ document.addEventListener("DOMContentLoaded", function () {
     const adaptiveIconToggle = document.getElementById("adaptiveIconToggle");
     const aiToolsCheckbox = document.getElementById("aiToolsCheckbox");
     const googleAppsCheckbox = document.getElementById("googleAppsCheckbox");
+    const todoListCheckbox = document.getElementById("todoListCheckbox");
     const timeformatField = document.getElementById("timeformatField");
     const hourcheckbox = document.getElementById("12hourcheckbox");
     const digitalCheckbox = document.getElementById("digitalCheckbox");
@@ -2977,6 +3111,17 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
+    todoListCheckbox.addEventListener("change", function () {
+        saveCheckboxState("todoListCheckboxState", todoListCheckbox);
+        if (todoListCheckbox.checked) {
+            todoListCont.style.display = "flex";
+            saveDisplayStatus("todoListDisplayStatus", "flex");
+        } else {
+            todoListCont.style.display = "none";
+            saveDisplayStatus("todoListDisplayStatus", "none");
+        }
+    });
+
     fahrenheitCheckbox.addEventListener("change", function () {
         saveCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
     });
@@ -3050,9 +3195,11 @@ document.addEventListener("DOMContentLoaded", function () {
     loadActiveStatus("proxybypassField", proxybypassField);
     loadCheckboxState("aiToolsCheckboxState", aiToolsCheckbox);
     loadCheckboxState("googleAppsCheckboxState", googleAppsCheckbox);
+    loadCheckboxState("todoListCheckboxState", todoListCheckbox);
     loadDisplayStatus("shortcutsDisplayStatus", shortcuts);
     loadDisplayStatus("aiToolsDisplayStatus", aiToolsCont);
     loadDisplayStatus("googleAppsDisplayStatus", googleAppsCont);
+    loadDisplayStatus("todoListDisplayStatus", todoListCont);
     loadCheckboxState("fahrenheitCheckboxState", fahrenheitCheckbox);
     loadShortcuts();
 });