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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | //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 = "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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //script.jsvar 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++; }}); |
