I feel pretty confident when it comes to HTML(5) and CSS(3), but when it comes to JavaScript I’ve always found myself pretty lost. Sure, I can write small snippets, modify a code block hear and there, but I’ve never really drilled any deeper. But a couple of month back I decided it was time to take on the challenge by signing up on Treehouse. I’ve worked myself through two courses so far and I must say that I’m really impressed how professional the content is. Each course have been very easy to follow.
Anyway. After these two courses I felt it was time for a break to see what I could come up with on my own. So I decided to create a to-do list. I know, how original of me …
I kept the scope small.
– It had to be possible to add and remove items from a list.
– Each item should be stored, even when the tab or browser is closed.
– No design requirements other then it should look like a to-do list.
– The code had to pass jshint validation.
Demo:
See the Pen
ToDo-List by Christofer Vilander (@c_vilander)
on CodePen.
Since this isn’t a tutorial I won’t go into detail on how it was created. Feel free to look at the code if you want. But there is one tricky part I want to touch upon in this post. How I solved storing …
Since the to-do list would be more or less useless if the items weren’t stored I had to find a solution for this. My first thought was to use cookies, but after some reading I choose to use local storage instead. Local storage lets you store data, locally, in the browser. Simple and clever, but there are security implications with this approach, which you can read about here. I also might add that my solution isn’t fully optimized and there are surely better ways to do this.
Looking at the importent parts in the code
Before we jump into the code I just want to add what happens when you enter a text into the input field and click add.
1. A list item is created.
2. The value from the input field is stored in an array called ‘listBucket’.
3. The function storage() is executed.
The storage() function is pretty straight forward. When the function executes it stores the array. One thing to point out though is that you can only save strings into local storage which is why I’ve used JSON.stringify. The principle is pretty much the same when you delete an item. The deleted item gets removed from the array and the storage() function is run again.
// Stores the array 'listBucket' in localStorage.
function storage() {
localStorage.setItem('savedItems', JSON.stringify(listBucket));
}
The next part is how I restore the data. If you for example reload the to-do list the function printStorage() is run. This function gets the data and prints out the list items one by one using a for loop.
// Creates a list of what's stored in localStorage.
function printStorage() {
var getData = localStorage.getItem('savedItems');
var items2 = JSON.parse(getData);
for (var i = 0; i < items2.length; i++) {
var li = document.createElement('li');
listBucket.push(items2[i]);
li.appendChild(document.createTextNode(items2[i]));
todoList.appendChild(li);
li.setAttribute('id', 'list' + i);
li.onclick = itemDone;
console.log(listBucket);
}
}
And that’s about it. Like I said, this wasn’t a tutorial and there are better ways to solve this so please don’t use this code in a live environment.
My quest to learn JavaScript continues …