19h47/Duration.js

## Duration.js
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>

		<div class="js-form-duration">
			<label for="">
				<div>Heure de début</div>
				<input type="time" class="js-form-duration-hour">
			</label>
			<label for="">
				<div>Durée (en heure)</div>
				<input type="number" class="js-form-duration-duration">
			</label>
			<label for="">
				<div>Heure de fin</div>
				<input type="text" class="js-form-duration-result">
			</label>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
		<script>
			/**
			 * duration
			 *
			 * @param object el
			 */
			class Duration {
				constructor(el) {
					console.log(el);

					this.hourEl = el.querySelector('.js-form-duration-hour');
					this.durationEl = el.querySelector('.js-form-duration-duration');
					this.resultEl = el.querySelector('.js-form-duration-result');

					this.initEvents();
				}


				initEvents() {
					this.durationEl.addEventListener('keyup', () => { this.update(); });
					this.hourEl.addEventListener('keyup', () => { this.update(); });

					this.durationEl.addEventListener('mousedown', () => { this.update(); });
					this.hourEl.addEventListener('mousedown', () => { this.update(); });
				}


				update() {
					if (this.hourEl.value === '' || this.durationEl.value === '') {
						return false;
					}

					const startHour = this.hourEl.value;
					const duration = this.durationEl.value;
					const date = moment(startHour, 'hh:mm');

					date.add(duration, 'hours');

					const hours = date.hours() > 9 ? date.hours() : `0${date.hours()}`;
					const minutes = date.minutes() > 9 ? date.minutes() : `0${date.minutes()}`;

					this.resultEl.value = `${hours}:${minutes}`;

					return true;
				}
			}

			new Duration(document.querySelector('.js-form-duration'));


		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	</head>
	<body>

	<div class="js-form-duration">
	<label for="">
	<div>Heure de début</div>
	<input type="time" class="js-form-duration-hour">
	</label>
	<label for="">
	<div>Durée (en heure)</div>
	<input type="number" class="js-form-duration-duration">
	</label>
	<label for="">
	<div>Heure de fin</div>
	<input type="text" class="js-form-duration-result">
	</label>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.js"></script>
	<script>
	/**
	* duration
	*
	* @param object el
	*/
	class Duration {
	constructor(el) {
	console.log(el);

	this.hourEl = el.querySelector('.js-form-duration-hour');
	this.durationEl = el.querySelector('.js-form-duration-duration');
	this.resultEl = el.querySelector('.js-form-duration-result');

	this.initEvents();
	}


	initEvents() {
	this.durationEl.addEventListener('keyup', () => { this.update(); });
	this.hourEl.addEventListener('keyup', () => { this.update(); });

	this.durationEl.addEventListener('mousedown', () => { this.update(); });
	this.hourEl.addEventListener('mousedown', () => { this.update(); });
	}


	update() {
	if (this.hourEl.value === '' \|\| this.durationEl.value === '') {
	return false;
	}

	const startHour = this.hourEl.value;
	const duration = this.durationEl.value;
	const date = moment(startHour, 'hh:mm');

	date.add(duration, 'hours');

	const hours = date.hours() > 9 ? date.hours() : `0${date.hours()}`;
	const minutes = date.minutes() > 9 ? date.minutes() : `0${date.minutes()}`;

	this.resultEl.value = `${hours}:${minutes}`;

	return true;
	}
	}

	new Duration(document.querySelector('.js-form-duration'));


	</script>
	</body>
	</html>