<!DOCTYPE html>
<html ng-app="BookStore">
<head>
<script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>
<script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
<link data-require="bootstrap@4.1.1" data-semver="4.1.1" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container" ng-controller="BooksController">
<div class="BookContainer">
<div class="row text-center">
<h2 class="store-title">Book Store</h2>
</div>
<div class="row">
<!-- Adding new book -->
<div class="col-sm-4 col-md-4">
<div class="row text-center">
<h4 style="font-weight:bold; color:white;">Add New Book</h4>
</div>
<div class="addBook">
<div class="form-group">
<input type="text" ng-model="bookTitle" placeholder="Book Title" class="form-control"/>
</div>
<div class="form-group">
<input type="text" ng-model="bookAuthor" placeholder="Author" class="form-control"/>
</div>
<div class="form-group">
<input type="text" ng-model="bookPages" placeholder="Pages" class="form-control"/>
</div>
<div class="form-group">
<button type="button" name="button" class="btn btn-primary" ng-click="addBook(bookTitle,bookAuthor,bookPages)">Add Book</button>
</div>
</div>
</div>
<!-- Adding new book -->
<!-- display all books -->
<div class="col-sm-8 col-md-8">
<div class="row text-center">
<h4 style="font-weight:bold; color:white;">All Books</h4>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat="book in books">
<span ng-hide="edit">
<b>{{book.title}}</b> | by {{book.author}}
<span class="badge">{{book.pages}} pages</span>
<span class="pull-right">
<button type="button" name="button" class="btn btn-info btn-sm" ng-click="edit=true">edit</button>
<button type="button" name="button" class="btn btn-danger btn-sm" ng-click="delete($index)">delete</button>
</span>
</span>
<span ng-show="edit">
<input type="text" ng-model="book.title" />
<input type="text" ng-model="book.author" />
<input type="text" ng-model="book.pages" />
<button type="button" name="button" class="btn btn-primary btn-sm" ng-click="update(book.title,book.author,book.pages,$index);edit=false">update</button>
</span>
</li>
</ul>
</div>
<!-- display all books -->
</div>
</div>
</div>
</body>
</html>
/* Styles go here */
body{
background-color: #ddd;
}
.BookContainer{
margin-left: auto;
margin-right: auto;
margin-top: 5%;
padding: 2%;
border-radius: 10px;
background-color: #3c6f98;
}
.store-title{
font-weight: bold;
color: white;
}
//Defining angular module..
var app=angular.module('BookStore',[]);
//Adding Bookscontroller to app module
app.controller('BooksController',function($scope,$http){
//Defining Books Array to Collect Books
$scope.books=[
{
title:'Eloquent Javascript ',
author:'Margin haverbeka',
pages:350
},
{
title:'Javascript for Kids ',
author:' Nick Morgan',
pages:344
},
{
title:'Javasript : The Good Parts',
author:'Douglas Crackford',
pages:500
}
];
//Angular Method for Adding book
$scope.addBook=function(bookTitle,bookAuthor,bookPages){
$scope.books.push({title:bookTitle,author:bookAuthor,pages:bookPages});
};
//Angular Method for Deleting Book
$scope.delete=function(key){
//deleting book by it's index.
$scope.books.splice(key,1);
}
//Angular Method for Updating Book
$scope.update=function(title,author,pages,key){
$scope.books[key].title=title;
$scope.books[key].author=author;
$scope.books[key].pages=pages;
$scope.edit=false;
}
});