{"version":3,"sources":["webpack:///./src/views/ToDoListApi.vue?2432","webpack:///./src/views/ToDoListApi.vue?2153","webpack:///src/views/ToDoListApi.vue","webpack:///./src/views/ToDoListApi.vue?5f49","webpack:///./src/views/ToDoListApi.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","_v","directives","name","rawName","value","expression","modifiers","class","newTodo","length","domProps","on","$event","target","composing","trim","$forceUpdate","attrs","addToDo","_e","_l","todo","key","id","staticClass","completed","_s","title","deleteTodo","staticRenderFns","todos","loading","errored","methods","a","get","then","response","data","catch","error","console","log","finally","_todo","post","res","err","fetchData","component"],"mappings":"sIAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACA,EAAG,KAAK,CAACJ,EAAIM,GAAG,iBAAiBF,EAAG,QAAQ,CAACG,WAAW,CAAC,CAACC,KAAK,QAAQC,QAAQ,eAAeC,MAAOV,EAAW,QAAEW,WAAW,UAAUC,UAAU,CAAC,MAAO,KAAQC,MAAM,CAACb,EAAIc,QAAQC,OAAS,EAAI,MAAQ,SAASC,SAAS,CAAC,MAAShB,EAAW,SAAGiB,GAAG,CAAC,MAAQ,SAASC,GAAWA,EAAOC,OAAOC,YAAqBpB,EAAIc,QAAQI,EAAOC,OAAOT,MAAMW,SAAQ,KAAO,SAASH,GAAQ,OAAOlB,EAAIsB,mBAAmBlB,EAAG,QAAQ,CAACmB,MAAM,CAAC,MAAQ,MAAM,KAAO,SAAS,SAAWvB,EAAIc,QAAQC,OAAS,GAAGE,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOlB,EAAIwB,cAAexB,EAAW,QAAEI,EAAG,UAAU,CAACA,EAAG,IAAI,CAACJ,EAAIM,GAAG,uGAAuGF,EAAG,UAAU,CAAEJ,EAAW,QAAEI,EAAG,MAAM,CAACJ,EAAIM,GAAG,gBAAgBN,EAAIyB,KAAKzB,EAAI0B,GAAI1B,EAAS,OAAE,SAAS2B,GAAM,OAAOvB,EAAG,MAAM,CAACwB,IAAID,EAAKE,IAAI,CAACzB,EAAG,MAAM,CAAC0B,YAAY,YAAYjB,MAAM,CAAE,cAAec,EAAKI,YAAa,CAAC3B,EAAG,IAAI,CAACJ,EAAIM,GAAG,IAAIN,EAAIgC,GAAGL,EAAKM,OAAO,KAAK7B,EAAG,SAAS,CAAC0B,YAAY,MAAMb,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOlB,EAAIkC,WAAWP,EAAKE,OAAO,CAAC7B,EAAIM,GAAG,iBAAgB,MAC1oC6B,EAAkB,G,qBCoCP,GACb,OACE,MAAO,CACLC,MAAO,GACPtB,QAAS,GACTuB,SAAS,EACTC,SAAS,IAIbC,QAAS,CACP,YACE,EAAAC,EACGC,IAAI,uDACJC,KAAKC,GAAa1C,KAAKmC,MAAQO,EAASC,MACxCC,MAAMC,IACLC,QAAQC,IAAIF,GACZ7C,KAAKqC,SAAU,IAEhBW,QAAQ,IAAOhD,KAAKoC,SAAU,IAWnC,UACEpC,KAAKoC,SAAU,EAGf,MAAMa,EAAQ,CACZjB,MAAOhC,KAAKa,QACZiB,WAAW,GAEb9B,KAAKa,QAAU,GAEf,EAAA0B,EACGW,KAAK,6CAA8CD,GACnDR,KAAKU,GAAQnD,KAAKmC,MAAQ,IAAInC,KAAKmC,MAAOgB,EAAIR,OAC9CC,MAAMQ,GAAON,QAAQC,IAAIK,IACzBJ,QAAQ,IAAOhD,KAAKoC,SAAU,KAGrC,UACEpC,KAAKqD,cCrF2L,I,wBCQhMC,EAAY,eACd,EACAxD,EACAoC,GACA,EACA,KACA,WACA,MAIa,aAAAoB,E","file":"js/todolistapi.3a324b04.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToDoListApi.vue?vue&type=style&index=0&id=b2f6f9c6&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('h1',[_vm._v(\"To Do (Api)\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.trim\",value:(_vm.newTodo),expression:\"newTodo\",modifiers:{\"trim\":true}}],class:[_vm.newTodo.length < 3 ? 'red' : 'green'],domProps:{\"value\":(_vm.newTodo)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.newTodo=$event.target.value.trim()},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('input',{attrs:{\"value\":\"Add\",\"type\":\"button\",\"disabled\":_vm.newTodo.length < 3},on:{\"click\":function($event){return _vm.addToDo()}}}),(_vm.errored)?_c('section',[_c('p',[_vm._v(\" We're sorry, we're not able to retrieve this information at the moment, please try back later \")])]):_c('section',[(_vm.loading)?_c('div',[_vm._v(\"Loading...\")]):_vm._e(),_vm._l((_vm.todos),function(todo){return _c('div',{key:todo.id},[_c('div',{staticClass:\"todo-item\",class:{ 'is-complete': todo.completed }},[_c('p',[_vm._v(\" \"+_vm._s(todo.title)+\" \"),_c('button',{staticClass:\"del\",on:{\"click\":function($event){return _vm.deleteTodo(todo.id)}}},[_vm._v(\"x\")])])])])})],2)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div>\r\n    <h1>To Do (Api)</h1>\r\n    <input\r\n      v-model.trim=\"newTodo\"\r\n      v-bind:class=\"[newTodo.length < 3 ? 'red' : 'green']\"\r\n    />\r\n    <input\r\n      value=\"Add\"\r\n      type=\"button\"\r\n      @click=\"addToDo()\"\r\n      :disabled=\"newTodo.length < 3\"\r\n    />\r\n    <section v-if=\"errored\">\r\n      <p>\r\n        We're sorry, we're not able to retrieve this information at the moment,\r\n        please try back later\r\n      </p>\r\n    </section>\r\n\r\n    <section v-else>\r\n      <div v-if=\"loading\">Loading...</div>\r\n      <div v-bind:key=\"todo.id\" v-for=\"todo in todos\">\r\n        <div class=\"todo-item\" v-bind:class=\"{ 'is-complete': todo.completed }\">\r\n          <p>\r\n            {{ todo.title }}\r\n            <button @click=\"deleteTodo(todo.id)\" class=\"del\">x</button>\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </section>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport axios from \"axios\";\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      todos: [],\r\n      newTodo: \"\",\r\n      loading: true,\r\n      errored: false\r\n    };\r\n  },\r\n\r\n  methods: {\r\n    fetchData() {\r\n      axios\r\n        .get(\"https://jsonplaceholder.typicode.com/todos?_limit=5\")\r\n        .then(response => (this.todos = response.data))\r\n        .catch(error => {\r\n          console.log(error);\r\n          this.errored = true;\r\n        })\r\n        .finally(() => (this.loading = false));\r\n    },\r\n    // deleteTodo(id) {\r\n    //   debugger;\r\n    //   this.loading = true;\r\n    //   axios\r\n    //     .delete(`https://jsonplaceholder.typicode.com/todos/${id}`)\r\n    //     .then(res => (this.todos = this.todos.filter(todo => todo.id !== id)))\r\n    //     .catch(err => console.log(err))\r\n    //     .finally(() => (this.loading = false));\r\n    // },\r\n    addToDo() {\r\n      this.loading = true;\r\n\r\n      debugger;\r\n      const _todo = {\r\n        title: this.newTodo,\r\n        completed: false\r\n      };\r\n      this.newTodo = \"\";\r\n      //const { title } = this.newTodo;\r\n      axios\r\n        .post(\"https://jsonplaceholder.typicode.com/todos\", _todo)\r\n        .then(res => (this.todos = [...this.todos, res.data]))\r\n        .catch(err => console.log(err))\r\n        .finally(() => (this.loading = false));\r\n    }\r\n  },\r\n  mounted() {\r\n    this.fetchData();\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n* {\r\n  box-sizing: border-box;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.del {\r\n  background: #ff0000;\r\n  color: #fff;\r\n  border: none;\r\n  padding: 5px 9px;\r\n  border-radius: 50%;\r\n  cursor: pointer;\r\n  float: right;\r\n}\r\n\r\n.todo-item {\r\n  background: #f4f4f4;\r\n  padding: 10px;\r\n  border-bottom: 1px #ccc dotted;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  p {\r\n    font-size: 200%;\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToDoListApi.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ToDoListApi.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ToDoListApi.vue?vue&type=template&id=b2f6f9c6&scoped=true&\"\nimport script from \"./ToDoListApi.vue?vue&type=script&lang=js&\"\nexport * from \"./ToDoListApi.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ToDoListApi.vue?vue&type=style&index=0&id=b2f6f9c6&scoped=true&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"b2f6f9c6\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}