{"id":25270,"date":"2024-03-24T10:04:03","date_gmt":"2024-03-24T01:04:03","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25270"},"modified":"2024-03-24T10:04:06","modified_gmt":"2024-03-24T01:04:06","slug":"tailwindcss-todo%e3%83%aa%e3%82%b9%e3%83%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25270","title":{"rendered":"TailwindCSS Todo\u30ea\u30b9\u30c8"},"content":{"rendered":"\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Todo List with Tailwind CSS<\/title>\r\n    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\">\r\n<\/head>\r\n<body class=\"bg-gray-100 h-screen flex justify-center items-center\">\r\n    <div class=\"max-w-md w-full\">\r\n        <h1 class=\"text-center text-2xl font-bold mb-4\">Todo List<\/h1>\r\n        <div class=\"bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4\">\r\n            <div class=\"mb-4\">\r\n                <input type=\"text\" placeholder=\"Add new task...\" class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\" id=\"taskInput\">\r\n            <\/div>\r\n            <div class=\"flex items-center justify-between\">\r\n                <button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline\" id=\"addTaskBtn\">\r\n                    Add Task\r\n                <\/button>\r\n                <div>\r\n                    <button class=\"bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline filter-btn\" data-filter=\"all\">\r\n                        All\r\n                    <\/button>\r\n                    <button class=\"bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline filter-btn\" data-filter=\"active\">\r\n                        Active\r\n                    <\/button>\r\n                    <button class=\"bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline filter-btn\" data-filter=\"completed\">\r\n                        Completed\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <ul id=\"taskList\" class=\"bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4\">\r\n            <!-- Tasks will be dynamically added here -->\r\n        <\/ul>\r\n        <div class=\"flex justify-between\">\r\n            <p id=\"taskCounter\" class=\"text-gray-600\"><\/p>\r\n            <button class=\"bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline\" id=\"clearCompletedBtn\">\r\n                Clear Completed\r\n            <\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        let tasks = [];\r\n\r\n        function renderTasks(filter) {\r\n            const taskList = document.getElementById(\"taskList\");\r\n            taskList.innerHTML = \"\";\r\n\r\n            tasks.forEach((task, index) => {\r\n                if (filter === \"all\" || (filter === \"active\" && !task.completed) || (filter === \"completed\" && task.completed)) {\r\n                    const listItem = document.createElement(\"li\");\r\n                    listItem.className = \"flex justify-between items-center border-b py-2\";\r\n                    listItem.innerHTML = `\r\n                        <span class=\"text-gray-700 ${task.completed ? 'line-through' : ''}\">${task.text}<\/span>\r\n                        <div>\r\n                            <button class=\"text-green-500 hover:text-green-700 focus:outline-none\" onclick=\"toggleTaskStatus(${index})\">\r\n                                ${task.completed ? `\r\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                                        <path fill-rule=\"evenodd\" d=\"M0 11l2-2 5 5L18 3l2 2L7 18z\" clip-rule=\"evenodd\" \/>\r\n                                    <\/svg>\r\n                                ` : `\r\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                                        <path d=\"M19 9l-9 9-5-5\"><\/path>\r\n                                    <\/svg>\r\n                                `}\r\n                            <\/button>\r\n                            <button class=\"text-blue-500 hover:text-blue-700 focus:outline-none\" onclick=\"editTask(${index})\">\r\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M3 17a2 2 0 01-2-2V6a2 2 0 012-2h5a2 2 0 011 3.732V15h5a2 2 0 012 2v2a2 2 0 01-2 2H3zm12-7V5a1 1 0 00-1-1H7a1 1 0 00-1 1v5h9zm-4 3h2v2h-2v-2z\" clip-rule=\"evenodd\"><\/path>\r\n                                <\/svg>\r\n                            <\/button>\r\n                            <button class=\"text-red-500 hover:text-red-700 focus:outline-none\" onclick=\"deleteTask(${index})\">\r\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\r\n                                    <path fill-rule=\"evenodd\" d=\"M5.293 6.293a1 1 0 011.414 1.414L11 11.414l4.293-4.293a1 1 0 111.414 1.414L12.414 12l4.293 4.293a1 1 0 01-1.414 1.414L11 13.414l-4.293 4.293a1 1 0 01-1.414-1.414L9.586 12 5.293 7.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" \/>\r\n                                <\/svg>\r\n                            <\/button>\r\n                        <\/div>\r\n                    `;\r\n                    taskList.appendChild(listItem);\r\n                }\r\n            });\r\n\r\n            updateTaskCounter();\r\n        }\r\n\r\n        function addTask(text) {\r\n            tasks.push({ text: text, completed: false });\r\n            renderTasks();\r\n        }\r\n\r\n        function deleteTask(index) {\r\n            tasks.splice(index, 1);\r\n            renderTasks();\r\n        }\r\n\r\n        function editTask(index) {\r\n            const newText = prompt(\"Edit Task\", tasks[index].text);\r\n            if (newText !== null) {\r\n                tasks[index].text = newText.trim();\r\n                renderTasks();\r\n            }\r\n        }\r\n\r\n        function toggleTaskStatus(index) {\r\n            tasks[index].completed = !tasks[index].completed;\r\n            renderTasks();\r\n        }\r\n\r\n        function clearCompletedTasks() {\r\n            tasks = tasks.filter(task => !task.completed);\r\n            renderTasks();\r\n        }\r\n\r\n        function updateTaskCounter() {\r\n            const taskCounter = document.getElementById(\"taskCounter\");\r\n            const activeTasks = tasks.filter(task => !task.completed).length;\r\n            const taskWord = activeTasks === 1 ? \"task\" : \"tasks\";\r\n            taskCounter.textContent = `${activeTasks} ${taskWord} left`;\r\n        }\r\n\r\n        document.getElementById(\"addTaskBtn\").addEventListener(\"click\", function() {\r\n            const taskInput = document.getElementById(\"taskInput\");\r\n            const taskText = taskInput.value.trim();\r\n\r\n            if (taskText !== \"\") {\r\n                addTask(taskText);\r\n                taskInput.value = \"\";\r\n            }\r\n        });\r\n\r\n        document.getElementById(\"clearCompletedBtn\").addEventListener(\"click\", function() {\r\n            clearCompletedTasks();\r\n        });\r\n\r\n        document.querySelectorAll(\".filter-btn\").forEach(btn => {\r\n            btn.addEventListener(\"click\", function() {\r\n                const filter = this.getAttribute(\"data-filter\");\r\n                renderTasks(filter);\r\n            });\r\n        });\r\n\r\n        \/\/ Initial render\r\n        renderTasks();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\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],"tags":[30,3],"class_list":["post-25270","post","type-post","status-publish","format-standard","hentry","category-css","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\/25270","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=25270"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25270\/revisions"}],"predecessor-version":[{"id":25271,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25270\/revisions\/25271"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25270"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}