Created
April 18, 2020 06:29
-
-
Save amogh9594/b8f0fc9844b460d123185afcc8114c46 to your computer and use it in GitHub Desktop.
Order Form
This file contains 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
<!-- Declare a new AngularJS app and associate the controller --> | |
<form ng-app ng-controller="OrderFormController"> | |
<h1>Services</h1> | |
<ul> | |
<!-- Loop through the services array, assign a click handler, and set or | |
remove the "active" css class if needed --> | |
<li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}"> | |
<!-- Notice the use of the currency filter, it will format the price --> | |
{{service.name}} <span>{{service.price | currency}}</span> | |
</li> | |
</ul> | |
<div class="total"> | |
<!-- Calculate the total price of all chosen services. Format it as currency. --> | |
Total: <span>{{total() | currency}}</span> | |
</div> | |
</form> |
This file contains 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
function OrderFormController($scope){ | |
// Define the model properties. The view will loop | |
// through the services array and genreate a li | |
// element for every one of its items. | |
$scope.services = [ | |
{ | |
name: 'Web Development', | |
price: 300, | |
active:true | |
},{ | |
name: 'Design', | |
price: 400, | |
active:false | |
},{ | |
name: 'Integration', | |
price: 250, | |
active:false | |
},{ | |
name: 'Training', | |
price: 220, | |
active:false | |
} | |
]; | |
$scope.toggleActive = function(s){ | |
s.active = !s.active; | |
}; | |
// Helper method for calculating the total price | |
$scope.total = function(){ | |
var total = 0; | |
// Use the angular forEach helper method to | |
// loop through the services array: | |
angular.forEach($scope.services, function(s){ | |
if (s.active){ | |
total+= s.price; | |
} | |
}); | |
return total; | |
}; | |
} |
This file contains 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
@import url(https://fonts.googleapis.com/css?family=Cookie); | |
*{ | |
margin:0; | |
padding:0; | |
} | |
body{ | |
font:15px/1.3 'Open Sans', sans-serif; | |
color: #5e5b64; | |
text-align:center; | |
} | |
a, a:visited { | |
outline:none; | |
color:#389dc1; | |
} | |
a:hover{ | |
text-decoration:none; | |
} | |
section, footer, header, aside, nav{ | |
display: block; | |
} | |
/*------------------------- | |
The order form | |
--------------------------*/ | |
form{ | |
background-color: #61a1bc; | |
border-radius: 2px; | |
box-shadow: 0 1px 1px #ccc; | |
width: 400px; | |
padding: 35px 60px; | |
margin: 50px auto; | |
} | |
form h1{ | |
color:#fff; | |
font-size:64px; | |
font-family:'Cookie', cursive; | |
font-weight: normal; | |
line-height:1; | |
text-shadow:0 3px 0 rgba(0,0,0,0.1); | |
} | |
form ul{ | |
list-style:none; | |
color:#fff; | |
font-size:20px; | |
font-weight:bold; | |
text-align: left; | |
margin:20px 0 15px; | |
} | |
form ul li{ | |
padding:20px 30px; | |
background-color:#e35885; | |
margin-bottom:8px; | |
box-shadow:0 1px 1px rgba(0,0,0,0.1); | |
cursor:pointer; | |
} | |
form ul li span{ | |
float:right; | |
} | |
form ul li.active{ | |
background-color:#8ec16d; | |
} | |
div.total{ | |
border-top:1px solid rgba(255,255,255,0.5); | |
padding:15px 30px; | |
font-size:20px; | |
font-weight:bold; | |
text-align: left; | |
color:#fff; | |
} | |
div.total span{ | |
float:right; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment