Bootstrap 4.0 Version
https://getbootstrap.com/docs/4.0/getting-started/introduction/
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
Bootstrap Icons
https://icons.getbootstrap.com/#install
CDN : https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css
index.html
//index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" name = "viewport" content = "width-device=width, initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src = "js/script.js"></script>
</head>
<body ng-app = "likedislike" ng-controller = "likedislikeCTR">
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<a class = "navbar-brand" href = "#">Cairocoders</a>
</div>
</nav>
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6">
<h3 class = "text-primary">AngularJS Simple Like and Dislike</h3>
<hr style = "border-top:1px dotted #000;"/>
<br /><br />
<table class = "table table-bordered">
<thead>
<tr>
<th>Programming Language</th>
<th>Like</th>
<th>Dislike</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pLang in pLangs">
<td>{{pLang.name}}</td>
<td>{{pLang.Likes}}</td>
<td>{{pLang.Dislikes}}</td>
<td><center><button class = "btn btn-primary" ng-click = "incrementUp(pLang)"><i class="bi bi-hand-thumbs-up"></i></button> | <button class = "btn btn-danger" ng-click = "decrementDown(pLang)"><i class="bi bi-hand-thumbs-down"></i></button></center></td>
</tr>
</tbody>
</table>
</div>
<div class = "col-md-3"></div>
</div>
</body>
</html>
script.js
//script.js
var myApp = angular.module("likedislike", [])
.controller("likedislikeCTR" , function($scope){
var pLangs =[
{name: "Javascript", Likes: 0, Dislikes: 0},
{name: "Python", Likes: 0, Dislikes: 0},
{name: "Java", Likes: 0, Dislikes: 0},
{name: "PHP", Likes: 0, Dislikes: 0},
{name: "Swift", Likes: 0, Dislikes: 0}
];
$scope.pLangs = pLangs;
$scope.incrementUp = function(pLang){
pLang.Likes++;
}
$scope.decrementDown = function(pLang){
pLang.Dislikes++;
}
});
