Build Time Duration Calculator By Hours and Minutes in Javascript and Bootstrap UI CSS Framework Full Project For Beginners

Build Time Duration Calculator By Hours and Minutes in Javascript and Bootstrap UI CSS Framework Full Project For Beginners

 

Welcome folks today in this blog post we will be building a time duration calculator by hours and minutes in javascript and bootstrap ui css framework. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Orbitron|Montserrat">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
html,
body {
  background-image: url('http://www.roflcopterdown.com/imgs/background/ep_naturalblack.png');
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  width: 100%;
  height: 100%;
}
h2 {
  font-family: 'Orbitron', sans-serif;
}

.input {
  margin: 0 auto;
  width: 50%;
  text-align:center;
}

.option {
  margin: 0 auto;
  width: 70px;
  display: initial
}

.load-time {
  margin: 0 auto;
  text-align: center;
}

.social {
  margin: 0 auto;
}

.btn {
  padding: 1%;
  margin: 1%;
  color: #000;
  background-color: #fff
}
</style>
<div class="container-fluid">
  <div class="time row">
    <div class="load-time">
      <h3>The time is set to:</h3>
      <h2 name="now"></h2>
      <h2 name="test"></h2>
      <br/> In
      <br/>
      <input type="text" class="form-control input" name="hours">
      hours.
      <br/> 
      And
      <br/>
      <input type="text" class="form-control input" name="minutes">
      minutes.
      <br/> 
      it will be:
      <br/>
      <input type="text" class="form-control input" name="then">
      <button class="total btn">Calculate Time</button>
      <button class="update btn">Update Time</button>
      <br/> 
      Set specific Time:
      <br/>
      <select class="form-control option" name="opt-hours">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>:
      <select class="form-control option" name="opt-minutes">
        <option value="00">00</option>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
        <option value="06">06</option>
        <option value="07">07</option>
        <option value="08">08</option>
        <option value="09">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
        <option value="32">32</option>
        <option value="33">33</option>
        <option value="34">34</option>
        <option value="35">35</option>
        <option value="36">36</option>
        <option value="37">37</option>
        <option value="38">38</option>
        <option value="39">39</option>
        <option value="40">40</option>
        <option value="41">41</option>
        <option value="42">42</option>
        <option value="43">43</option>
        <option value="44">44</option>
        <option value="45">45</option>
        <option value="46">46</option>
        <option value="47">47</option>
        <option value="48">48</option>
        <option value="49">49</option>
        <option value="50">50</option>
        <option value="51">51</option>
        <option value="52">52</option>
        <option value="53">53</option>
        <option value="54">54</option>
        <option value="55">55</option>
        <option value="56">56</option>
        <option value="57">57</option>
        <option value="58">58</option>
        <option value="59">59</option>
      </select>
      <br/>
      <button class="select btn">Select Time</button>
    </div>
    
    <!-- Social Media -->
    <!-- Social media buttons. -->
<div class='row social'>
  <div class='col-md-4 col-sm-4  col-xs-4 social-btn'>
    <a href="mailto:jcobting@email.com" target='_blank'>
      <button class='btn btn-block'><i class="fa fa-envelope"></i> E-mail
      </button>
    </a>
  </div>
  <div class='col-md-4 col-sm-4  col-xs-4 social-btn'>
    <a href="https://twitter.com/jacobting" target="_blank">
      <button class='btn btn-block'><i class="fa fa-twitter"></i> Twitter
      </button>
    </a>
    </a>
  </div>

  <div class='col-md-4 col-sm-4  col-xs-4 social-btn'>
    <a href="https://www.linkedin.com/in/jacobting" target="_blank">
      <button class='btn btn-block'><i class="fa fa-linkedin"></i> LinkedIn
      </button>
    </a>
  </div>

  <div class='col-md-4 col-sm-4  col-xs-4 social-btn'>
    <a href="https://github.com/jacobgithub" target="_blank">
      <button class='btn btn-block'><i class="fa fa-github"></i> GitHub
      </button>
    </a>
  </div>

  <div class='col-md-4 col-sm-4  col-xs-4 social-btn'>
    <a href="https://www.facebook.com/jacobcting" target="_blank">
      <button class='btn btn-block'><i class="fa fa-facebook"></i> Facebook
      </button>
    </a>
  </div>

  <div class='col-md-4 col-sm-4 col-xs-4 social-btn'>
    <a href="https://www.freecodecamp.com/jacobgithub" target="_blank">
      <button class='btn btn-block'><i class="fa fa-fire"></i> Free Code Camp
      </button>
    </a>
  </div>
</div>
    
    
    <!-- Footer -->
  </div>
   <div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
    <div class="container">
      <div class="navbar-text pull-left">
        Created by Jacob C. Ting using <a href="https://codepen.io" target="_blank">CodePen.io</a> check out my other work
        <a
        href="https://jacobgithub.github.io/portfolio" target="_blank">here</a>.
      </div>
    </div>
  </div>
</div>
<!-- /.container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 

READ  Build a Youtube Video Info App in Node.js and Express Using Youtube Data API V3 and Yt Scraper in JS

 

And now make a script.js file and copy paste the following code

 

script.js

 

function totalMinutes() {
  $('.minutes .total').click(function() {
    var hours = $('.minutes input[name="hours"]').val();
    var minutes = $('.minutes input[name="minutes"]').val();
    var total = (parseFloat(hours) * 60) + parseFloat(minutes)
    $('.minutes input[name="total"]').val(total);
  });
}

function totalHours() {
  $('.hours .total').click(function() {
    var hours = $('.hours input[name="hours"]').val();
    var minutes = $('.hours input[name="minutes"]').val();
    var total = parseFloat(hours) + parseFloat((minutes / 60));
    $('.hours input[name="total"]').val(total);
  });
}

function nowTime() {
  var now = new Date();
  var nowHours = now.getHours();
  if (nowHours == 0) {
    nowHours = 12;
  }
  var nowMinutes = now.getMinutes();
  if (nowMinutes < 10) {
    nowMinutes = "0" + nowMinutes;
  }
  $('.time h2[name="now"]').text(nowHours + ":" + nowMinutes);
}

function selectTime() {
   $('.time .select').click(function() {
    nowHours = $('.time select[name="opt-hours"]').val();
    nowHours = nowHours % 12;
    if (nowHours == 0) {
      nowHours = 12;
    }
    nowMinutes = $('.time select[name="opt-minutes"]').val();
    if (nowMinutes < 10) {
      nowMinutes = $('.time select[name="opt-minutes"]').val().substring(0, 1);
    }
    var selectMinutes = $('.time select[name="opt-minutes"]').val();
    $('.time h2[name="now"]').text(nowHours + ":" + selectMinutes);
  });
}

function totalTime() {
   $('.time .total').click(function() {

    var hours = $('.time input[name="hours"]').val();
    var addHours = parseFloat(hours) + parseFloat(nowHours);
    var minutes = $('.time input[name="minutes"]').val();
    var addMinutes = parseFloat(minutes) + parseFloat(nowMinutes);
    if (hours == '') {
      addHours = nowHours;
    }
    if (minutes == '') {
      addMinutes = nowMinutes;
    }
    if (addMinutes >= 60) {
      var newHours = ((minutes / 60));
      if (newHours > 1) {
        addMinutes = addMinutes % 60 + newHours * (newHours % 1);
        addMinutes = Math.floor(addMinutes);
        addHours = addHours + Math.floor(newHours);
      } else {
        addMinutes = addMinutes % 60 + newHours * (newHours % 1);
        addMinutes = Math.floor(addMinutes);
        addHours = addHours + 1;
      }
    }
    if (addHours > 12) {
      addHours = addHours % 12;
      if (addHours == 0) {
        addHours = 12;
      }
    }
    if (addMinutes < 10) {
      addMinutes = "0" + addMinutes;
    }
    var total = addHours + ":" + addMinutes;
    $('.time input[name="then"]').val(total);
  }); 
}

function timeSinceNow() {

  nowTime();
  selectTime();
  totalTime();
  $('.time .update').click(function() {
    now = new Date();
    nowHours = now.getHours() % 12;
    nowMinutes = now.getMinutes();
    if (nowMinutes < 10) {
      nowMinutes = "0" + nowMinutes;
    }
    $('.time h2[name="now"]').text(nowHours + ":" + nowMinutes);
  });
}

$(document).ready(function() {
  timeSinceNow();
});

 

READ  Koa.js Multer Library Tutorial to Upload Single or Multiple Files Example Using Koa-Multer Module Full Example For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply