Work hour calculator

index.haml

%pre.title
  \▪──[Work]┐
  \         └[hour]┐
  \ ┌──[calculator]┘
  \ └───────────────────────────▪

%table
  %thead
    %tr
      %th Day
      %th{:class => "input-column"} Starting time
      %th{:class => "input-column"} Ending time
      %th{:class => "input-column"} Break deduction
      %th Total
  %tbody
    - (1..7).each do |i|
      %tr{:class => "day day-#{i}"}
        %td
          - case i
          - when 1
            = "Monday"
          - when 2
            = "Tuesday"
          - when 3
            = "Wednesday"
          - when 4
            = "Thursday"
          - when 5
            = "Friday"
          - when 6
            = "Saturday"
          - when 7
            = "Sunday"
        %td
          - if i > 5
            %input{:class => "start", :value => "0:00"}
          - else
            %input{:class => "start", :value => "9:00"}
        %td
          - if i > 5
            %input{:class => "end", :value => "0:00"}
          - else
            %input{:class => "end", :value => "17:30"}
        %td
          - if i > 5
            %input{:class => "break", :value => "0"}
          - else
            %input{:class => "break", :value => "30"}
        - if i > 5
          %td{:class => "total"} 0:00
        - else
          %td{:class => "total"} 8:00
    %tfoot
      %tr
        %td{:colspan => "4"} Subtotal
        %td{:class => "subtotal"} 40:00

script.js

$("input").bind("keyup", function() {
  var subtotal = 0;
  for (var i = 1; i <= 7; i++) {
    var $day      = $(".day-"+i);
    var start     = moment($day.find(".start").val(), "HH:mm");
    var end       = moment($day.find(".end").val(), "HH:mm");
    var deduction = moment.duration(parseInt($day.find(".break").val(), 10), "minutes");
    var $total    = $day.find(".total");

    var result = end.subtract(deduction).diff(start, 'milliseconds');
    var d = moment.duration(result, 'milliseconds');
    var hours = Math.floor(d.asHours());
    var mins = Math.floor(d.asMinutes()) - hours * 60;
    if (result < 0) {
      $total.text(d.asMinutes()+" min");
    } else {
      $total.text(hours +":"+ ((mins < 10)?"0"+mins:mins));
    }
    subtotal += result;
  }
  var d = moment.duration(subtotal, 'milliseconds');
  var hours = Math.floor(d.asHours());
  var mins = Math.floor(d.asMinutes()) - hours * 60;
  $(".subtotal").text(hours +":"+ ((mins < 10)?"0"+mins:mins));
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>

style.sass

@import compass

$colorBackground: #272822
$colorText: #9F0
$colorTextImportant: cyan
$colorTitle: #EF5939
$colorInputText: #0F0
$colorFrame: #0D0
$colortableHeadText: #003
$colortableHeadBackground: #0D0
$colortableBackground: #003
$colorInputBackground: #003


body
  color: $colorText
  background: $colorBackground
  font-family: monospace
  font-size: 12px

table
  width: 500px
  margin: 0px auto
  padding: 4px
  border: 5px double $colorFrame
  background-color: $colortableBackground

tfoot tr td
  border-top: 1px solid $colorFrame

tfoot
  font-weight: bold

th
  color: $colortableHeadText
  background-color: $colortableHeadBackground
  border-bottom: 1px solid $colorFrame
  padding-bottom: 5px
  &.input-column
    width: 100px

tr.day>td
  font-size: 14px

input
  font-family: monospace
  font-size: 16px
  text-align: right
  width: 100px
  background-color: $colorInputBackground
  color: $colorInputText
  padding: 2px
  border: 1px dotted $colorFrame

input[type="button"]
  text-align: center

.total, .subtotal
  font-size: 16px
  text-align: right
  padding-right: 5px
  color: $colorTextImportant

.title
  color: $colorTitle
  width: 500px
  margin: 0px auto 20px
  font-size: 30px
  

work-hour-calculator.markdown

Work hour calculator

A Pen by MD. Joni Miah on CodePen.

License.