Skip to content

Instantly share code, notes, and snippets.

@tonyedwardspz
Created January 29, 2015 17:33
Show Gist options
  • Save tonyedwardspz/879d5ecff0efd466e79f to your computer and use it in GitHub Desktop.
Save tonyedwardspz/879d5ecff0efd466e79f to your computer and use it in GitHub Desktop.
Offline ToDo list web app tutorial - Part 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Offline todo app</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel='stylesheet' href="style.css" type='text/css' media='all' />
</head>
<body>
<header>
<h1>ToDo</h1>
</header>
<main>
<p>Add things to do below</p>
<form>
<label for="inputItem" id="inputLabel"></label>
<input id="inputItem">
<button id="addItem">Submit</button>
</form>
<ul id="theList"></ul>
</main>
<script src="script.js"></script>
</body>
</html>
// get the app items
var theList = document.getElementById('theList'),
form = document.querySelector('form'),
input = form.querySelector('input'),
cache = {};
// on submit
form.addEventListener('submit', function(ev){
"use strict";
ev.preventDefault();
// add item to the list
var value = input.value;
if (!cache[value] && !(value == "")) {
// cache the users input
cache[value] = true;
theList.innerHTML += '<li>' + value + '</li>';
//store using localstorage
localStorage.myToDo = theList.innerHTML;
}
});
theList.addEventListener('click', function(ev){
"use strict";
var t = ev.target;
if (!t.classList.contains('done')) {
t.classList.add('done');
} else {
t.parentNode.removeChild(t);
}
localStorage.myToDo = theList.innerHTML;
});
//load local storage on first load
if (localStorage.myToDo !== undefined) {
theList.innerHTML = localStorage.myToDo;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1, main, footer{
margin: 0 10px;
}
html,
button{
font-family:'Verdana',Arial,sans-serif;
font-size:16px;
}
header{
height: 38px;
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
}
p{
padding: 10px 0;
}
ul{
margin: 20px 0;
list-style: none;
}
li{
padding: 5px;
margin: 3px 0;
border-bottom: 2px solid #7cceee;
}
li.done{
background: #eee;
transition: 0.3s ease-in;
border-right: 30px solid #7cceee;
}
li.done:after{
content: "\2713";
float:right;
margin-right: -25px;
}
input{
padding:6px;
width: 100%;
border-radius: 5px;
margin-bottom: 10px;
font-size: 16px;
}
button{
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
border-bottom-color:#333;
border:1px solid #61c4ea;
background-color:#7cceee;
border-radius:5px;
color:#333;
text-shadow:#b2e2f5 0 1px 0;
padding:5px 15px;
transition: 0.3s ease-in-out;
cursor:pointer;
}
button:hover{
transition: 0.7s ease-in-out;
background-color:#7cce00;
}
@alsavov
Copy link

alsavov commented Jul 25, 2019

Thanks for the code! Just one question. Where is the footer? You added a CSS rule for it!

@tonyedwardspz
Copy link
Author

Good spot. I think i had a footer in an earlier version of the code, but forgot to remove the css ref

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment