JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="accumulator" ng-controller="WagerController" class="mpu">
<form id="accum">
<!-- <section>
<h2>{{teams[0]}}<span> vs </span>{{teams[1]}}</h2>
</section> -->
<section>
<p>a £10 bet on</p>
</section>
<section>
<h2>{{teams[0]}}</h2>
</section>
<section>
<p>to beat</p>
</section>
<section>
<h2>{{teams[1]}}</h2>
</section>
<section>
<table>
<tr>
<td>
<select ng-model="score" ng-options="score.priceDec as score.name for score in scores"></select>
</td>
<td>returns: <p class="return">£ {{returns}}</p></td>
</tr>
</table>
</section>
<section>
<input type="button" value="bet now" />
</section>
</form>
</div>
CSS
@font-face {
font-family: 'Reem';
src: url("//dovv8wpvuv60f.cloudfront.net/fonts/reem/itv_reem_web-regular.eot");
src: url("//dovv8wpvuv60f.cloudfront.net/fonts/reem/itv_reem_web-regular.eot?#iefix") format("embedded-opentype"), url("//dovv8wpvuv60f.cloudfront.net/fonts/reem/itv_reem_web-regular.woff") format("woff"), url("//dovv8wpvuv60f.cloudfront.net/fonts/reem/itv_reem_web-regular.ttf") format("truetype"), url("//dovv8wpvuv60f.cloudfront.net/fonts/reem/itv_reem_web-regular.svg#itv_reemregular") format("svg");
font-weight: 400;
font-style: normal;
}
body {
font-family: 'Reem';
color: white;
}
.mpu {
width: 300px;
height: 250px;
border: solid 1px #ddd;
background-color: red;
}
#accum {
padding:10px;
text-align:center;
vertical-align: top;
}
#accum table {
margin:auto;
width: 80%;
}
#accum table td {
width: 50%;
}
#accum p,
#accum select,
#accum input {
padding: 5px;
margin: 0;
margin-bottom: 0px;
display: inline-block;
}
#accum p {
text-transform: uppercase;
font-weight: bold;
}
#accum section {
display:block;
margin-bottom: 2px;
}
#accum select.wide {
width: 200px;
}
#accum p.return {
font-size: 1.2em;
font-weight: bold;
}
#accum input[type="button"] {
padding: 10px 15px;
margin-top: 7px;
width: 100%;
border: solid 1px red;
background-color: green;
color: white;
}
#accum h2 {
margin: 0;
padding: 0;
font-size: 1.8em;
margin: 4px 0px;
}
#accum h2 span {
font-weight: normal;
}
JavaScript
var app = angular.module( 'accumulator', [] );
app.controller( 'WagerController', function( $scope, DataService ) {
$scope.players = DataService.players;
$scope.scores = DataService.scores.filter( function( score ){
return score.name.match( /liverpool/i );
}).map( function( score ){
score.name = score.name.replace( /\s*liverpool\s*/i, '' );
return score;
});
$scope.stake = 10; // default stake
$scope.markets = [
{
id: 'foo',
name: 'to score first'
}
];
$scope.teams = [ 'Liverpool', 'Southampton' ];
$scope.team = $scope.teams[0];
$scope.player = $scope.players[0].priceDec;
$scope.market = $scope.markets[0].id;
$scope.score = $scope.scores[0].priceDec;
$scope.returns = '';
// update the estimated return from your bet
function update(){
$scope.returns = ( +$scope.stake * +$scope.player * +$scope.score );
}
$scope.$watch( 'stake', update );
$scope.$watch( 'player', update );
$scope.$watch( 'score', update );
});
app.factory( 'DataService', function() {
return {
players: angular.fromJson('[{"name":" Guly do Prado","priceDec":"21.00"},{"name":" Jose Enrique","priceDec":"29.00"},{"name":" Luis Alberto","priceDec":"9.00"},{"name":"Adam Lallana","priceDec":"17.00"},{"name":"Andre Wisdom","priceDec":"34.00"},{"name":"Calum Chambers","priceDec":"41.00"},{"name":"Daniel Agger","priceDec":"21.00"},{"name":"Daniel Fox","priceDec":"67.00"},{"name":"Daniel Sturridge","priceDec":"4.00"},{"name":"Dejan Lovren","priceDec":"81.00"},{"name":"Gaston Ramirez","priceDec":"17.00"},{"name":"Glen Johnson","priceDec":"23.00"},{"name":"Iago Aspas","priceDec":"6.00"},{"name":"Jack Cork","priceDec":"51.00"},{"name":"James Ward-Prowse","priceDec":"26.00"},{"name":"Jay Rodriguez","priceDec":"13.00"},{"name":"Joe Allen","priceDec":"19.00"},{"name":"John Flanagan","priceDec":"41.00"},{"name":"Jordan Henderson","priceDec":"13.00"},{"name":"Jordan...