Bootstrap 5.1 Version
https://getbootstrap.com/docs/5.1/getting-started/introduction/
angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
index.html
//index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" />
<title>AngularJs Shopping Cart</title>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="shoppingcart" ng-controller="shoppingCTR">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Cairocoders</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<h3 class = "text-primary">AngularJs Shopping Cart</h3>
<hr style = "border-top:1px dotted #ccc;"/>
<div id = "bg-background" class="col-8">
<h4>PRODUCTS<h4>
<hr style = "border-top:1px groovy #ccc;">
<div id = "product">
<div id = "p_list" ng-repeat = "product in products ">
<span style="font-size:16px;">{{product.p_name}}</span>
<center><img ng-src = "{{product.p_image}}"/></center>
<div><label style="font-size:14px;">Price: ₱{{product.p_price}}</label></div>
<center><button type = "button" class="btn btn-primary" ng-click = "add_cart(product)"> Add to cart</button></center>
</div>
</div>
</div>
<div class="col-4">
<div class = "panel panel-primary">
<div class = "panel-heading">
<h5>MY CART</h5>
</div>
<div class = "panel-body table-responsive">
<table class = "table">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "cart in carts" ng-init = "setTotals(cart)">
<td>{{cart.p_name}}</td>
<td>₱{{cart.p_price}}</td>
<td><button type = "button" ng-click = "remove_cart(cart)" class = "btn btn-danger"> X</button></td>
</tr>
<tr>
<td align = "right">Total</td>
<td>₱{{total}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
var app = angular.module("shoppingcart", [])
.controller("shoppingCTR", function($scope){
$scope.carts=[];
$scope.products = [
{p_id: "1", p_name: "Dell Inspiron 15 3501", p_image: "images/1.jpg", p_price: 5900},
{p_id: "2", p_name: "Asus X515 11th Gen intel", p_image: "images/2.jpg", p_price: 6800},
{p_id: "3", p_name: "Lenovo IdealPad 3", p_image: "images/3.jpg", p_price: 4800},
];
$scope.add_cart = function(product){
if(product){
$scope.carts.push({p_id: product.p_id, p_name: product.p_name, p_price: product.p_price});
}
}
$scope.total = 0;
$scope.setTotals = function(cart){
if(cart){
$scope.total += cart.p_price;
}
}
$scope.remove_cart = function(cart){
if(cart){
$scope.carts.splice($scope.carts.indexOf(cart), 1);
$scope.total -= cart.p_price;
}
}
});
</script>
<style>
#bg-background{
background-color:#fff;
padding:10px;
border-radius:5px;
}
#product{
padding:5px;
clear:both;
}
#p_list{
width:200px;
max-width:200px;
height:260px;
padding:5px;
border:1px solid #000;
float:left;
margin:15px;
}
#p_list img{
height:150px;
width:150px;
}
</style>
</body>
</html>
