The Nest
Explore
0
Single Page Application implementation of David Seah's wonderful productivity tool the Emergent Task Timer. 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Emergent Task Timer</title>
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="stylesheet" href="css/ett.layout.css">
	<link rel="stylesheet" href="css/ett.styles.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/css/datepicker.min.css">

</head>
<!-- https://developer.okta.com/blog/2019/12/18/vanilla-javascript-components -->
<body id="ett">

	<header id="ett-header">
		<div id="ett-title">Emergent Task Timer</div>
		<div id="ett-date-container">
			<input id="ett-date" value="YYYY-MM-DD" />
		</div>
	</header>

	<main id="ett-tasks"></main>

	<template id="ett-task-template">
		<div class="ett-task" role="ett-task" data-date="" data-time="0" data-name=""
			><div class="ett-task-index"><br /></div
			><div class="ett-task-name"><input name="ett-task-name" /></div
			><div class="ett-task-time"
					unselectable="on"
					onselectstart="javascript: return false;"
					ondrag="javascript: return false;"
					onmousedown="javascript: return false;"
			></div
			><div class="ett-task-total">0</div
		></div>
	</template>
	<template id="bubble-hour-break-template">
		<div class="bubble-hour-break"><br /></div>
	</template>
	<template id="bubble-hour-template">
		<div class="bubble-hour" role="bubble-hour" data-time="0"></div>
	</template>
	<template id="bubble-15m-template">
		<div class="bubble-15m" role="bubble-15m" data-time="0"
			><div class="bubble-5m" data-value="15"><br /></div
			><div class="bubble-5m" data-value="10"><br /></div
			><div class="bubble-5m" data-value="5"><br /></div
		></div>
	</template>

	<script type="module" src="js/ett.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/dist/js/datepicker.min.js"></script>
</body>
</html>