akiyamaSM/books.html

## books.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
</head>

<body>
<div id="app">
    <label>Name</label> <input type="text" id="name" v-model="newBook.name"  />  <br />
    <label>Author</label> <input type="text" id="author" v-model="newBook.author"  /> <br />
    <label>Pages</label> <input type="text" id="author" v-model="newBook.totalPages"  /> <br />
    <button v-if='updateMode()' id="update" @click.prevent="update()" />Update</button>
    <button v-else id="add" @click.prevent="add()" />add</button>

    <ul id="example-2">
      <li v-for='book in books'>
         <b>{{ book.name }}</b> By <i>{{ book.author }} ({{ book.totalPagesRead }}/{{ book.totalPages }})</i>
         <a v-if='isNotComplete(book)' href='#' @click.prevent = 'complete(book, $index)'>DONE</a>
         <a v-if='isNotComplete(book)' href='#' @click.prevent = 'readPages(book, $index)'>Read some</a>
         <a href="#" @click.prevent = 'edit(book, $index)'>EDIT IT</a>
         <a href='#' @click.prevent = 'remove(book, $index)'>DROP IT</a>
     </li>
    </ul>
</div>


<script type="text/javascript">

new Vue({
// To Modify listVar.items.$set(0, {name : 'edited', code : '003', visible : true, hiddenText : 'Modified!!'})
    el: '#app',
    data: {
        books: [
            { name : 'The Majesty of Vue.js', author : 'Alex Kyriakidis, Kostas Maniatis and Evan You' , completed : false, totalPages : 100, totalPagesRead : 0 },
            { name : 'Laravel: Code Bright ', author : 'Dayle Rees' , completed : false, totalPages : 100, totalPagesRead : 0 },
            { name : 'Laravel: From Apprentice To Artisan', author : 'Taylor Otwell' , completed : false, totalPages : 150, totalPagesRead : 0 },
            { name : 'Laravel Testing Decoded', author : 'JeffreyWay' , completed : false, totalPages : 200, totalPagesRead : 0 }
        ],
        newBook: {
            name : '',
            author : '',
            completed : false,
            totalPages : '',
            totalPagesRead : 0
        },
        indexToEdit : ''
    },
    methods: {
        complete: function(book, index){
            book.completed = true
            book.totalPagesRead = book.totalPages
            this.books.$set(index, book)
        },
        isNotComplete: function(book){
            return book.completed == false && book.totalPagesRead < book.totalPages
        },
        remove: function(book, index){
            this.books.$remove(book)
            if(this.indexToEdit == index){
                this.indexToEdit = ''

                this.newBook = {
                    name : '',
                    author : '',
                    completed : false,
                    totalPages : '',
                    totalPagesRead : 0
                }
            }
        },
        readPages: function(book, index){
            var extraPages = prompt("Please enter your How Many Pages have you read", book.totalPagesRead);
            if(extraPages == null || extraPages<0){
                alert('input should not be empty or negative')
            }else if(isNaN(extraPages)){
                alert('it should be numeric')
            }else if(extraPages > book.totalPages){
                alert('where can I find the extra pages!!?')
            }else{
                book.totalPagesRead = extraPages
            }
        },
        updateMode: function(){
            return this.indexToEdit !== ''
        },
        edit: function(book, index){
            this.newBook.name = book.name
            this.newBook.author = book.author
            this.newBook.totalPages = book.totalPages
            this.newBook.totalPagesRead = book.totalPagesRead
            this.newBook.completed = book.completed
            this.indexToEdit = index
        },
        isReadyToBePushed: function(book){
            return book.name != '' && book.author != '' && book.totalPages != ''
        },
        checkBook: function(book){
            book.totalPagesRead = book.totalPagesRead >= book.totalPages ? book.totalPages : book.totalPagesRead
            book.completed = book.totalPagesRead == book.totalPages ? true : false
            return book
        },
        update: function(){
            var newBook = this.newBook
            if(this.isReadyToBePushed(newBook)){
                this.newBook = {
                    name : '',
                    author : '',
                    completed : false,
                    totalPages : '',
                    totalPagesRead : 0
                }
                newBook = this.checkBook(newBook)

                this.books.$set(this.indexToEdit, newBook)
                this.indexToEdit = ''

            }else{
                alert('You should Fill all the fields!')
            }
        },
        add: function(){
            var newBook = this.newBook
            if(this.isReadyToBePushed(newBook)){
                this.books.push(newBook)
                this.newBook = {
                    name : '',
                    author : '',
                    completed : false,
                    totalPages : '',
                    totalPagesRead : 0
                }
            }else{
                alert('You should Fill all the fields!')
            }
        }
    }
})
</script>
</body>
</html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
	</head>

	<body>
	<div id="app">
	<label>Name</label> <input type="text" id="name" v-model="newBook.name" /> <br />
	<label>Author</label> <input type="text" id="author" v-model="newBook.author" /> <br />
	<label>Pages</label> <input type="text" id="author" v-model="newBook.totalPages" /> <br />
	<button v-if='updateMode()' id="update" @click.prevent="update()" />Update</button>
	<button v-else id="add" @click.prevent="add()" />add</button>

	<ul id="example-2">
	<li v-for='book in books'>
	<b>{{ book.name }}</b> By <i>{{ book.author }} ({{ book.totalPagesRead }}/{{ book.totalPages }})</i>
	<a v-if='isNotComplete(book)' href='#' @click.prevent = 'complete(book, $index)'>DONE</a>
	<a v-if='isNotComplete(book)' href='#' @click.prevent = 'readPages(book, $index)'>Read some</a>
	<a href="#" @click.prevent = 'edit(book, $index)'>EDIT IT</a>
	<a href='#' @click.prevent = 'remove(book, $index)'>DROP IT</a>
	</li>
	</ul>
	</div>


	<script type="text/javascript">

	new Vue({
	// To Modify listVar.items.$set(0, {name : 'edited', code : '003', visible : true, hiddenText : 'Modified!!'})
	el: '#app',
	data: {
	books: [
	{ name : 'The Majesty of Vue.js', author : 'Alex Kyriakidis, Kostas Maniatis and Evan You' , completed : false, totalPages : 100, totalPagesRead : 0 },
	{ name : 'Laravel: Code Bright ', author : 'Dayle Rees' , completed : false, totalPages : 100, totalPagesRead : 0 },
	{ name : 'Laravel: From Apprentice To Artisan', author : 'Taylor Otwell' , completed : false, totalPages : 150, totalPagesRead : 0 },
	{ name : 'Laravel Testing Decoded', author : 'JeffreyWay' , completed : false, totalPages : 200, totalPagesRead : 0 }
	],
	newBook: {
	name : '',
	author : '',
	completed : false,
	totalPages : '',
	totalPagesRead : 0
	},
	indexToEdit : ''
	},
	methods: {
	complete: function(book, index){
	book.completed = true
	book.totalPagesRead = book.totalPages
	this.books.$set(index, book)
	},
	isNotComplete: function(book){
	return book.completed == false && book.totalPagesRead < book.totalPages
	},
	remove: function(book, index){
	this.books.$remove(book)
	if(this.indexToEdit == index){
	this.indexToEdit = ''

	this.newBook = {
	name : '',
	author : '',
	completed : false,
	totalPages : '',
	totalPagesRead : 0
	}
	}
	},
	readPages: function(book, index){
	var extraPages = prompt("Please enter your How Many Pages have you read", book.totalPagesRead);
	if(extraPages == null \|\| extraPages<0){
	alert('input should not be empty or negative')
	}else if(isNaN(extraPages)){
	alert('it should be numeric')
	}else if(extraPages > book.totalPages){
	alert('where can I find the extra pages!!?')
	}else{
	book.totalPagesRead = extraPages
	}
	},
	updateMode: function(){
	return this.indexToEdit !== ''
	},
	edit: function(book, index){
	this.newBook.name = book.name
	this.newBook.author = book.author
	this.newBook.totalPages = book.totalPages
	this.newBook.totalPagesRead = book.totalPagesRead
	this.newBook.completed = book.completed
	this.indexToEdit = index
	},
	isReadyToBePushed: function(book){
	return book.name != '' && book.author != '' && book.totalPages != ''
	},
	checkBook: function(book){
	book.totalPagesRead = book.totalPagesRead >= book.totalPages ? book.totalPages : book.totalPagesRead
	book.completed = book.totalPagesRead == book.totalPages ? true : false
	return book
	},
	update: function(){
	var newBook = this.newBook
	if(this.isReadyToBePushed(newBook)){
	this.newBook = {
	name : '',
	author : '',
	completed : false,
	totalPages : '',
	totalPagesRead : 0
	}
	newBook = this.checkBook(newBook)

	this.books.$set(this.indexToEdit, newBook)
	this.indexToEdit = ''

	}else{
	alert('You should Fill all the fields!')
	}
	},
	add: function(){
	var newBook = this.newBook
	if(this.isReadyToBePushed(newBook)){
	this.books.push(newBook)
	this.newBook = {
	name : '',
	author : '',
	completed : false,
	totalPages : '',
	totalPagesRead : 0
	}
	}else{
	alert('You should Fill all the fields!')
	}
	}
	}
	})
	</script>
	</body>
	</html>