CartCraft Copy this Tailwind Component 0to Your Project
<!DOCTYPE html> <html ng app="shoppingCartApp"> <head> <title>Shopping Cart</title> <link rel="stylesheet" href="styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng controller="MainController"> <h2>Shopping Cart</h2> <div> <input type="text" ng model="newItem.name" placeholder="Item name"> <input type="number" ng model="newItem.price" placeholder="Price" min="0"> <button ng click="addItem()">Add Item</button> </div> <table border="1" style="margin top: 15px;"> <thead> <tr> <th>Item</th> <th>Price</th> <th>Qty</th> <th>Action</th> </tr> </thead> <tbody> <tr ng repeat="item in cart track by $index"> <td>{{ item.name }}</td> <td>{{ item.price | currency }}</td> <td>{{ item.qty }}</td> <td><button ng click="removeItem($index)">Remove</button></td> </tr> <tr> <td colspan="2"><strong>Total</strong></td> <td colspan="2">{{ getTotal() | currency }}</td> </tr> </tbody> </table> </div> <script src="app.js"></script> </body> </html>