Shopping List

Developer
Mark Murray
Size
6,015 Kb
Views
26,312
  1. Shopping List Previews
  2. Shopping List HTML Codes
  3. Shopping List CSS Codes
  4. Shopping List JS Codes

How do I make an shopping list?

A Simple Shopping List and Inventory built with AngularJS . What is a shopping list? How do you make a shopping list? This script and codes were developed by Mark Murray on 12 August 2022, Friday.

Shopping List Previews
IQ Test

Shopping List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Shopping List </title> <meta name="viewport" content="width=device-width, user-scalable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html ng-app="root">
<div class="container" ng-controller="index"> <div class="box margin-right" id="shopping-list"> <h1>My Shopping List</h1> <div id="errorMessage"><i class="icon-cross"></i>Please enter all inputs!</div> <div id="successMessage"><i class="icon-checkmark"></i>Item added to shopping list!</div> <div class="half margin-right"> <input type='text' class="searchButton" placeholder='Item Name' ng-model="itemName" autofocus required> </div><div class="half"><input type='text' class="searchButton" placeholder='Shop Name' ng-model="itemShop" required></div> <div class="half margin-right">	<input type='number' class="searchButton margin-right" placeholder='Quantity' ng-model="itemQuantity" required> </div><div class="dollar half"> <span>$</span> <input type='number' class="searchButton" placeholder='Price (each)' ng-model="itemPrice" required> </div> <button id="addItem" ng-click="addItem()">Add Item</button> <div class="list"> <table border="0" cellspacing="0"> <tr class="table-header"> <td></td> <td class="left">Item Name</td> <td class="left">Shop</td> <td>Quantity</td> <td class="center">Price</td> <td class="center">Delete</td> </tr> <tr ng-repeat="item in list | orderBy: '-checked':true"> <td><input ng-show="!item.checked" ng-checked="item.checked" ng-click="add(item, list)" type='checkbox' checklist-value="item.checked"></td> <td ng-class="{selected: item.checked==true}">{{item.name}}</td> <td ng-class="{selected: item.checked==true}" class="left">{{item.shop}}</td> <td ng-class="{selected: item.checked==true}" class="center">{{item.quantity}}</td> <td ng-class="{selected: item.checked==true}">{{item.price | currency}}</td> <td><i class="icon-cross delete" ng-click="remove(item)"></i></td> </tr> </table> <div ng-hide="list.length" class="center">Your shopping list is empty.</div> <div class="cost cf"> <span class="left">Total Cost:</span> <span class="right" ng-class="{total: length!==0}">{{getTotal() | currency}}</span> </div> <button class="clear" ng-click="clearAll(list)">Clear Shopping List</button> </div> </div> <div class="box" id="inventory"> <h1>Inventory</h1> <div class="list"> <table border="0" cellspacing="0"> <div ng-hide="inventory.length" class="center">Your inventory is empty.</div> <tr ng-repeat="item in inventory"> <td>{{item.name}}</td> <td class="left">{{item.shop}}</td> <td class="center">{{item.quantity}}</td> <td class="center">{{item.price | currency}}</td> <td><i class="icon-cross delete" ng-click="removeInventory(item)"></i></td> </tr> </table> <button class="clear" ng-click="clearAll(inventory)">Clear Inventory</button> </div> </div>	</div>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Shopping List - Script Codes CSS Codes

@import url("http://www.markmurray.co/codepen/customstyle.css");
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
*, *:before, *:after { box-sizing: border-box;
}
html, body { background: #AFC7B9; font-family: 'Lato', sans-serif; height: 100%; padding: 1em;
}
.left { text-align: left !important;
}
.center { text-align: center !important;
}
.right { text-align: right !important;
}
.container { max-width: 1080px; margin: 0 auto; height: 100%;
}
.box { width: 49%; background: #f3f3f3; margin: 0 auto 2em auto; overflow: auto; padding: 1em; border-radius: 3px; display: inline-block; vertical-align: top;
}
.box:first-child { margin-right: 1%;
}
h1 { color: #3a3a3a; text-align: center; margin: 1em 0;
}
table { border: none; outline: none; width: 100%; margin: 0.5em 0 1em;
}
table tr.table-header td { font-size: 0.7em; font-weight: bolder;
}
table td { padding: 0.75em 0.5em;
}
table td:first-child { text-align: left;
}
table td:nth-child(3) { text-align: center;
}
table td:last-child, table td:nth-child(4) { text-align: right;
}
table tr:nth-child(2n+2) { background: #ebebeb;
}
.searchButton { border: 1px solid #e0e0e0; background: #fff; outline: none; padding: 1em; border-radius: 3px; font-weight: 300; font-size: 0.8em; margin-top: 0.25em; margin-bottom: 0.25em; position: relative;
}
.margin-right { margin-right: 1%;
}
.half { width: 49.5%; display: inline-block;
}
.half input { width: 100%;
}
.half:first-child { margin-right: 2%;
}
.selected { text-decoration: line-through; color: #aaa;
}
.dollar { position: relative; display: inline-block;
}
.dollar input { padding-left: 2em;
}
.dollar span { position: absolute; display: block; padding: 3px 3px 3px 7px; pointer-events: none; left: 5px; top: 13px; color: #aaa; z-index: 1;
}
.searchButton.full { width: 100%;
}
.list { font-family: 'Lato', sans-serif; font-weight: 300;
}
.list ul li { margin: 1em 0;
}
.inventory h1 { color: #3a3a3a; padding-top: 5px; font-family: 'Lato', sans-serif; text-align: center;
}
input[type='checkbox'] { background: transparent; border: 2px solid #3a3a3a; padding: 0.2em; font-size: 1em;
}
button.clear { background: #3f5872; border-bottom: 4px solid #2b3c4e;
}
button.clear:hover { background: #384e65; border-bottom: 2px solid #2b3c4e;
}
button { margin: 0.25em 0; display: block; outline: none; background: #fb887c; border: none; padding: 1.1em; border-radius: 6px; width: 100%; color: white; text-transform: uppercase; cursor: pointer; border-bottom: 4px solid #fa7263;
}
button:hover { border-bottom: 2px solid #fa7263; margin-bottom: 0.9em; box-shadow: inset 0 0 10px 0px rgba(0, 0, 0, 0.2);
}
.cost { margin-bottom: 1em;
}
.cost span { padding: 0.5em;
}
.cost span:first-child { float: left;
}
.cost span:nth-child(2) { float: right; vertical-align: baseline;
}
.total { background: #fb887c; color: white; font-weight: bolder; border-radius: 5px;
}
#successMessage, #errorMessage { display: none; text-align: center; margin: 0.5em 0; -webkit-transition: display 0.3s ease; transition: display 0.3s ease;
}
i { vertical-align: baseline; margin-right: 0.5em; border-radius: 50%; width: 0.5em; height: 0.5em; padding: 0.5em; font-size: 0.8em; color: white;
}
i.icon-checkmark { background: green;
}
i.icon-cross { background: red;
}
i.delete { color: #fcaca4; background: transparent; font-size: 1.1em; vertical-align: sub; cursor: pointer;
}
i.delete:hover { color: #fa6454;
}
#successMessage { color: green;
}
#errorMessage { color: red;
}
@media (max-width: 800px) { .box { width: 100%; display: block; }
}
/* Clearfix */
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}

Shopping List - Script Codes JS Codes

var shoppingList = angular.module("root", []);
shoppingList.controller("index", ["$scope", function ($scope){ $scope.itemName; $scope.itemShop; $scope.itemQuantity; $scope.itemPrice; var success = document.getElementById('successMessage'); var error = document.getElementById('errorMessage'); $scope.selection = []; $scope.list = [ {name: 'Milk', shop:'CVS', quantity: 1, price: 2.65, checked: true}, {name: 'Bread', shop:'CVS', quantity: 1, price: 2.15, checked: true}, {name: 'Eggs', shop:'CVS', quantity: 1, price: 1.75, checked: true}, {name: 'Chow Mein', shop:'Trader Joes', quantity: 1, price: 3.10, checked: false}, {name: 'Bacon', shop:'CVS', quantity: 1, price: 2.20, checked: false}, {name: 'Yoghurt', shop:'Trader Joes', quantity: 6, price: 3.10, checked: false}, {name: 'Chocolate', shop:'CVS', quantity: 6, price: 3.10, checked: false} ]; $scope.getTotal = function(){ var total = 0; for(var i = 0; i < $scope.list.length; i++){ total += $scope.list[i].price; } return total; }; $scope.inventory = [ {name: 'Milk', shop:'CVS', quantity: 1, price: 2.65}, {name: 'Bread', shop: 'CVS', quantity: 1, price: 2.15}, {name: 'Eggs', shop: 'CVS', quantity: 1, price: 1.75}, ]; $scope.remove = function(item) { var index = $scope.list.indexOf(item) $scope.list.splice(index, 1); } $scope.removeInventory = function(item) { var index = $scope.inventory.indexOf(item) $scope.inventory.splice(index, 1); } $scope.clearAll = function(list){	var length = list.length; list.splice(0, length); }; $scope.addItem = function() { if($scope.itemName && $scope.itemQuantity && $scope.itemPrice && $scope.itemShop){ $scope.list.push({name: $scope.itemName, shop: $scope.itemShop, quantity: $scope.itemQuantity, price: $scope.itemPrice * $scope.itemQuantity, checked: false}); $scope.itemName = ''; $scope.itemShop = ''; $scope.itemQuantity = ''; $scope.itemPrice = ''; success.style.display = 'block'; var timer = setTimeout(function(){ success.style.display = 'none'; }, 2000); } } $scope.add = function(item){ var item = $scope.list.indexOf(item); $scope.inventory.push($scope.list[item]); $scope.list[item].checked = true; }
}]);
Shopping List - Script Codes
Shopping List - Script Codes
Home Page Home
Developer Mark Murray
Username markmurray
Uploaded August 12, 2022
Rating 4.5
Size 6,015 Kb
Views 26,312
Do you need developer help for Shopping List?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Murray (markmurray) Script Codes
Name
Really Simple Slider
Simple Fade Slider
Flat University Timetable
Train Line
Flat Social Icons
HEX to RGB converter
Various Share Button Styles
Pull Flickr images using the Flickr API
Some HR Styles
Blog Posts Sidebar
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!