tasky-mctaskface / index.html
iProsto's picture
Save tasks in the localstorage. Add to each task an id and use the id as a unique identificator of task
a8e626b verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tasky McTaskface</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100 min-h-screen">
<custom-header></custom-header>
<main class="container mx-auto px-4 py-8">
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 mb-6">My Tasks</h2>
<div class="flex mb-6">
<input type="text" id="taskInput" placeholder="Add a new task..."
class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<button id="addTaskBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg transition duration-200">
<i data-feather="plus"></i>
</button>
</div>
<div id="taskList" class="space-y-3">
<!-- Tasks will be dynamically inserted here -->
</div>
</div>
</div>
</main>
<script src="components/header.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
document.addEventListener('DOMContentLoaded', () => {
loadTasks();
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>