JSFiddle - React, Tailwind, and code Playground

by shaneburgess

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div class="row">
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <label>Start Hour</label>
  </div>
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <label>Start Minute</label>
  </div>
</div>
<div class="row">
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <input id="start-hour" class="form-control" type="text">
  </div>
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <input id="start-min" class="form-control" type="text">
  </div>
</div>
<hr>
<div class="row">
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <label>End Hour</label>
  </div>
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <label>End Minute</label>
  </div>
</div>
<div class="row">
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <input id="end-hour" class="form-control" type="text">
  </div>
  <div class="col col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <input id="end-min" class="form-control" type="text">
  </div>
</div>
<br>
<br>
<span class="pull-right">
  <button class="btn btn-primary" id="calculate">Calculate</button>
</span>
<div class="text-center">
  <h1 id="result"></h1>
</div>

JavaScript

$(document).ready(function() {
  $("#calculate").click(function() {
    var start_hour = parseInt($("#start-hour").val());
    var start_min = parseInt($("#start-min").val());
    var end_hour = parseInt($("#end-hour").val());
    var end_min = parseInt($("#end-min").val());
    var startTime = moment(start_hour + ":" + start_min, "HH:mm");
    var endTime = moment(end_hour + ":" + end_min, "HH:mm");
    var duration = moment.duration(endTime.diff(startTime));
    var hours = parseInt(duration.asHours());
    var minutes = parseInt(duration.asMinutes());
    var billed = minutes - 30;
    $("#result").html(billed+" ("+minutes+")");
  });

});