finished app

package.json

@@ -13,6 +13,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
     "vite": "^5.1.6"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.vue

@@ -1,16 +1,77 @@
 <script>
 import Todo from "@/components/Todo.vue";
+
 export default {
   name: "App",
+  data () {
+    return {
+      newTodo: "",
+      todos: [],
+    }
+  },
   components: {
     Todo,
+  },
+  methods: {
+    toggleDone(index) {
+      this.todos[index].done = !this.todos[index].done;
+      this.storeTodos();
+    },
+    removeTodo(index) {
+      this.todos.splice(index, 1);
+      this.storeTodos();
+    },
+    addTodo() {
+      if(this.newTodo.trim() === "") {
+        return;
+      }
+      this.todos.push({todo: this.newTodo, done:false});
+      this.newTodo = "";
+      this.storeTodos();
+    },
+    storeTodos() {
+      localStorage.setItem("todos", JSON.stringify(this.todos))
+    }
+  },
+  computed: {
+    openTodos() {
+      return this.todos.filter((todo) => {
+        return !todo.done
+      });
+    }
+  },
+  mounted() {
+    let data = localStorage.getItem("todos");
+    if(data !== "" && data != null) {
+      this.todos = JSON.parse(data);
+    } else {
+      this.todos = [];
+    }
   }
 }
 </script>
 
 <template>
   <div>
-    <Todo />
+    <div class="bg-gray-600 text-white m-auto h-screen">
+      <div class="text-center border-b-2 border-black py-4">
+        <h1 class="text-3xl py-4">Unsere Todos</h1>
+        <p class="text-xl" v-if="openTodos.length > 0">Offene Todos: {{ openTodos.length }}</p>
+        <p class="text-xl" v-else>Gratuliere, keine offenen Todos!</p>
+        <div class="mt-4">
+          <input type="text" class="py-2 px-2 w-2/3 text-black" v-model="newTodo">
+          <button class="bg-blue-500 py-2 w-1/3" @click="addTodo">Add Todo</button>
+        </div>
+      </div>
+      <div class="border-b border-white last:border-black last:border-b-2" v-for="(todo, index) in todos" :key="todo.todo">
+        <Todo
+            :todoprop="todo"
+            :todoindex="index"
+            @toggledone-index="toggleDone"
+            @remove-todo="removeTodo"
+        />
+      </div>
+    </div>
   </div>
 
 </template>

src/assets/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/Todo.vue

@@ -2,13 +2,25 @@
 export default {
   name: "Todo",
   data () {
-
-  }
+    return {
+      todo: this.todoprop,
+    }
+  },
+  methods: {
+    toggleTodoDone() {
+      this.$emit("toggledone-index", this.todoindex)
+    },
+    removeTodo() {
+      this.$emit("remove-todo", this.todoindex);
+    }
+  },
+  props: ["todoprop", "todoindex"]
 };
 </script>
 
 <template>
-  <div>
-    <h1>Hello World</h1>
+  <div class="flex items-center">
+    <h1 @click="toggleTodoDone" class="cursor-pointer w-2/3 py-2 px-2" :class="{'bg-green-600': this.todo.done, 'bg-red-600': !this.todo.done}">{{ todo.todo }}</h1>
+    <button @click="removeTodo" class="bg-black py-2 w-1/3 h-full">Delete Todo</button>
   </div>
 </template>

src/main.js

@@ -1,3 +1,5 @@
+import '@/assets/tailwind.css'
+
 import { createApp } from 'vue'
 import App from './App.vue'
 

tailwind.config.js

@@ -0,0 +1,16 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}