srhyne/three-things-today.html

## three-things-today.html
<!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>
	<!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>