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>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
@@ -87,6 +87,7 @@ const translations = {
         "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
@@ -130,6 +131,7 @@ const translations = {
         "failedbackup": "Backup failed: ",
         "restorecompleted": "Restore completed successfully!",
         "restorefailed": "Restore failed: ",
+        "emptytodoinput": "You Must Write Something",
     },
 
 
@@ -210,6 +212,7 @@ const translations = {
         "ai_tools": "Ferramentas de IA",
         "userText": "Clique aqui para editar",
         "googleAppsHover": "Apps do Google",
+        "todoListHover": "Lista de tarefas",
         // End of Body and New Tab Items
 
         // Greeting
@@ -229,7 +232,8 @@ const translations = {
         "copilot": "Copilot",
         "perplexity": "Perplexity",
         "firefly": "Adobe Firefly",
-        "github": "GitHub"
+        "github": "GitHub",
+        "emptytodoinput": "Você deve escrever algo",
     },
 
 
@@ -323,6 +327,8 @@ const translations = {
         "duckEngine": "DuckDuckGo",
         "bingEngine": "必应",
         "googleAppsHover": "谷歌应用",
+        "todoListHover": "待办事项清单",
+        "emptytodoinput": "你必须写点东西",
     },
 
 
@@ -427,6 +433,7 @@ const translations = {
         "firefly": "एडोबी फायरफ्लाई",
         "github": "गिटहब",
         "googleAppsHover": "गूगल ऐप्स",
+        "todoListHover": "कार्य सूची",
 
         // Wallpaper and alerts
         "uploadWallpaperText": "वॉलपेपर अपलोड करें",
@@ -448,6 +455,7 @@ const translations = {
         "failedbackup": "बैकअप विफल: ",
         "restorecompleted": "पुनर्स्थापना सफलतापूर्वक पूरी हुई!",
         "restorefailed": "पुनर्स्थापना विफल: ",
+        "emptytodoinput": "आपको कुछ अवश्य लिखना चाहिए",
     },
 
 
@@ -530,6 +538,7 @@ const translations = {
         "ai_tools": "AI nástroje",
         "userText": "Upravíte po kliknutí",
         "googleAppsHover": "Google aplikace",
+        "todoListHover": "Seznam úkolů",
         // End of Body and New Tab Items
 
         // Greeting
@@ -543,6 +552,7 @@ const translations = {
         "uploadWallpaperText": "Nahrát tapetu",
         "backupText": "Zálohovat",
         "restoreText": "Obnovit",
+        "emptytodoinput": "Musíte něco napsat",
     },
 
 
@@ -651,7 +661,8 @@ const translations = {
         "imagedimensions": "Attenzione: Le dimensioni dell'immagine caricata ({width}x{height}) superano i 1920x1080 pixel. \n\nCiò potrebbe influire sulle prestazioni o l'immagine potrebbe non essere caricata correttamente.",
         "failedbackup": "Backup fallito: ",
         "restorecompleted": "Ripristino completato con successo!",
-        "restorefailed": "Ripristino fallito: "
+        "restorefailed": "Ripristino fallito: ",
+        "emptytodoinput": "Devi scrivere qualcosa",
     },
 
 
@@ -738,6 +749,7 @@ const translations = {
             "afternoon": "İyi öğleden sonra!",
             "evening": "İyi akşamlar!"
         },
+        "emptytodoinput": "Bir Şey Yazmalısın",
     },
 
 
@@ -825,6 +837,7 @@ const translations = {
         "ai_tools": "এআই টুলস",
         "userText": "এখানে আপনার টেক্সট লিখুন",
         "googleAppsHover": "গুগল অ্যাপস",
+        "todoListHover": "তালিকা তৈরি",
 
         // Greeting
         greeting: {
@@ -866,6 +879,7 @@ const translations = {
         "failedbackup": "ব্যাকআপ ব্যর্থ: ",
         "restorecompleted": "পুনরুদ্ধার সফলভাবে সম্পন্ন হয়েছে!",
         "restorefailed": "পুনরুদ্ধার ব্যর্থ: ",
+        "emptytodoinput": "ইউ মাস্ট রাইট সামথিং",
     },
 
 
@@ -952,6 +966,7 @@ const translations = {
             "afternoon": "Chào buổi chiều!",
             "evening": "Chào buổi tối!"
         },
+        "emptytodoinput": "Bạn phải viết một cái gì đó",
     },
 
 
@@ -1056,6 +1071,7 @@ const translations = {
         "firefly": "Adobe Firefly",
         "github": "GitHub",
         "googleAppsHover": "Гугл приложения",
+        "todoListHover": "Список дел",
 
         // Wallpaper and alerts
         "uploadWallpaperText": "Загрузить обои",
@@ -1077,6 +1093,7 @@ const translations = {
         "failedbackup": "Резервное копирование не удалось: ",
         "restorecompleted": "Восстановление настроек успешно завершено!",
         "restorefailed": "Восстановление настроек не удалось: ",
+        "emptytodoinput":"Вы должны что-то написать",
     },
 
 
@@ -1329,6 +1346,7 @@ const translations = {
         "ai_tools": "AIツール",
         "userText": "ここをクリックして編集",
         "googleAppsHover": "Googleアプリ",
+        "todoListHover": "やることリスト",
         // End of Body and New Tab Items
 
         // Greeting
@@ -1350,6 +1368,7 @@ const translations = {
         "perplexity": "Perplexity",
         "firefly": "Adobe Firefly",
         "github": "GitHub",
+        "emptytodoinput":"何かを書かなければなりません",
     },
 
 
@@ -1450,6 +1469,8 @@ const translations = {
         "firefly": "어도비 파이어플라이",
         "github": "깃허브",
         "googleAppsHover": "구글 앱",
+        "todoListHover": "할 일 목록",
+        "emptytodoinput":"당신은 뭔가를 작성해야합니다",
     },
 
 
@@ -1627,6 +1648,7 @@ const translations = {
         "ai_tools": "AI साधने",
         "userText": "येथे आपला मजकूर लिहा",
         "googleAppsHover": "गुगल ॲप्स",
+        "todoListHover": "करण्याची यादी",
         // End of Body and New Tab Items
 
         // Greeting
@@ -1669,8 +1691,8 @@ const translations = {
         "imagedimensions": "तयार केलेली इमेज ({width}x{height}) चे परिमाण 1920x1080 पिक्सल्सपेक्षा जास्त आहे. \n\nयामुळे कार्यक्षमता प्रभावित होऊ शकते किंवा इमेज नीट लोड होऊ नये.",
         "failedbackup": "बॅकअप अयशस्वी: ",
         "restorecompleted": "पुनर्संचयित यशस्वी झाले!",
-        "restorefailed": "पुनर्संचयित अयशस्वी: "
-
+        "restorefailed": "पुनर्संचयित अयशस्वी: ",
+        "emptytodoinput":"यू मस्ट रायट समथिंग",
     },
 
 
@@ -1753,6 +1775,7 @@ const translations = {
         "ai_tools": "Outils IA",
         "userText": "Cliquez ici pour modifier",
         "googleAppsHover": "Applications Google",    // Keep this untranslated if string width is much longer
+        "todoListHover": "Liste de tâches",
         // End of Body and New Tab Items
 
         // Greeting
@@ -1796,6 +1819,7 @@ const translations = {
         "failedbackup": "Échec de la sauvegarde: ",
         "restorecompleted": "Restauration terminée avec succès!",
         "restorefailed": "Échec de la restauration: ",
+        "emptytodoinput":"Vous devez écrire quelque chose",
     }
 };
 
@@ -1916,6 +1940,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,106 @@ document.addEventListener("click", function (event) {
     }
 });
 // ------------------------End of Google App Menu Setup-----------------------------------
+// ----------------------------------- 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");
+
+todoAdd.addEventListener("click", addtodoItem);
+
+todoInput.addEventListener("keypress", (event) => {
+    if (event.key === "Enter") {
+        addtodoItem();
+    }
+});
+
+function addtodoItem(){
+    if (todoInput.value===''){
+        alert((translations[currentLanguage]?.emptytodoinput || translations['en'].emptytodoinput));
+    } else {
+        let li = document.createElement('li');
+        li.innerText = todoInput.value;
+        span = document.createElement("span");
+        span.setAttribute("class","todoremovebtn")
+        span.innerText = "\u00d7";
+        li.appendChild(span);
+        li.addEventListener("click",SetTaskCheckEvent);
+        li.setAttribute("class","todolistitem");
+        todoulList.appendChild(li);
+        todoInput.value = '';
+        SaveData();
+    }
+}
+var SetTaskCheckEvent = (event) => {
+    if (event.target.tagName == "LI"){
+        event.target.classList.toggle("checked");
+        SaveData();
+    } else if (event.target.tagName == "SPAN"){
+        event.target.parentElement.remove();
+        SaveData();
+    }
+}
+function SaveData(){
+    x = todoulList.textContent.slice(22);
+    localStorage.setItem("todolist", x);
+}
+function ShowToDoList(){
+    todolistitems = localStorage.getItem("todolist");
+    todolistitems = todolistitems.split("\u00d7");
+    for (let i = 0; i < todolistitems.length-1; i++) {
+        let li = document.createElement('li');
+        li.innerText = todolistitems[i];
+        span = document.createElement("span");
+        span.setAttribute("class","todoremovebtn")
+        span.innerText = "\u00d7";
+        li.appendChild(span);
+        li.addEventListener("click",SetTaskCheckEvent);
+        li.setAttribute("class","todolistitem");
+        todoulList.appendChild(li);
+    }
+}
+todoLastUpdateDate = localStorage.getItem("todoLastUpdateDate");
+let todoCurrentDate = new Date().toLocaleString().slice(0, 10);
+if (todoLastUpdateDate==todoCurrentDate){
+    ShowToDoList();
+} else {
+    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
+    } 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();
@@ -2312,6 +2412,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");
@@ -2981,6 +3082,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);
     });
@@ -3056,9 +3168,11 @@ document.addEventListener("DOMContentLoaded", function () {
     loadIconStyle("iconStyle", iconStyle);
     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();
 });