shahidcodes/index.html

## index.html
<html>
  <head>
    <title>You have things left to do..</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200" rel="stylesheet">
    <style>
      body{
  font-family: 'Nunito Sans', sans-serif;
  background-color:#252627;
}
.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  flex-direction: column;
}
.page-header{
  margin:0px;
  padding:0px;
  font-size: 4em;
  color:#fff;
}
.box{
  background-color: #fff;
  border-left: 1px solid #CDDDDD;
  border-radius: 14px;
  margin-top: 1em;
  min-height: 500px;
  overflow-y: auto;
  font-size: 3em;
  max-width: 23em;
}

ul{
  margin: 0px;
  list-style:none;
  margin-right: 1em;
}
ul>li{
  padding: 10px;
  border-bottom: 1px solid #D3D4D9;
}
ul>li:last-of-type{
  border-bottom: none;
}
.completed{
  text-decoration: line-through;
}

    </style>
    </head>
  <body>
    <div class="wrapper">
      <h1 class="page-header">You have these left....</h1>
    <div id="app-5" class="box">
      <ul>
        <li v-for="todo in todos"
            :todo-id="'todo-' + todo.id"
            v-on:click="edit"
            v-on:blur="changed"
            v-bind:class="{completed: todo.completed}"
            >
          {{todo.title}}
        </li>
      </ul>
    </div>
   </div>
  </body>

  <script>

var app5 = new Vue({
  el: "#app-5",
  created: function () {
    this.$http.get('https://jsonplaceholder.typicode.com/todos')
      .then((res)=>{
      console.log(res)
      this.todos = JSON.parse(JSON.stringify(res)).body
      // this.todos = JSON.parse(res)

    }, (res)=>{
      //error call back
    })
   },
  data : {
    log: "wait..",
    todos : [{id:0, title:"Fetching data......"}]
  },
  methods:{
    edit(e){
      console.log(e)
      e.target.setAttribute("contenteditable", "true")
    },
    changed(e){
      console.log(e.target.attributes)
      // change target in db
    }
  }
})
  </script>
</html>

## simple-todo-app-design.markdown

      
    Raw
  

              simple-todo-app-design.markdown
            
          
    Simple todo app design

Simple todo app using vue.js framework and JSONPlaceholder.com for dummy data.
A Pen by Shahid Kamal on CodePen.
License.
	<html>
	<head>
	<title>You have things left to do..</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200" rel="stylesheet">
	<style>
	body{
	font-family: 'Nunito Sans', sans-serif;
	background-color:#252627;
	}
	.wrapper{
	display: flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	flex-direction: column;
	}
	.page-header{
	margin:0px;
	padding:0px;
	font-size: 4em;
	color:#fff;
	}
	.box{
	background-color: #fff;
	border-left: 1px solid #CDDDDD;
	border-radius: 14px;
	margin-top: 1em;
	min-height: 500px;
	overflow-y: auto;
	font-size: 3em;
	max-width: 23em;
	}

	ul{
	margin: 0px;
	list-style:none;
	margin-right: 1em;
	}
	ul>li{
	padding: 10px;
	border-bottom: 1px solid #D3D4D9;
	}
	ul>li:last-of-type{
	border-bottom: none;
	}
	.completed{
	text-decoration: line-through;
	}

	</style>
	</head>
	<body>
	<div class="wrapper">
	<h1 class="page-header">You have these left....</h1>
	<div id="app-5" class="box">
	<ul>
	<li v-for="todo in todos"
	:todo-id="'todo-' + todo.id"
	v-on:click="edit"
	v-on:blur="changed"
	v-bind:class="{completed: todo.completed}"
	>
	{{todo.title}}
	</li>
	</ul>
	</div>
	</div>
	</body>

	<script>

	var app5 = new Vue({
	el: "#app-5",
	created: function () {
	this.$http.get('https://jsonplaceholder.typicode.com/todos')
	.then((res)=>{
	console.log(res)
	this.todos = JSON.parse(JSON.stringify(res)).body
	// this.todos = JSON.parse(res)

	}, (res)=>{
	//error call back
	})
	},
	data : {
	log: "wait..",
	todos : [{id:0, title:"Fetching data......"}]
	},
	methods:{
	edit(e){
	console.log(e)
	e.target.setAttribute("contenteditable", "true")
	},
	changed(e){
	console.log(e.target.attributes)
	// change target in db
	}
	}
	})
	</script>
	</html>