Spaces:

Stan2001002
/

sf-b95

Running

App Files Files Community

Stan2001002 commited on Mar 27, 2024

Commit

2d7cf20

verified ·

1 Parent(s): b5e376e

Add 3 files

Browse files

Files changed (3) hide show

app.js +53 -0
index.html +21 -19
style.css +63 -19

app.js ADDED Viewed

	@@ -0,0 +1,53 @@

+let global = {};
+// AlpineJS initialization
+Alpine.start();
+// Get the inputs and buttons
+const inputs = document.querySelectorAll(".inputs input");
+const addButton = document.querySelector(".add-btn");
+const toDoList = document.querySelector(".to-do-list");
+const toDos = [];
+// Add an event listener to the add button
+addButton.addEventListener("click", () => {
+ let input = inputs.value;
+ let title = input[0].value;
+ let startTime = input[1].value;
+ let endTime = input[2].value;
+ let duration = input[3].value;
+ if (title.length && startTime.length && endTime.length && duration.length > 0) {
+    toDos.push({ title, startTime, endTime, duration });
+    inputs[0].value = "";
+    inputs[1].value = "";
+    inputs[2].value = "";
+    inputs[3].value = "";
+ }
+});
+// Add an event listener to the to-do list item
+toDoList.addEventListener("click", async (e) => {
+ if (e.target.classList.contains("delete-btn")) {
+    const id = e.target.parentElement.dataset.id;
+    const toDo = document.querySelector(`[data-id="${id}"]`);
+    e.stopPropagation();
+    if (confirm("Are you sure you want to delete this to-do?")) {
+      await deleteToDo(id);
+      toDo.remove();
+    }
+ }
+});
+// Function to delete a to-do
+async function deleteToDo(id) {
+ try {
+    const response = await fetch(`${baseUrl}/todos/${id}`, {
+      method: "DELETE",
+    });
+    if (response.status !== 200) {
+      throw new Error("Failed to delete the to-do.");
+    }
+ } catch (err) {
+    console.error(err);
+ }
+}

index.html CHANGED Viewed

@@ -1,19 +1,21 @@
-<!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>

+<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Multi-To Do App</title></head>
+<body>
+ <main id="app"><article class="prose"><h1>To-Do List</h1><p>Keep track of your tasks and extend deadlines as needed.</p></article><div class="border rounded-md break mt-8"><table class="table table-compact table-fixed border border-solid border-gray-200"><thead><tr><th scope="col" class="px-4 py-2">Title</th><th scope="col" class="px-4 py-2">Start Time</th><th scope="col" class="px-4 py-2">End Time</th><th scope="col" class="px-4 py-2">Duration</th><th scope="col" class="px-4 py-2"></th></tr></thead><tbody><tr x-data="{ open: false }" :wrap="false">
+    <th class="px-4 py-2 font-bold"><input type="text" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="To-Do Title" x-model="title"></th>
+    <th class="px-4 py-2 font-bold">
+      <input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="startTime"></th>
+    <th class="px-4 py-2 font-bold">
+      <input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="endTime"></th>
+    <th class="px-4 py-2 font-bold">
+      <input type="number" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="duration"></th>
+    <th class="px-4 py-2 font-bold"><button :disabled="open" class="bg-gray-50 border-blue-500 text-gray-800 hover:bg-blue-500 hover:text-gray-50" @click="open = !open">Add</button></th></tr><template x-for="toDo in toDos" x-key="toDo.id" x-bind:open="toDo.open" x-bind:class="toDo.open ? 'prose' : 'hidden'">
+<tr class="bg-gray-50 border-b border-gray-200 hover:bg-gray-100"><td class="px-4 py-2"><input type="text" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="To-Do Title" x-model="toDo.title"></td>
+    <td class="px-4 py-2"><input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="toDo.startTime"></td>
+    <td class="px-4 py-2"><input type="time" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="toDo.endTime"></td>
+    <td class="px-4 py-2"><input type="number" class="bg-gray-50 border-blue-500 placeholder-gray-500 text-gray-800" placeholder="HH:MM" x-model="toDo.duration"></td>
+    <td class="px-4 py-2"><button class="bg-gray-50 border-blue-500 text-gray-800 hover:bg-blue-500 hover:text-gray-50" @click="toDo.open = !toDo.open">Edit</button></td></tr></template>
+ </table>
+ </div>
+</div>
+ </main>
+</body></html>

style.css CHANGED Viewed

@@ -1,28 +1,72 @@
-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;
 }

+* {
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+   font-family: sans-serif;
+ }
+main {
+ margin: 2rem auto;
+ max-width: 40rem;
+ border: 0.5px solid gray;
+ padding: 1rem;
+ box-shadow: 10px 10px 5px #888888;
 }
+.header {
+ background-color: #4CAF50;
+ color: white;
+ padding: 1rem;
+ text-align: center;
 }
+.container {
+ padding: 1rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-gap: 10px;
 }
+input[type="text"],
+input[type="time"] {
+ width: 100%;
+ padding: 12px 20px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
 }
+input[type="number"] {
+ width: 100%;
+ padding: 12px 20px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
 }
+button {
+ background-color: #4CAF50;
+ color: white;
+ padding: 12px 20px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ float: right;
+}
+.prose {
+ padding: 1rem;
+ margin: 1rem 0;
+ line-height: 1.25;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+}
+@media (max-width: 768px) {
+ .container {
+    grid-template-columns: 1fr;
+ }
+}