Added check box to mark task as completed, for this a style.css file is also added for styling

rameshovyas · rameshovyas · commit 005e63724cf2 · 2022-06-09T19:15:18.000+05:30
diff --git a/app.js b/app.js
@@ -5,15 +5,18 @@ const app = Vue.createApp({
         return {
           newTodo: '',
           todos :[
-              {id: ++id, text: 'Try new app in Vue'},
-              {id: ++id, text: 'Learn Actix Web'}
+              {id: ++id, text: 'Try new app in Vue',done:true},
+              {id: ++id, text: 'Learn Actix Web',done:true},
+              {id: ++id, text: 'Learn Rust Programming',done:false},
+              {id: ++id, text: 'Learn Sanskrit',done:false},
+              {id: ++id, text: 'Learn Vedas',done:false},              
           ]
 
         }
     },
     methods: {
         addTodo() {
-            this.todos.push({id: ++id, text: this.newTodo})
+            this.todos.push({id: ++id, text: this.newTodo,done:false})
             this.newTodo='';
         },
 
diff --git a/index.html b/index.html
@@ -4,16 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Simple Vue Js ToDo UI</title>
+    <link rel="stylesheet" href="style.css">
     <script src="https://unpkg.com/vue@3"></script>
 </head>
 <body>
+    <h1>Simple To Do List in Vue-JS 3</h1>
     <div id="app">
 
        <input v-model="newTodo"></input>
        <button @click="addTodo()">Add Task</button>
        <ul>
            <li v-for="todo in todos" :key="todo.id">
-               {{ todo.text }}
+               <input type="checkbox" v-model="todo.done">
+               <span :class="{ completed: todo.done }">{{ todo.text }}</span>
                <button @click="removeTodo(todo)">Remove</button>
            </li>
        </ul>
diff --git a/style.css b/style.css
@@ -0,0 +1,9 @@
+body{
+    margin:0 auto;
+    background-color: beige;
+    color:black;
+    padding: 20px;
+}
+.completed{
+    text-decoration: line-through;
+}
