Spaces:

iProsto
/

cute-task-tracker

Running

App Files Files Community

iProsto commited on Dec 27, 2025

Commit

8104128

verified ·

1 Parent(s): c384632

Create a todo list site. Minimalistic, easy to use and user-friendly, cute. Opportunities: add a new task, remove any task, mark as done, mark as undone. Use localstorage for tasks. Sort undone tasks to the top of the list

Browse files

Files changed (4) hide show

README.md +7 -4
index.html +64 -19
script.js +128 -0
style.css +47 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Cute Task Tracker
-emoji: 🐠
 colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Cute Task Tracker 🌈
 colorFrom: blue
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,64 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cute Task Tracker</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-pink-50 min-h-screen font-sans">
+    <div class="container mx-auto px-4 py-8 max-w-md">
+        <header class="text-center mb-10">
+            <h1 class="text-3xl font-bold text-pink-600 mb-2">Cute Task Tracker 🌈</h1>
+            <p class="text-pink-400">Your adorable companion for getting things done!</p>
+        </header>
+        <main>
+            <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
+                <form id="task-form" class="flex gap-2">
+                    <input
+                        type="text"
+                        id="new-task"
+                        placeholder="Add a new task..."
+                        class="flex-grow px-4 py-3 rounded-xl border border-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-300"
+                        required
+                    >
+                    <button
+                        type="submit"
+                        class="bg-pink-500 hover:bg-pink-600 text-white px-5 py-3 rounded-xl transition duration-200 flex items-center"
+                    >
+                        <i data-feather="plus" class="w-5 h-5"></i>
+                    </button>
+                </form>
+            </div>
+            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">
+                <ul id="task-list" class="divide-y divide-pink-100">
+                    <!-- Tasks will be added here dynamically -->
+                </ul>
+                <div id="empty-state" class="text-center py-12 hidden">
+                    <div class="mb-4">
+                        <i data-feather="check-circle" class="w-16 h-16 text-pink-300 mx-auto"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-pink-500 mb-2">All caught up!</h3>
+                    <p class="text-pink-400">You have no pending tasks. Great job! 🎉</p>
+                </div>
+            </div>
+        </main>
+        <footer class="mt-12 text-center text-pink-400 text-sm">
+            <p>Made with ❤️ | Your tasks are saved locally</p>
+        </footer>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,128 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const taskForm = document.getElementById('task-form');
+    const newTaskInput = document.getElementById('new-task');
+    const taskList = document.getElementById('task-list');
+    const emptyState = document.getElementById('empty-state');
+    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+    // Render tasks on page load
+    renderTasks();
+    // Add new task
+    taskForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const taskText = newTaskInput.value.trim();
+        if (taskText) {
+            addTask(taskText);
+            newTaskInput.value = '';
+            newTaskInput.focus();
+        }
+    });
+    // Add task function
+    function addTask(text) {
+        const newTask = {
+            id: Date.now(),
+            text: text,
+            completed: false
+        };
+        tasks.unshift(newTask); // Add to beginning of array
+        saveTasks();
+        renderTasks();
+    }
+    // Delete task
+    function deleteTask(id) {
+        tasks = tasks.filter(task => task.id !== id);
+        saveTasks();
+        renderTasks();
+    }
+    // Toggle task completion
+    function toggleTask(id) {
+        tasks = tasks.map(task => {
+            if (task.id === id) {
+                return {...task, completed: !task.completed};
+            }
+            return task;
+        });
+        // Sort tasks: incomplete first
+        tasks.sort((a, b) => {
+            if (a.completed && !b.completed) return 1;
+            if (!a.completed && b.completed) return -1;
+            return 0;
+        });
+        saveTasks();
+        renderTasks();
+    }
+    // Save tasks to localStorage
+    function saveTasks() {
+        localStorage.setItem('tasks', JSON.stringify(tasks));
+    }
+    // Render tasks to the DOM
+    function renderTasks() {
+        if (tasks.length === 0) {
+            taskList.innerHTML = '';
+            emptyState.classList.remove('hidden');
+            return;
+        }
+        emptyState.classList.add('hidden');
+        // Sort tasks: incomplete first
+        const sortedTasks = [...tasks].sort((a, b) => {
+            if (a.completed && !b.completed) return 1;
+            if (!a.completed && b.completed) return -1;
+            return 0;
+        });
+        taskList.innerHTML = sortedTasks.map(task => `
+            <li class="task-item ${task.completed ? 'completed' : ''} p-4 flex items-center justify-between transition-all duration-200 hover:bg-pink-50">
+                <div class="flex items-center space-x-3">
+                    <button
+                        class="check-button w-6 h-6 rounded-full border-2 border-pink-300 flex items-center justify-center ${task.completed ? 'checked bg-pink-400 border-pink-400' : ''}"
+                        data-id="${task.id}"
+                        aria-label="${task.completed ? 'Mark as incomplete' : 'Mark as complete'}"
+                    >
+                        ${task.completed ? '<i data-feather="check" class="w-4 h-4 text-white"></i>' : ''}
+                    </button>
+                    <span class="task-text ${task.completed ? 'text-pink-400' : 'text-gray-700'}">${task.text}</span>
+                </div>
+                <div class="task-actions flex space-x-2">
+                    <button
+                        class="delete-button text-pink-400 hover:text-pink-600 transition-colors"
+                        data-id="${task.id}"
+                        aria-label="Delete task"
+                    >
+                        <i data-feather="trash-2" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </li>
+        `).join('');
+        // Add event listeners to new buttons
+        document.querySelectorAll('.check-button').forEach(button => {
+            button.addEventListener('click', (e) => {
+                const id = parseInt(e.currentTarget.getAttribute('data-id'));
+                toggleTask(id);
+            });
+        });
+        document.querySelectorAll('.delete-button').forEach(button => {
+            button.addEventListener('click', (e) => {
+                const id = parseInt(e.currentTarget.getAttribute('data-id'));
+                deleteTask(id);
+            });
+        });
+        // Re-initialize Feather icons
+        feather.replace();
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,57 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');
 body {
+    font-family: 'Nunito', sans-serif;
+    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
+}
+.task-item {
+    transition: all 0.3s ease;
+}
+.task-item.completed .task-text {
+    text-decoration: line-through;
+    color: #c084fc;
+}
+.task-actions {
+    opacity: 0;
+    transition: opacity 0.2s ease;
 }
+.task-item:hover .task-actions {
+    opacity: 1;
 }
+.check-button.checked {
+    background-color: #f0abfc;
+    border-color: #f0abfc;
 }
+.empty-state-animation {
+    animation: float 3s ease-in-out infinite;
 }
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+    100% { transform: translateY(0px); }
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #fce7f3;
+}
+::-webkit-scrollbar-thumb {
+    background: #f0abfc;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #e879f9;
+}