refactor: rebuilding with vue

DonLars · Mar 1, 2024 · e5a7928 · e5a7928
1 parent d1234b0
commit e5a7928
Show file tree

Hide file tree

Showing 7 changed files with 775 additions and 551 deletions.
diff --git a/index copy.html b/index copy.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="Lars Wagner" />
+    <meta name="description" content="First TODO-App" />
+    <title>My 1st TODO App with Vue</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <main>
+      <article class="todo-article" id="app">
+        <h1>My 1st TODO-APP with Vue</h1>
+        <h2 class="claim">Getting things done…</h2>
+
+        <!-- <button @click="switchOnOff" :class="{ dark: isDarkMode }">
+          {{ switchText }}
+        </button>-->
+
+        <form @submit.prevent="addTodo">
+          <label for="input-field">Neue Aufgabe</label>
+          <input
+            type="text"
+            v-model="newTodoText"
+            name="input-field"
+            id="input"
+            placeholder="Start your list!"
+            autofocus
+          />
+
+          <button id="add-btn" type="submit">add</button>
+          <button id="clear-btn">remove</button>
+
+          <div class="filter">
+            <label for="filter-all">
+              <input
+                type="radio"
+                name="filter"
+                id="filter-all"
+                value="all"
+                checked
+              />
+              all
+            </label>
+            <label for="filter-open">
+              <input type="radio" name="filter" id="filter-open" value="open" />
+              open
+            </label>
+            <label for="filter-done">
+              <input type="radio" name="filter" id="filter-done" value="done" />
+              done
+            </label>
+          </div>
+        </form>
+
+        <ul class="task-list">
+          <li v-for="todo in todos" :key="todo.id">
+            <input type="checkbox" name="item-1" id="item-1" />
+            <label for="item-1">{{ todo.description }}</label>
+          </li>
+        </ul>
+      </article>
+    </main>
+    <script src="https://unpkg.com/vue@latest"></script>
+    <script type="module" src="script.js"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -5,26 +5,33 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="author" content="Lars Wagner" />
     <meta name="description" content="First TODO-App" />
-    <title>My 1st TODO App</title>
+    <title>My 1st TODO App with Vue</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <main>
-      <article class="todo-article">
-        <h1>My 1st TODO-APP(I)</h1>
+      <article class="todo-article" id="app">
+        <h1>My Todo-App with Vue</h1>
         <h2 class="claim">Getting things done…</h2>
 
+        <!--         <pre>
+          {{ $data  }}
+        </pre> -->
         <form id="task-form">
+          <label class="hidden" for="input-field">new task</label>
           <input
             type="text"
-            name="Eingabe"
+            v-model="newTodoText"
+            name="input-field"
             id="input"
             placeholder="Start your list!"
             autofocus
           />
 
-          <button id="add-btn" type="submit">add</button>
-          <button id="clear-btn">remove</button>
+          <button id="add-btn" @click.prevent="addTodo" type="submit">
+            add
+          </button>
+          <button id="clear-btn" @click="deleteDoneTodos">remove</button>
 
           <div class="filter">
             <label for="filter-all">
@@ -33,25 +40,54 @@ <h2 class="claim">Getting things done…</h2>
                 name="filter"
                 id="filter-all"
                 value="all"
+                v-model="filter"
                 checked
               />
               all
             </label>
             <label for="filter-open">
-              <input type="radio" name="filter" id="filter-open" value="open" />
+              <input
+                type="radio"
+                name="filter"
+                id="filter-open"
+                value="open"
+                v-model="filter"
+              />
               open
             </label>
             <label for="filter-done">
-              <input type="radio" name="filter" id="filter-done" value="done" />
+              <input
+                type="radio"
+                name="filter"
+                id="filter-done"
+                value="done"
+                v-model="filter"
+              />
               done
             </label>
           </div>
         </form>
 
-        <ul id="task-list"></ul>
+        <ul class="task-list">
+          <li class="task-item" v-for="todo of filteredTodos" :key="todo.id">
+            <div class="checkbox-wrapper">
+              <input
+                type="checkbox"
+                name="item-1"
+                id="'item-' + todo.id"
+                :checked="todo.done"
+                @change="updateTodo(todo)"
+              />
+              <label :for="'item-' + todo.id">{{ todo.description }}</label>
+              <button class="delete-task" @click="deleteTodo(todo.id)">
+                X
+              </button>
+            </div>
+          </li>
+        </ul>
       </article>
     </main>
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-    <script type="module" src="script.js"></script>
+    <script src="https://unpkg.com/vue@latest"></script>
+    <script src="script.js"></script>
   </body>
 </html>