Created
March 16, 2016 16:01
-
-
Save srhyne/4718f1a9d58fffe4788e to your computer and use it in GitHub Desktop.
An extremely minimal task checklist. The three things you want to accomplish today. Inspired by @ALOProductivity
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Three Things Today!</title> | |
<link href='//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> | |
<style> | |
body{ | |
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif | |
} | |
.container{ | |
zoom : 3; | |
margin: 50px auto; | |
text-align : center; | |
} | |
.row{ | |
margin: 2vh auto; | |
} | |
.footer{ | |
line-height: 1.5; | |
max-width: 600px; | |
margin: 5vh auto 5vh auto; | |
} | |
.footer a{ | |
text-decoration: none; | |
} | |
.task{ | |
background: transparent; | |
outline-width: 0; | |
border:none; | |
border-bottom: 1px solid rgba(0, 0, 0, .3); | |
display: inline-block; | |
width: 80%; | |
} | |
h2{ | |
line-height: 1.2; | |
margin-bottom: 0; | |
} | |
@media(max-width: 800px){ | |
.container{ | |
zoom : 2; | |
} | |
} | |
@media(max-width: 400px){ | |
.container{ | |
zoom : 1; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class='container'> | |
<h2>What 3 things are you going to accomplish today?</h2> | |
<small style="font-size: 8px;color:#777">Intent is at the heart of productivity.</small> | |
<div class="row"> | |
<input type="checkbox" class="done"/> <input class="task" type="text" placeholder="one" /> | |
</div> | |
<div class="row"> | |
<input type="checkbox" class="done"/> <input class="task" type="text" placeholder="two" /> | |
</div> | |
<div class="row"> | |
<input type="checkbox" class="done"/> <input class="task" type="text" placeholder="three" /> | |
</div> | |
</div> | |
<div class="footer"> | |
<p>This little thing is inspired by episode 280 of <a href="http://www.startupsfortherestofus.com/episodes/episode-280-the-productivity-project-with-guest-chris-bailey">Startups for the Rest of Us</a> - "The Productivity Project with Guest Chris Bailey". | |
<h5>Check out Chris' book here..</h5> | |
<a href="http://alifeofproductivity.com/book/"> | |
<img src="http://alifeofproductivity.com/wp-content/themes/ALOP/images/book.png"/> | |
</a> | |
<br/> | |
<small style="float: right">Created by | |
<a href="https://twitter.com/srhyne" target="_blank">@srhyne</a> | |
</small> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script> | |
<script> | |
$(function(){ | |
function setData() { | |
var data = JSON.parse(localStorage.getItem('tasks') || '[]'); | |
var rows = $('.row'); | |
$.each(data, function(i, task){ | |
var row = rows.eq(i); | |
row.find('.done').prop('checked', task.done); | |
row.find('.task').val(task.val); | |
}); | |
} | |
$(':input').change(function(){ | |
if(saveData.ts){ | |
clearTimeout(saveData.ts); | |
} | |
saveData.ts = setTimeout(saveData, 300); | |
}) | |
function saveData() { | |
var data = []; | |
$('.row').each(function(){ | |
var _this = $(this); | |
data.push({ | |
done : _this.find('.done').prop('checked'), | |
val : _this.find('.task').val() | |
}); | |
}); | |
localStorage.setItem('tasks', JSON.stringify(data) ); | |
} | |
setData(); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment