Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Owner Author

tonyedwardspz commented Jul 25, 2019

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
You can’t perform that action at this time.