{"id":25389,"date":"2024-06-19T15:46:35","date_gmt":"2024-06-19T06:46:35","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25389"},"modified":"2024-06-19T15:46:36","modified_gmt":"2024-06-19T06:46:36","slug":"tailwindcss-to-do-list","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25389","title":{"rendered":"tailwindcss To-Do List"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"en\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  &lt;title>To-Do List&lt;\/title>\n  &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\n&lt;\/head>\n&lt;body class=\"bg-gray-100 flex items-center justify-center h-screen\">\n  &lt;div class=\"bg-white p-8 rounded-lg shadow-lg w-full max-w-md\">\n    &lt;h1 class=\"text-2xl font-bold mb-4\">To-Do List&lt;\/h1>\n    &lt;form id=\"todo-form\" class=\"flex mb-4\">\n      &lt;input id=\"todo-input\" type=\"text\" placeholder=\"Add a new task\" class=\"flex-grow p-2 border rounded-l-lg focus:outline-none\">\n      &lt;button type=\"submit\" class=\"bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700\">Add&lt;\/button>\n    &lt;\/form>\n    &lt;div class=\"mb-4\">\n      &lt;button id=\"filter-all\" class=\"filter-btn bg-gray-200 text-black px-4 py-2 rounded-l-lg\">All&lt;\/button>\n      &lt;button id=\"filter-active\" class=\"filter-btn bg-gray-200 text-black px-4 py-2\">Active&lt;\/button>\n      &lt;button id=\"filter-completed\" class=\"filter-btn bg-gray-200 text-black px-4 py-2 rounded-r-lg\">Completed&lt;\/button>\n    &lt;\/div>\n    &lt;ul id=\"todo-list\" class=\"list-disc pl-5\">\n      &lt;!-- To-Do items will be added here -->\n    &lt;\/ul>\n  &lt;\/div>\n\n  &lt;script>\n    const todoForm = document.getElementById('todo-form');\n    const todoInput = document.getElementById('todo-input');\n    const todoList = document.getElementById('todo-list');\n    const filterButtons = document.querySelectorAll('.filter-btn');\n\n    document.addEventListener('DOMContentLoaded', loadTodos);\n    todoForm.addEventListener('submit', function(event) {\n      event.preventDefault();\n      addTodoItem(todoInput.value);\n      todoInput.value = '';\n    });\n\n    filterButtons.forEach(button => {\n      button.addEventListener('click', () => {\n        document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('bg-blue-500', 'text-white'));\n        button.classList.add('bg-blue-500', 'text-white');\n        filterTodos(button.id);\n      });\n    });\n\n    function addTodoItem(task) {\n      if (task === '') return;\n\n      const listItem = document.createElement('li');\n      listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');\n\n      const taskText = document.createElement('span');\n      taskText.textContent = task;\n      taskText.classList.add('flex-grow', 'cursor-pointer');\n      taskText.addEventListener('click', toggleComplete);\n\n      const editButton = document.createElement('button');\n      editButton.textContent = 'Edit';\n      editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');\n      editButton.addEventListener('click', () => editTodoItem(listItem, taskText));\n\n      const priorityButton = document.createElement('button');\n      priorityButton.textContent = 'Important';\n      priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');\n      priorityButton.addEventListener('click', () => togglePriority(taskText));\n\n      const deleteButton = document.createElement('button');\n      deleteButton.textContent = 'Delete';\n      deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');\n      deleteButton.addEventListener('click', () => deleteTodoItem(listItem));\n\n      listItem.appendChild(taskText);\n      listItem.appendChild(editButton);\n      listItem.appendChild(priorityButton);\n      listItem.appendChild(deleteButton);\n      todoList.appendChild(listItem);\n\n      saveTodos();\n    }\n\n    function toggleComplete(event) {\n      event.target.classList.toggle('line-through');\n      event.target.classList.toggle('text-gray-500');\n      saveTodos();\n    }\n\n    function togglePriority(taskText) {\n      taskText.classList.toggle('font-bold');\n      saveTodos();\n    }\n\n    function editTodoItem(listItem, taskText) {\n      const newTask = prompt('Edit your task:', taskText.textContent);\n      if (newTask !== null &amp;&amp; newTask !== '') {\n        taskText.textContent = newTask;\n        saveTodos();\n      }\n    }\n\n    function deleteTodoItem(listItem) {\n      listItem.remove();\n      saveTodos();\n    }\n\n    function saveTodos() {\n      const todos = &#91;];\n      document.querySelectorAll('#todo-list li').forEach((item) => {\n        todos.push({\n          text: item.querySelector('span').textContent,\n          completed: item.querySelector('span').classList.contains('line-through'),\n          important: item.querySelector('span').classList.contains('font-bold')\n        });\n      });\n      localStorage.setItem('todos', JSON.stringify(todos));\n    }\n\n    function loadTodos() {\n      const savedTodos = JSON.parse(localStorage.getItem('todos')) || &#91;];\n      savedTodos.forEach((todo) => {\n        const listItem = document.createElement('li');\n        listItem.classList.add('flex', 'items-center', 'justify-between', 'py-2', 'border-b', 'border-gray-200');\n\n        const taskText = document.createElement('span');\n        taskText.textContent = todo.text;\n        taskText.classList.add('flex-grow', 'cursor-pointer');\n        if (todo.completed) {\n          taskText.classList.add('line-through', 'text-gray-500');\n        }\n        if (todo.important) {\n          taskText.classList.add('font-bold');\n        }\n        taskText.addEventListener('click', toggleComplete);\n\n        const editButton = document.createElement('button');\n        editButton.textContent = 'Edit';\n        editButton.classList.add('bg-yellow-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-yellow-700');\n        editButton.addEventListener('click', () => editTodoItem(listItem, taskText));\n\n        const priorityButton = document.createElement('button');\n        priorityButton.textContent = 'Important';\n        priorityButton.classList.add('bg-green-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-green-700');\n        priorityButton.addEventListener('click', () => togglePriority(taskText));\n\n        const deleteButton = document.createElement('button');\n        deleteButton.textContent = 'Delete';\n        deleteButton.classList.add('bg-red-500', 'text-white', 'px-2', 'py-1', 'rounded', 'ml-2', 'hover:bg-red-700');\n        deleteButton.addEventListener('click', () => deleteTodoItem(listItem));\n\n        listItem.appendChild(taskText);\n        listItem.appendChild(editButton);\n        listItem.appendChild(priorityButton);\n        listItem.appendChild(deleteButton);\n        todoList.appendChild(listItem);\n      });\n    }\n\n    function filterTodos(filter) {\n      const allTodos = document.querySelectorAll('#todo-list li');\n      allTodos.forEach((todo) => {\n        switch (filter) {\n          case 'filter-all':\n            todo.style.display = 'flex';\n            break;\n          case 'filter-active':\n            todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'none' : todo.style.display = 'flex';\n            break;\n          case 'filter-completed':\n            todo.querySelector('span').classList.contains('line-through') ? todo.style.display = 'flex' : todo.style.display = 'none';\n            break;\n        }\n      });\n    }\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[81,4,6],"tags":[30,3],"class_list":["post-25389","post","type-post","status-publish","format-standard","hentry","category-css","category-programming","category-web","tag-css","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25389"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25389\/revisions"}],"predecessor-version":[{"id":25390,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25389\/revisions\/25390"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25389"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}