JSFiddle - React, Tailwind, and code Playground

by Laura Kishimoto

HTML

<h1>
  Flex-o-matic
</h1>

<div class="section">
  <label for="start">
    What time did you start?
  </label>
  <input type="time" id="start" min="07:00" max="10:00" value="09:00" step="300" data-start>
</div>

<div class="section">
  <label for="lunch">
    How long was your lunch? (in minutes)
  </label>
  <input type="number" id="lunch" min="30" max="120" value="60" step="5" data-lunch>
</div>

<div class="section">
  You can go home at:
  <div class="result" data-home>
  </div>
</div>

SCSS

body {
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
}

*, :after, :before {
  box-sizing: inherit;
}

.section {
  margin: 2rem auto;
  padding-top: 2rem;
  max-width: 350px;
  border-top: 1px solid #ccc;
}

label {
  display: block;
}

input,
.result {
  width: 230px;
  margin: 1rem auto 0;
  font-size: 200%;
  text-align: center;
  font-family: monospace;
}

.result {
  color: #008080;
  font-size: 300%;
}

JavaScript

const settings = {
	requiredHours: 7.5 * 60, // 7.5 hours
	start: '[data-start]',
	lunch: '[data-lunch]',
	home: '[data-home]'
}
let homeTime = '';

const init = () => {
	updateValue();
  $(settings.start + ', ' + settings.lunch).on('input', updateValue);
}

const updateValue = () => {
	const duration = settings.requiredHours + parseInt($(settings.lunch)[0].value);
  homeTime = new Date($(settings.start)[0].valueAsDate.getTime() + duration*60000)
	$(settings.home).text(formatTime(homeTime));
}

const formatTime = (time) => {
	return [
  	time.getHours(),
    time.getMinutes() < 9 ? '0' + time.getMinutes() : time.getMinutes()
  ].join(':');
}

init();