Pizza Planet wants to create an AngularJS app for their restaurant’s menu. Here’s what it looks like. The menu displays the restaurant’s appetizers, mains, and extras.
-
-
Save Dyrits/9f32ebed16e72e743cc3a3042d99808b to your computer and use it in GitHub Desktop.
Pizza Planet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const app = angular.module("PizzaPlanetApp", []); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link | |
| href="https://content.codecademy.com/projects/bootstrap.min.css" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic|Oswald" | |
| rel="stylesheet" | |
| type="text/css" | |
| /> | |
| <link href="css/main.css" rel="stylesheet" /> | |
| <script src="js/vendor/angular.min.js"></script> | |
| </head> | |
| <body ng-app="PizzaPlanetApp"> | |
| <div class="header"> | |
| <h1><span>Pizza</span><span>Planet</span></h1> | |
| </div> | |
| <div class="main" ng-controller="MainController"> | |
| <div class="container"> | |
| <h1>Specials for {{ today | date }}</h1> | |
| <h2>Appetizers</h2> | |
| <div class="appetizers row" ng-repeat="appetizer in appetizers"> | |
| <div class="item col-md-9"> | |
| <h3 class="name">{{ appetizer.name }}</h3> | |
| <p class="description">{{ appetizer.description }}</p> | |
| </div> | |
| <div class="price col-md-3"> | |
| <p class="price">{{ appetizer.price | currency }}</p> | |
| </div> | |
| </div> | |
| <h2>Mains</h2> | |
| <div class="mains row" ng-repeat="main in mains"> | |
| <div class="item col-md-9"> | |
| <h3 class="name">{{ main.name }}</h3> | |
| <p class="description">{{ main.description }}</p> | |
| </div> | |
| <div class="price col-md-3"> | |
| <p class="price">{{ main.price | currency }}</p> | |
| </div> | |
| </div> | |
| <h2>Extras</h2> | |
| <div class="extras row" ng-repeat="extra in extras"> | |
| <div class="item col-md-9"> | |
| <h3 class="name">{{ extra.name }}</h3> | |
| <p class="description">{{ extra.description }}</p> | |
| </div> | |
| <div class="price col-md-3"> | |
| <p class="price">{{ extra.price | currency }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer"></div> | |
| <!-- Modules --> | |
| <script src="js/app.js"></script> | |
| <!-- Controllers --> | |
| <script src="js/controllers/MainController.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| app.controller("MainController", [ | |
| "$scope", | |
| function ($scope) { | |
| $scope.today = new Date(); | |
| $scope.appetizers = [ | |
| { | |
| name: "Caprese", | |
| description: "Mozzarella, tomatoes, basil, balsmaic glaze.", | |
| price: 4.95, | |
| }, | |
| { | |
| name: "Mozzarella Sticks", | |
| description: "Served with marinara sauce.", | |
| price: 3.95, | |
| }, | |
| { | |
| name: "Bruschetta", | |
| description: "Grilled bread garlic, tomatoes, olive oil", | |
| price: 4.95, | |
| }, | |
| ]; | |
| $scope.mains = [ | |
| { | |
| name: "Margherita Pizza", | |
| description: "Fresh mozzarella, basil, tomatoes, olive oil.", | |
| price: 12.95, | |
| }, | |
| { | |
| name: "Chicken Parmesan", | |
| description: | |
| "Breaded chicken with marinara sauce and melted mozzarella.", | |
| price: 14.95, | |
| }, | |
| { | |
| name: "Pesto Pasta", | |
| description: | |
| "Pasta with pesto sauce, cherry tomatoes, and parmesan cheese.", | |
| price: 11.95, | |
| }, | |
| ]; | |
| $scope.extras = [ | |
| { | |
| name: "Garlic Bread", | |
| description: "Toasted bread topped with garlic and herbs.", | |
| price: 3.5, | |
| }, | |
| { | |
| name: "Caesar Salad", | |
| description: | |
| "Romaine lettuce, croutons, parmesan cheese, and caesar dressing.", | |
| price: 5.5, | |
| }, | |
| { | |
| name: "Sweet Potato Fries", | |
| description: "Crispy fries made with sweet potatoes.", | |
| price: 4.5, | |
| }, | |
| ]; | |
| }, | |
| ]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment