Programming Demo

Demo

by phrontisteries

HTML

<div id="container">
  <div id="days-due" class="float-left margin-bottom">
    <p class="float-left margin-right">
      Indicator will turn yellow if within # days from due date
    </p>
    <input id="days" type="number" name="days" min="1" max="30" class="float-left padding-left padding-right">
    <p class="float-left padding-left">
      Enter a value from 1-30 only
    </p>
  </div>
  <div id="display-container">
    <div class="float-left margin-right">
      KPI
      <br>
      <div id="kpi">

      </div>

    </div>

    <div class="float-left">
      Due Date
      <br>
      <input id="date" type="date" name="dueDate">

    </div>

    <div class="float-left margin-left">
      Status
      <br>
      <p id="status-message">
        When is it due?
      </p>
    </div>

  </div>

  <input id="submit" type="submit">


</div>

CSS

#days-due,
#display-container {
  display: table;
  width: 100%;
  /*Optional*/
  table-layout: fixed;
  /*Optional*/
  border-spacing: 10px;
  /*Optional*/
  border: solid black 2px
}

.float-left {
  float: left;
}

.padding-left {
  padding-left: 3%;
}

.margin-right {
  margin-right: 3%
}

.margin-left {
  margin-left: 3%
}

.margin-bottom {
  margin-bottom: 5%
}

.dot {
  height: 25px;
  width: 25px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

.arrow-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid yellow;
}

.square {
  width: 25px;
  height: 25px;
  margin: 5px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  overflow: hidden;
  background-color: red;
}

JavaScript

// find elements
//var submit = $("#submit")
var submit = document.getElementById("submit")

// handle click and add class
// submit.on("click", function(){
//  CheckKpi()
//})
submit.onclick = CheckKpi;

function CheckKpi() {

  //var days = $("#days").val();
  var days = document.getElementById("days").value;
  days = parseInt(days, 10);
  //var date = $("#date").val();
  var date = document.getElementById("date").value
  var array = date.split("-");
  var dateObj = new Date(array[0], array[1] - 1, array[2]); //-1 because months are 0-11
  var today = new Date();
  var diff = dateDiff(today, dateObj);



  //$("#kpi").removeClass();
  var kpiElement = document.getElementById("kpi");
  kpi.className = "";
  var statusElement = document.getElementById("status-message");
  if (diff > days) {
    var greenmsg = "Your task is due in " + diff + " days";
    //$("#kpi").addClass("dot");
    kpiElement.classList.add("dot");
    //$("#status-message").html(greenmsg)
    statusElement.innerHTML = greenmsg;
  } else if (diff <= days && diff >= 0) {
    var yellowmsg = "You have " + diff + " dates before due";
    //$("#kpi").addClass("arrow-up");
    kpiElement.classList.add("arrow-up");
    //$("#status-message").html(yellowmsg);
    statusElement.innerHTML = yellowmsg;
  } else if (diff < 0) {
    var redmsg = "You are " + Math.abs(diff) + " days late";
    //$("#kpi").addClass("square");
    kpiElement.classList.add("square");
    //$("#status-message").html(redmsg);
    statusElement.innerHTML = redmsg;
  }

}

function dateDiff(date1, date2) {
  var one_day = 1000 * 60 * 60 * 24; // Convert both dates to milliseconds
  var date1_ms = date1.getTime();
  var date2_ms = date2.getTime(); // Calculate the difference in milliseconds  
  var difference_ms = date2_ms - date1_ms; // Convert back to days and return
  var difference_day = difference_ms / one_day;
  return Math.round(difference_ms / one_day);
}