index.html

---
layout: default
title: Day 28 - Local Web Storage
javascriptfile: timer
---
	<h1>Local Web Storage</h1>	

	<p>Today I learned how to use <a href="http://diveintohtml5.info/storage.html">local web storage with HTML5</a> and JavaScript's <a href="https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload">beforeunload</a> event to make my timer work even if you close and reopen your web browser!</p>
	<p>A long time ago, I made <a href="https://play.google.com/store/apps/details?id=edu.usc.ekrane.todotimer&hl=en">my own Android app</a> based on the <a href="http://pomodorotechnique.com/">Pomodoro Technique</a> -- the general idea is to do focused work for a chunk of time (usually 25 minutes), followed by a 5 minute break. Now I'm building a simple version of it with JavaScript!</p>		
	<div style="text-align:center;">
		<label for="time"> Set timer for </label>
		<input style="width:5em;" id="time" type="text" value="25" /> <label for="time"> minutes. </label>
		<button id="start">Start Work Timer</button>
		<button id="reset">Reset Work Timer</button><br/>
		<p>Finished pomodoros: <span id="pomodoros">0</span></p>
		<button id="resethistory">Reset History</button>
	</div>
	<p style="text-align:center;font-size:70px;margin:0;">	
	<span id="timer">00:00</span>
	</p>