feat(ui): add random to-do on start and add a background art

Author: mateusfg7

public/to-do-list.svg

@@ -21,35 +21,69 @@ const completedPercentage = computed(() => {
   return (completedTodos / totalOfTodos) * 100
 })
 
+const isEmpty = computed(() => todoList.todos.length < 1)
+
 const toast = useToast()
 
-function addNewTodo() {
+function isTodoCreated(name: string) {
+  const repeatedList = todoList.todos.filter(todo => slugger(todo.name) === slugger(name))
+
+  if (repeatedList.length > 0) return true
+  else return false
+}
+
+function addNewTodo(name: string) {
   // Prevent todo names less than 2 characters
-  if (todoInput.value.length < 2) {
+  if (name.length < 2) {
     error.value = true
     toast.warning("The to-do name has to be more than 2 characters")
     return
   }
 
   // Prevent repeated todos
-  const repeatedList = todoList.todos.filter(todo => slugger(todo.name) === slugger(todoInput.value))
-  if (repeatedList.length > 0) {
+  if (isTodoCreated(name)) {
     error.value = true
     toast.warning("There is already a to-do with that name")
     return
   }
 
 
   todoList.todos.push({
-    name: todoInput.value,
+    name: name,
     complete: false,
-    id: slugger(todoInput.value) + '_' + Date.now()
+    id: slugger(name) + '_' + Date.now()
   })
   window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })
   todoInput.value = ''
 
 }
 
+const randomTodos = [
+  'Read "Foundation", Isaac Asimov.',
+  'Watch "The Matrix"',
+  'Watch "Inglourious Basterds"',
+  'Watch "Mr. Robot" serie',
+  'Play Skyrim game',
+  'Listen "Da Ponte pra Cá", Racionais MC.',
+]
+const randomTodoTryTime = ref(1)
+
+function addRandomTodo() {
+  if (randomTodoTryTime.value > randomTodos.length) return
+
+  const randomIndex = Math.floor(Math.random() * randomTodos.length)
+  const randomTodo = randomTodos[randomIndex]
+
+
+  if (isTodoCreated(randomTodo)) {
+    randomTodoTryTime.value += 1
+    addRandomTodo()
+  }
+  else {
+    addNewTodo(randomTodo)
+  }
+}
+
 function removeTodo(todoId: string) {
   todoList.todos = todoList.todos.filter((todo) => todo.id !== todoId)
 }
@@ -73,6 +107,8 @@ onMounted(() => {
     todoList.todos.push(...parsedTodoList)
   }
 
+  addRandomTodo()
+
   todoInputComponent?.value?.addEventListener("animationend", () => {
     error.value = false
   })
@@ -83,24 +119,26 @@ onMounted(() => {
 
 <template>
   <div class="space-y-5">
-    <div class="fixed left-0 right-0 top-0 h-2 w-full" :class="todoList.todos.length > 0 && 'bg-neutral-100'">
+    <div class="fixed top-0 left-0 right-0 w-full h-2" :class="todoList.todos.length > 0 && 'bg-neutral-100'">
       <div :data-percentage="completedPercentage"
         class='h-full bg-vue-light transition-all rounded-r-full data-[percentage="100"]:rounded-none'
         :style="{ width: completedPercentage + '%' }" />
     </div>
     <div :data-error="error" ref="todoInputComponent"
       class='content-container fixed bottom-20 space-y-1 data-[error="true"]:animate-shake'>
       <div class="flex items-stretch justify-between gap-3">
-        <input type="text" v-model="todoInput" @keypress.enter="addNewTodo" placeholder="Some task"
+        <input type="text" v-model="todoInput" @keypress.enter="() => addNewTodo(todoInput)" placeholder="Some task"
           class="h-12 w-full rounded-lg border-none bg-neutral-200/95 p-3 text-xl backdrop-blur-[80px] focus:bg-neutral-100/95 focus:ring-2 focus:ring-vue-light transition-colors" />
-        <button @click="addNewTodo"
+        <button @click="() => addNewTodo(todoInput)"
           class="flex aspect-square h-12 items-center justify-center rounded-lg bg-vue-dark/70 text-xl text-white backdrop-blur-[80px] transition-colors hover:bg-vue-dark">
           <PhPlus weight="bold" />
         </button>
       </div>
     </div>
 
-    <div class="content-container space-y-1">
+    <div class="space-y-1 content-container">
+      <img src="/to-do-list.svg" :data-is-empty="isEmpty"
+        class="fixed opacity-50 -translate-x-1/2 data-[is-empty='false']:opacity-10 transition-opacity duration-500 -translate-y-1/3 w-96 -z-10 top-1/3 left-1/2" />
       <Todo v-for="todo in todoList.todos" :key="todo.id" :todo="todo" :remove-fn="removeTodo"
         :toggle-fn="toggleTodoCheck" />
     </div>

src/App.vue

@@ -5,16 +5,16 @@ defineProps<{ todo: TodoData; removeFn: (id: string) => void; toggleFn: (id: str
 </script>
 
 <template>
-  <div class="group flex items-center justify-between gap-5 rounded-lg p-2 text-xl animate-fade-up"
+  <div class="flex items-center justify-between gap-5 p-2 text-xl rounded-lg group animate-fade-up"
     :class="!todo.complete && 'bg-neutral-200/30'">
-    <div class="flex w-full items-center gap-5 overflow-hidden">
+    <div class="flex items-center w-full gap-5 overflow-hidden">
       <input type="checkbox" title="Mark to-do as completed" :checked="todo.complete" @click="toggleFn(todo.id)"
-        class="cursor-pointer rounded border border-neutral-700 bg-transparent p-3 text-vue-light focus:outline-none focus:ring-0" />
+        class="p-3 bg-transparent border rounded cursor-pointer border-neutral-700 text-vue-light focus:outline-none focus:ring-0" />
       <span :class="todo.complete && 'text-neutral-500 line-through'"
         class="overflow-hidden text-ellipsis whitespace-nowrap" :title="todo.name">{{ todo.name }}</span>
     </div>
     <button @click="removeFn(todo.id)" title="Delete to-do"
-      class="text-neutral-500/20 transition-colors hover:text-red-700">
+      class="transition-colors text-neutral-500/20 hover:text-red-700">
       <PhTrash weight="regular" />
     </button>
   </div>