<template>
  <div id="app">
      <Header />
      <AddTodo v-on:add-todo="addTodo"/>
      <Todos v-bind:todos="todos" v-on:del-todo="deleteTask"/>
    <!-- From file Todos // todos is from data() -->

  </div>
</template>

<script>
/* eslint-disable */
//import HelloWorld from './components/HelloWorld.vue'
import Todos from './components/Todos.vue';
import Header from './components/Header.vue';
import AddTodo from './components/AddTodo.vue';
import axios from 'axios';

export default {
  name: 'App',
  //------------------------start components ------------------------
  components: {
    //child
    Todos,
    Header,
    AddTodo
  },
  //------------------------end components ------------------------
  //------------------------start data ------------------------
  data(){
    return {
      todos:[]
    }
  },
  //------------------------end data ------------------------
  //------------------------start methods ------------------------
  methods:{
    deleteTask(id){
      this.todos = this.todos.filter(todo => todo.id !== id);
    },
    addTodo(newTodo){
      //const {title,completed}
      this.todos = [...this.todos , newTodo];
    },
    created(){
      axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
        .then(res=>this.todos = res.data)
        .catch(err=>console.log(err));
    }
  }
}
</script>

<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
  }
  .btn {
    display: inline-block;
    border: none;
    background: #555;
    color: #fff;
    padding: 7px 20px;
    cursor: pointer;
  }
  .btn:hover {
    background: #666;
  }
</style>