In this tutorial you will learn how you can create your own simple To-Do list using CSS and JQuery. First you will design the To-Do list, this is going to be a simple form where you can quickly add your tasks for the day. Then we will learn how to take this list and turn the items on it into Sticky Notes so you can display this information in a graphical way to help you remember. As this is just a simple form I will not go into the saving of this data to a database or maybe using a cookie to save this data so that you can close the browser and still have your list. Hopefully this will start you on track to creating your own To-Do list application. If you want me to show you how you can go about storing this data in a database then let me know and I will write and second part to this tutorial.
Web App To-Do List
Web Apps have become very popular now along with mobile phone apps. These are small programs which provide you with one bit of functionality to perform a certain task. There are loads of web apps out there at the moment that will allow you to create your own To-Do lists. Some of the biggest ones are:
With these programs you can create multiple lists, but sometimes I like to have a daily To-Do list so I know the tasks that must be completed today. This tutorial will show you how to do this.
Sticky Notes From The To-Do List
We are going to create Sticky Notes out of the To-Do so we can display these tasks in a graphical way which may help you remember what you have to do. Also I will be able to show you how you can use new CSS animation to create a nice looking sticky note.
Create The To-Do List
The first thing we are going to do is create the list of tasks, which will also be the form that we will use to add new tasks to the list. It will include a table of the tasks, each one of these tasks will be in a textbox so we can edit the tasks. There will be two buttons at the end of the form one to add a new row of tasks and another to refresh the sticky notes from the updated list.
The To-Do List HTML
First create a table which has two columns a title and a description. Then you can add your tasks in the following rows giving each task a title and a description. Under the table add two buttons one to Add a new row and another to refresh the sticky notes. Just like the example below.
<table class="newTasks" id="newTasks">
<tr><th>Title</th><th>Description</th><th></th></tr>
<tr><td><input type="text" id="title-1" value="Get Milk" /></td><td><input type="text" id="description-1" value="Need to go shopping to pick up milk." /></td><td><a class="deleteButton" id="delete-1" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-2" value="Pay Bills" /></td><td><input type="text" id="description-2" value="Gas and electric bills due soon." /></td><td><a class="deleteButton" id="delete-2" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-3" value="Take Dogs To Vets" /></td><td><input type="text" id="description-3" value="Dog needs taking to vets for injection." /></td><td><a class="deleteButton" id="delete-3" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-4" value="Record Tv Program" /></td><td><input type="text" id="description-4" value="Saving Private Ryan on tv make sure you record it." /></td><td><a class="deleteButton" id="delete-4" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-5" value="Go Doctors" /></td><td><input type="text" id="description-5" value="Doctors appointment is tomorrow!" /></td><td><a class="deleteButton" id="delete-5" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-6" value="Car Insurance" /></td><td><input type="text" id="description-6" value="Car insurance due end of the month." /></td><td><a class="deleteButton" id="delete-6" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-7" value="Go Dentist" /></td><td><input type="text" id="description-7" value="Dentist appointment is next Week. Make sure you bruch them teeth!" /></td><td><a class="deleteButton" id="delete-7" title="Delete Task">X</a></td></tr>
<tr><td><input type="text" id="title-8" value="Home Insurance" /></td><td><input type="text" id="description-8" value="House insurance finishes tomorrow don't burn the place down." /></td><td><a class="deleteButton" id="delete-8" title="Delete Task">X</a></td></tr>
</table>
<p><input type="button" id="addNew" value="Add" /></p>
<p><input type="button" id="refreshNotes" value="Refresh Sticky Notes" /></p>
Each input on each row will need to be given a ID so we know which one to get the value out in the jQuery which is done later in the tutorial.
The To-Do List CSS
The only CSS we have to do on the table is to increase the size of the input boxes and put a nice border around the table.
.newTasks{
padding:3px;
border:1px solid #888;
-moz-border-radius:3px;
-webkit-border-radius: 3px;
border-radius:3px;
}
.newTasks input[type=text] { width:300px; padding:3px };
The To-Do List JQuery
Now we have setup the look of the table we can create the functionality of the table and the two buttons. The only jQuery we need for the table is to delete a row(task) from our To-Do list. Each row has a link with X inside which is what we are going to use to delete a row. We need to put an onclick event on this X which will delete the parent row. There is a class on all the delete links so we can place a click event on this class and anything with this class will use the same click event.
//Function which runs on page load
$(document).ready(function(){
//Delete button click event
$('.deleteButton').click(function(){
deleteRow($(this));
});
});
/**
* Deletes the grandparent of the delete button
*/
function deleteRow(thisButton){
thisButton.parent().parent().remove();
}
Clicking a X button will take the button which was clicked on and send this object through to the function deleteRow which will take the grandparent of the object and remove it, which in this example is the entire row of the table. Now we can code what will happen when we click on the add new row button and the refresh list button. For the add row button we want to append a new row to the table and include input boxes in the row so we can add a task to our To-Do list.
//Function which runs on page load
$(document).ready(function(){
//Add button click event
$('#addNew').click(function(){
addNewRow();
});
//Delete button click event
$('.deleteButton').click(function(){
deleteRow($(this));
});
});
/**
* Click event function to append a new row to the tasks table
*/
function addNewRow(){
var numRows = $('#newTasks tr').length;
$('#newTasks').append('<tr><td><input type="text" id="title-'+numRows+'" /></td><td><input type="text" id="description-'+numRows+'" /></td></tr>');
}
/**
* Deletes the grandparent of the delete button
*/
function deleteRow(thisButton){
thisButton.parent().parent().remove();
}
Now we have both the delete and add button working we can add the main function and create our sticky notes. This will run off the button refresh sticky notes. All it will do is get everything in the task list, loop through them and append a list item to a list with the title and description inside it, we then need to use CSS to style them. Below is the final Javascript for our web app we add a new click event on the refresh notes id, when this is clicked it will run the function refreshNotes. This function will first remove all the existing sticky notes so we can rebuild them. Then it grabs all the rows from the task list table and loops through them using the JQuery each function. For each row it will find the title input box and grab it's value, and then grabs the description input box value, it will then take these two values and pass them into the create notes functions. The create notes function takes the header and puts it into a h2 tag then takes the description and put it into a paragraph. Next it will give a list of colours it can choose from, each colour is a CSS class which we will setup later in the tutorial. It will then append a new list item to the class sticky_notes with the title header and the description paragraph inside.
//Function which runs on page load
$(document).ready(function(){
//Add button click event
$('#addNew').click(function(){
addNewRow();
});
//Refresh notes button click event
$('#refreshNotes').click(function(){
refreshNotes();
});
//Delete button click event
$('.deleteButton').click(function(){
deleteRow($(this));
});
});
/**
* Click event function to append a new row to the tasks table
*/
function addNewRow(){
var numRows = $('#newTasks tr').length;
$('#newTasks').append('<tr><td><input type="text" id="title-'+numRows+'" /></td><td><input type="text" id="description-'+numRows+'" /></td></tr>');
}
/**
* Click event function to start the creation of the task sticky notes
* Get each of the rows in the task list and create a sticky note for each of them
*/
function refreshNotes(){
var tableRows = $('#newTasks tr');
$('.sticky_notes li').remove();
$.each(tableRows,function(i){
var title = $(this).find('input[id^="title"]').val();
var description = $(this).find('input[id^="description"]').val();
if(title != undefined && description != undefined){
createNotes(title, description);
}
});
}
/**
* Creates the sticky notes and gives it a random colour.
*/
function createNotes(title, description){
var header = '<h2>'+title+'</h2>';
var desc = '<p>'+description+'</p>';
var colours = new Array();
colours[0] = 'green';
colours[1] = 'blue';
colours[2] = 'yellow';
colours[3] = 'red';
colours[4] = 'purple';
colours[5] = 'orange';
$('.sticky_notes').append('<li class="'+colours[randomFromTo(0,(colours.length - 1))]+'">'+header+description+'</li>');
}
/**
* Get a random number between 2 numbers
*
* @return Randon Number
*/
function randomFromTo(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
}
/**
* Deletes the grandparent of the delete button
*/
function deleteRow(thisButton){
thisButton.parent().parent().remove();
}
Now we can new add new tasks, delete our tasks and generate a list out of the tasks in the table. ## Create The Sticky Notes
Now we can generate a list of the tasks we can now style them to look like sticky notes, as a bonus I will show you a trick in CSS3 to enlarge the selected sticky note. First we need to make a list to append the list items to.
<ul class="sticky_notes">
</ul>
The list items will go in here so now we can style them to look like sticky notes.
The Sticky Notes CSS
First we need to turn the list items into boxes just like sticky notes. Turn off the list styling and change how the list items are styled by giving them a width and a height.
ul.sticky_notes{ list-style:none; }
ul.sticky_notes li{
width:250px;
height:200px;
padding:20px;
margin:20px;
float:left;
}
All the notes are now separated if we want to make these look like handwritten notes then we need to change the font of the text inside the list item. Go to Google Font API and search for a nice handwriting font to include in your web app. I have gone for Short Stack so I need to add the following in the head HTML before I can add the font-family for the list item.
<link href='http://fonts.googleapis.com/css?family=Short+Stack' rel='stylesheet' type='text/css'>
ul.sticky_notes{ list-style:none; }
ul.sticky_notes li{
width:250px;
height:200px;
padding:20px;
margin:20px;
float:left;
font-family: 'Short Stack', cursive;
}
But sticky notes don't look straight all the time their notes they get thrown about, using CSS we can transform the boxes to be angled.
ul.sticky_notes li{
width:250px;
height:200px;
padding:20px;
margin:20px;
float:left;
-moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
-webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
box-shadow: 5px 5px 7px rgba(33,33,33,.7);
-webkit-transform:rotate(-6deg);
-o-transform:rotate(-6deg);
-moz-transform:rotate(-6deg);
font-family: 'Short Stack', cursive;
}
Now all the sticky notes are angled but they are all the same which never happens with notes so lets change them up a bit, lets change all the odd items and then change some random items to be different angles.
ul.sticky_notes li:nth-child(odd){
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
}
ul.sticky_notes li:nth-child(2n){
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
}
ul.sticky_notes li:nth-child(6n){
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
position:relative;
top:-10px;
}
Sticky notes can all be different colours. In the first part of this tutorial we made up a list of colours which will be randomly selected for the sticky notes, now lets create the CSS for these sticky notes.
.yellow{ background:#ffc; }
.green{ background:#cfc; }
.blue { background:#ccf; }
.red{ background:#f24a4a; }
.purple{ background:#eaafe3; }
.orange{ background:#f28e50; }
This is now finished you have a To-Do list which can then generate multiple sticky notes to display on your screen. We can still improve on the interface, you will want your sticky notes to let you select a note. In this bit of the tutorial I will show you how you can enlarge the note when the mouse hovers over just by using CSS. This will use the CSS3 property of scale, placed of the hover event will increase the size of the element. But if we enlarge the element we need to change the z-index of the element and increase the shadow of the element to make it look like it is coming out over the other elements. We then add a transition animation on this hover event to give it a smooth zoom out.
ul.sticky_notes li:hover{
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
position:relative;
z-index:10;
-moz-box-shadow:0px 10px 7px rgba(0,0,0,.7);
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,.7);
box-shadow:0px 10px 7px rgba(0,0,0,.7);
-webkit-transition: all 300ms ease-in 50ms; /* property duration timing-function delay */
-moz-transition: all 300ms ease-in 50ms;
-o-transition: all 300ms ease-in 50ms;
transition: all 300ms ease-in 50ms;
cursor:pointer;
}
Taking It Further
That's it you have finished your web app To-Do list, but obviously this isn't going to be practical enough for you to use in everyday life this is just a stepping stone to take the development further and create exactly what you want. But what would you want to do to improve this code?
- I would want to be able to save this To-Do list to a database everytime it is updated, this will allow me to close the browser down come back and everything will be the same as when I left it. Having a database could lead to having multiple lists. You could also split up the pages from the task list and the sticky notes so you can just have the notes on screen when you need them.
- It would be nice to enhance the sticky notes to be drag and drop so you can move them about and give them a bit more interaction. Having a completed button on the sticky notes will be nice so you can remove tasks from here.
- Reordering the To-Do list by priority, would be a nice inclusion to make sure you do the tasks in the correct order.
What features would you add to this app? Make sure you look at the demo of this feature, your app should work exactly the same if you copied the code correctly. If not you can download the full code just by clicking on the download button.