OutForDay Clock

index.html

<div class="container">
  <div class="column">
    <h1 class="is-size-1">
      <span class="has-text-danger thicc"> Meijer</span> Intern Clockout Calculator
    </h1>
    <div class="columns">
      <!--in for day-->
      <div class="column">
        <label for="inDay">In for day:</label><br/>
        <div class="control has-icons-left has-icons-right">
          <input class="input is-medium" type="time" value="08:00" id="inDay">
          <span class="icon is-left">
    <i class="fas fa-clock"></i>
  </span>
        </div>
      </div>
      <!--out for lunch-->
      <div class="column">
        <label for="outLunch">Out for lunch:</label><br/>
        <div class="control has-icons-left has-icons-right">
          <input class="input is-medium is-danger" type="time" id="outLunch">
          <span class="icon is-left">
    <i class="fas fa-clock"></i>
  </span>
        </div>
      </div>
      <!--in from lunch-->
      <div class="column">
        <label for="inLunch">In from lunch:</label><br/>
        <div class="control has-icons-left has-icons-right">
          <input class="input is-medium is-danger" type="time" id="inLunch">
          <span class="icon is-left">
    <i class="fas fa-clock"></i>
  </span>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <label for="hoursNeeded">Hours needed for day:</label><br/>
        <div class="control has-icons-left has-icons-right">
          <input class="input is-medium" type="text" id="hoursNeeded" value="8">
          <span class="icon is-left">
      <i class="fas fa-clock"></i>
    </span>
        </div>
      </div>

      <div class="column">
        <label for="minutesNeeded">Minutes needed for day:</label><br/>
        <div class="control has-icons-left has-icons-right">
          <input class="input is-medium" type="text" id="minutesNeeded" value="0">
          <span class="icon is-left">
      <i class="fas fa-clock"></i>
    </span>
        </div>
      </div>
    </div>

    <div class="column">
      <h2 class="is-size-2 has-text-centered">Clock out time: <span id="clockOutTime" class="thicc"> 04:00 PM</span></h2>

      <p id="alert" class=" has-text-centered is-size-6">
        This application is intended for personal use only- it is not associated with Meijer, and it has not been tested for quality- it's simply a resource I built that I thought I'd share. Please do not depend on it, and please feel free to fork it on codepen
        and add to it. I hope it's helpful!
      </p>
      <br/><br/>
      <div class="columns">
      <div class="column has-text-centered">
        <p class="thicc ">
          If you feel like adding to it some things that need to be done are:

        </p>
        <ul>
          <li>&bull;Time differentiation checks </li>
          <li></li>
          <li>
            &bull; Better form validation
          </li>
          <li>&bull; Input sanitation (setting min/max properties on input elements)</li>
          <li>&bull; Logic checks for removal of lunch punches</li>
        </ul>
      </div>
        <div class="column"><strong>Github Gist:</strong> <a href="https://gist.github.com/henryamster/dfbf187d6c5020d135f38df52b135137">https://gist.github.com/henryamster/dfbf187d6c5020d135f38df52b135137</a></div>
      </div>
      <div class="footer">
        <div class="columns">
          <div class="column">
            <h3 class="thicc">Henry Fritz </h3>
            <a href="https://henryfritz.xyz/">henryfritz.xyz</a>
          </div>

          <div class="column">
            <p>
              If you've got suggestions feel free to shoot me an email at <a href="mailto:henry.fritz@meijer.com">Henry.Fritz@meijer.com</a> or <a href="mailto:henryamsterfritz@gmail.com">henryamsterfritz@gmail.com</a>
            </p>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>

outforday-clock.markdown

OutForDay Clock

A clock I built in order to figure out when I need to clock out to avoid overtime!

A Pen by Henry Fritz on CodePen.

License.

script.js

let inDay = document.getElementById("inDay");
let outLunch = document.getElementById("outLunch");
let inLunch = document.getElementById("inLunch");
let reqHours = document.getElementById("hoursNeeded");
let reqMinutes = document.getElementById("minutesNeeded");
let outTime = document.getElementById("clockOutTime");
let ale = document.getElementById("alert");

inDay.addEventListener("change", function() {
  updateTime();
});

reqHours.addEventListener("change", function() {
  updateTime();
});

reqMinutes.addEventListener("change", function() {
  updateTime();
});

inLunch.addEventListener("change", function() {
  updateTime();
});

outLunch.addEventListener("change", function() {
  updateTime();
});

function updateTime() {
  outTime.value = "";
  let pM = false;
  let lunchDiffH = 0;
  let lunchDiffM = 0;

  if (inLunch.value != "" && outLunch != "") {
    let outLunchH = parseInt(outLunch.value.substr(0, 2));
    let outLunchM = parseInt(outLunch.value.substr(3, 4));
    toggleDanger(outLunch);

    let inLunchH = parseInt(inLunch.value.substr(0, 2));
    let inLunchM = parseInt(inLunch.value.substr(3, 4));
    toggleDanger(inLunch);

    //lunchDiffH = (inLunchM > outLunchM) ?Math.abs(inLunchH - outLunchH)  : Math.abs(inLunchH - outLunchH)  ;
    lunchDiffH = (inLunchM>= outLunchM) ? inLunchH - outLunchH: inLunchH-outLunchH -1;
    lunchDiffM = (inLunchM>= outLunchM) ? inLunchM - outLunchM : 60 - (outLunchM- inLunchM % 60); 
    
    //lunchDiffM = (inLunchM > outLunchM) ?  Math.abs(outLunchM - inLunchM) : Math.abs(inLunchM - outLunchM)  ;
  }

  let outTimeH =
    parseInt(inDay.value.substr(0, 2)) + parseInt(reqHours.value) + lunchDiffH;
  let outTimeM =
    parseInt(inDay.value.substr(3, 4)) +
    parseInt(reqMinutes.value) +
    lunchDiffM;

  if (outTimeH > 12) {
    pM = true;
    outTimeH = outTimeH % 12;
  }

  if (outTimeM > 59) {
    outTimeH += parseInt(outTimeM / 60);
    outTimeM = outTimeM % 60;
  }

  let ampm = pM ? "PM" : "AM";
  outTime.innerHTML =
    checkForPad(outTimeH) + ":" + checkForPad(outTimeM) + " " + ampm;
}

function checkForPad(val) {
  if (parseInt(val) < 10) {
    val = "0" + val.toString();
    return val;
  } else {
    val = val.toString();
    return val;
  }
}

function toggleDanger(e) {
  if (e.classList.contains("is-danger")) {
    e.classList.remove("is-danger");
  }
}

style.css

* {
  font-family: "Libre Franklin", sans-serif;
}

label {
  font-weight: 800;
}

.thicc {
  font-weight: 800;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet" />