JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<link rel="stylesheet" href="//code.ionicframework.com/nightly/css/ionic.css">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<ion-view ng-app = "demoApp" view-title="Wedding Pax Num" can-swipe-back="true" ng-controller="WeddingPaxCtrl">
  <ion-content>
    <div class="card">
      <div class="item centerText" style="background-color: brown;">
        <h2>CALCULATE WEDDING</h2>
      </div>
    </div>
    <div class="padding20Top padding20Bottom">
      <h2 class="centerText">Select number of Passengers</h2>
      <input ng-model="passengerNo" class="col col-50 col-offset-25 quoteTFieldWithListItems" type="textfield">
      <h6 class="centerText">PASSENGERS</h6>
    </div>

    <ion-toggle ng-model="returnJourney.checked" ng-change="returnJourneyChange()">Return Journey
    </ion-toggle>

    <ion-toggle ng-show="returnJourney.checked" ng-model="midnightReturn.checked" ng-change="midnightReturn()">Return Journey After Midnight</ion-toggle>

    <div>
      <h6 class="logText centerText"> {{ getCostBreakDown() }}</h6>
    </div>

 </ion-content>
 <div class="endOfPageButton">
   <!---<a href="#/app/home/tester">-->
    <button class="button button-full button-clear" ng-click="sendWeddingQuoteInfo()">Submit Quote</button>
   <!--</a>-->
 </div>
</ion-view>

JavaScript

var app = angular.module('demoApp', ['ionic']);

app.controller('WeddingPaxCtrl', function($scope, $stateParams){//, WeddingData, DataThrow) {
  //var item = WeddingData.getWeddingDataObject(); 

  $scope.passengerNo = 49;
  $scope.returnJourney = { checked: false };
  $scope.midnightReturn = { checked: false };
  var weddingPrice;
  $scope.returnJourney;
  $scope.midnightReturn;
  setup();
  var sendInfo;

  function setup() {
    console.log("setup called");
    weddingPrice = 100;//CostOfMarriage.getPrice(item[0], $scope.passengerNo,  $scope.returnJourney.checked, $scope.midnightReturn.checked);
  }


  $scope.returnJourneyChange = function() {
    console.log("return j called");
    weddingPrice = 1000;
    console.log("wedding price is now" + weddingPrice);

  }
  $scope.midnightReturn = function() {

  }
  $scope.getCostBreakDown = function() {

  }

  $scope.sendWeddingQuoteInfo = function() {
    // var weddingPrice = $scope.weddingPrice;
    console.log("WeddingPrice is " + weddingPrice + weddingPrice);
    //var sendInfo = ["Wedding Hire", item[0], $scope.passengerNo, "Extra", weddingPrice];
    //StoreQuoteData.setQuoteData(sendInfo);
    //WhichQuote.setInfoLabel("Wedding");
  }   
})