Club Utilities

Club Utilities.markdown

Club Utilities

Club utilities with pars for credit

A Pen by Leung Enterprises on CodePen.

License.

index.html

.jumbotron#content
  .container#main
    h1 Club Utilities
    p We are about #[span#percent 0]% through the year.
    br
    .row
      .col-sm-4
        .panel.panel-default
          .panel-heading
            h2.panel-title Key Club
          .panel-body.
            You should have about #[span.red#hours 0 hours].  You need #[span.red 40 hours] in total.
            #[br]
            #[br]
            #[a.btn.btn-info(href='https://docs.google.com/spreadsheets/d/1Bw7UnViij9Fb9j6SIlPc0pvCSXdchDVZoFCSwhOCTOE/edit' target='_blank') View Credit Sheet  #[i.fa.fa-share]]
      .col-sm-4
        .panel.panel-default
          .panel-heading
            h2.panel-title Science Club
          .panel-body.
            You should have gone to #[span.red#meetings 0 meetings].  You need to attend #[span.red 4 meetings] in total.
            #[br]
            #[br]
            #[a.btn.btn-info(href='https://docs.google.com/spreadsheets/d/1s9pbozhOKf0vJgYjEkTy4_U872TtxtmEehcS0dkaDtE/edit?usp=sharing' target='_blank') View Credit Sheet  #[i.fa.fa-share]]
      .col-sm-4
        .panel.panel-default
          .panel-heading
            h2.panel-title Trojan Times
          .panel-body.
            You should have submitted #[span.red#articles 0 articles].  You need to submit #[span.red 5 articles] in total.  Please note that you need 2 articles in by December!
            #[br]
            #[br]
            #[a.btn.btn-info.disabled Unavailable  #[i.fa.fa-share]]
    .row
  .container#footer
    .row
      .col-xs-12.text-right
        p.help-block.small If you liked this, try #[a(href='http://finalgradecalculator.co' target="_blank") Final Grade Calculator]!

script.js

$(document).ready(() => {
  let now = moment();
  const FIRST_DAY = moment([2015,7,31]);
  const LAST_DAY = moment([2016,5,1]); // last day for clubs
  
  let total = LAST_DAY.diff(FIRST_DAY);
  let elapsed = now.diff(FIRST_DAY);
  let percent = elapsed / total;
  
  let roundedPercent = Math.round((percent * 100) * 4) / 4;
  $('#percent').html(roundedPercent);
  
  // Key Club
  let parHours = percent * 40;
  let roundedHours = Math.round(parHours * 4) / 4;
  let hoursNoun = pluralize('hour', roundedHours);
  $('#hours').html(roundedHours + " " + hoursNoun);
  
  // Science Club
  let meetings = Math.floor(percent * 4);
  let meetingsNoun = pluralize('meeting', meetings);
  $('#meetings').html(meetings + " " + meetingsNoun);
  
  // TTimes
  let articles = Math.floor(percent * 5);
  let articlesNoun = pluralize('article', articles);
  $('#articles').html(articles + " " + articlesNoun);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdn.rawgit.com/blakeembrey/pluralize/55808fe24dc055f50cd9d0c6f09f59e71a0cb49e/pluralize.js"></script>

style.css

html, body
  height 100%
  
body
  font-family 'Lato'
  
#content
  display flex
  flex-direction column
  min-height 100%
  margin-bottom 0
  padding-bottom 15px
  
#main
  flex 1

.red
  color red !important
  
.btn, .panel
  border-radius 0px

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />