- To Do List Beautiful Todo Lists For Your Site 2017
- To Do List Beautiful Todo Lists For Your Site Free
If you’re not completely turned off by the idea of building yet another todolist app, and you’re relatively new to JavaScript and Front-end development,this tutorial is for you. Here’s a live demoof what you’ll be building.
Besides actually monitoring your site, make sure you’ve thought well about Search Engine Optimization and Social Media Marketing. Although this is an ongoing process, you need to ensure you’ve got the basic setup right. Also, remember – a fast website is a pleasant website. Make sure your site has been optimized for performance. For example, you can type 'add rice to my shopping list,' and rice will be added to a list called 'shopping.' This is also the prettiest to-do list app on the market, in my opinion. You can set custom background images for every one of your lists, allowing you to tell at a glance which list you're looking at.
Prerequisites
This tutorial assumes that you have a basic knowledge of JavaScript.Essentially, you need to know what variables, arrays, functions and objects are,but you do not need to have prior experience with building JavaScriptapplications.
Get started
The todo list app we’ll build in this tutorial will be pretty basic. A user canadd a task, mark a task as completed and delete an already added task. I’llexplain how to build each feature, but you must follow along by typing thecode and running it on your end to get the most out of this tutorial.
I recommend using JSFiddle while working through thistutorial, but feel free to use other code playgrounds or your local text editorif you prefer. Without further ado, grab the markup and styles for the appon JSFiddle. If you’re usingJSFiddle, you can hit the Fork button to create a new fiddle of your own.
Add a todo
The first thing we need to do is set up an array where we’ll place the todo listitems. Each todo item will be an object with three properties:
text
, a stringwhich holds whatever the user types into the text input, checked
, a booleanwhich helps us know if a task has been marked completed or not, and id
, aunique identifier for the item.Once a new task is added, we’ll create a new todo object, push it into thearray and render the value of the
text
property on the screen. When a todo ismarked as completed, we’ll toggle the checked
property to true
, and when theuser deletes a todo, we’ll locate the todo item in the array using its id
andremove it.Let’s start by adding a todo item to our list. To do so, we need to listen forthe
submit
event on the form element, and then invoke a new addTodo()
function when the form is submitted.Update the JavaScript pane on JSFiddle to look like this:
By default, when a form is submitted, the browser will attempt to submit it to aserver which will cause a page refresh. To prevent that from happening, we canstop the default behaviour by listening for the
submit
event on the form, andusing event.preventDefault()
.Next, we select the text input andtrimits value to remove whitespace from the beginning and end of the string, andthen save it in a new variable called
text
. If the text
variable is notequal to an empty string, we pass the text to the addTodo()
function which isdefined above the event listener.Within the function, we create a new object for the task and add the propertiesI mentioned earlier. The
text
property is set to the function argument,checked
is initialised to false
, and id
is initialised to the number ofmilliseconds elapsed since January 1, 1970. This id
will be unique for eachtodo item unless you can add more than one task in a millisecond, which I don’tthink is possible.Finally, the task is pushed to the
todoItems
array, and the array is logged tothe console. In the form event listener after addTodo(text)
, the value of thetext input is cleared by setting it to an empty string, and it’s also focused sothat the user can add multiple items to the list without having to focus theinput over and over again.Add a few todo items and view the
Take a breather and see the complete code at the end of this step.todoItems
array in your browser console. Youwill see that each todo item is represented by an object in the array. If you’reusing JSFiddle, you may need to check the built-in console provided by JSFiddle.Render the todo items
Once a new todo item is added to the
todoItems
array, we want the app to beupdated with the item rendered on the screen. We can do this pretty easily byappending a new li
element for each item to the .js-todo-list
element in theDOM.To achieve this, add a new
renderTodo()
function above addTodo()
:The
renderTodo()
function takes a todo
object as its only parameter. Itconstructs a li
DOM node using thedocument.createElement
method. On the next line, the class
attribute is setto todo-item ${isChecked}
. The value of isChecked
will be an empty string ifthe checked
property in the todo
object is false
. Otherwise, it will be‘done’. You will see the effect of this ‘done’ class in the next section.Next, a
data-key
attribute is also set on the li
element. It is set tothe id
property of the todo
object and will be used to locate a specifictodo item in the DOM later in the tutorial. Followingthat, the contents of the li
element are set using the innerHTML
method andfinally, the li element is inserted as the last child of the .js-todo-list
element.Change the
console.log(todoItems)
line in addTodo()
to renderTodo(todo)
asshown below so that the renderTodo()
function is invoked each time a new todoitem is added.Try it out by adding a few todo items. They should all render on the page.
Take a breather and see the complete code at the end of this step.Mark a task as completed
Let’s add the ability to mark a task as completed. To do so, we need to listenfor the click event on the checkbox and toggle the
checked
property onthe corresponding todo item.Add the following code at the bottom of the JavaScript pane to detect the todoitem that is being checked off:
Instead of listening for clicks on individual checkbox elements, we arelistening for clicks on the entire list container. When a click event occurs onthe list, a check is done to ensure that the element that was clicked is acheckbox. If so, the value of
data-key
on the checkbox’s parent element isextracted and passed to a new toggleDone()
function (shown below) which shouldbe placed below the addTodo()
function.This function receives the key of the list item that was checked or uncheckedand finds the corresponding entry in the
todoItems
array using thefindIndexmethod. Once we have the index of the todo item, we need to locate it in thetodoItems
array using bracket notation. The value of the checked
property onthe todo item is then set to the opposite value.Finally, the
renderTodo()
function is called with the todo object passed in.If you run the code now and try checking off an item, it will duplicate the todoitem instead of checking off the existing one.To fix this, we need to check if the current todo item exists in the DOM first, and replace it with the updated node if it does.Change your
renderTodo()
function as shown below:First, the current todo item is selected. If it exists in the DOM, the element will be returned and subsequently replaced. Ifthe item does not exist (as is the case for new todo items), it will be addedat the end of the list.
Take a breather and see the complete code at the end of this step.Delete todo items
Similar to the way we implemented the last feature, we’ll listen for clicks onthe
.js-delete-todo
element, then grab the key of the parent and pass it offto a new deleteTodo
function which will remove the corresponding todo objectin todoItems
array send the todo item to renderTodo()
to be removed from theDOM.First, let’s detect when the delete button is clicked:
Next, create the
deleteTodo()
function below toggleDone()
as shown below:The
renderTodo()
function also needs to be updated as follows:Now, you should be able to delete tasks by clicking the delete button. Chad henne.
Take a breather and see the complete code at the end of this step.Add an empty state prompt
An empty state occurs when there is no data to show in the app. For example,when the user hasn’t added a todo yet (first use) or when the user has clearedthe list. It is important to account for this state when designing anapplication.
Many apps use the empty state to show a prompt that tells the user what to do.Here is a real-world example of what a good empty state prompt looks like:
Once there are no tasks to display, we’ll add a prompt that encourages the userto add a new task. This feature can be implemented with just HTML and CSS.
We will take advantage of the
:empty
CSS selector todisplay the prompt conditionally only if no items exist in the list.Add the following code for the empty state prompt in the HTML pane as shownbelow:
Then add some styles for the empty state in your CSS:
While this looks just fine, the problem is that the message persists even when atask has been added to the list. The intended behaviour is for the prompt todisappear once a todo has been added and only reappear when there are no moretasks to display.
This bit of CSS will give us what we want:
The
Take a breather and see the complete code at the end of this step..empty-state
element is hidden from view by default with display: none
and only comes into view when .todo-list
is empty. We’re using the:empty selector todetect when .todo-list
is empty, and the sibling selector (+
) to target.empty-state
and apply display: flex
to it only when .todo-list
is empty.A subtle bug
One issue I encountered while working on this tutorial is that the empty statewouldn’t return into view when all existing tasks are deleted.
Apparently, some whitespace persists in the
.todo-list
element even after allits child li
elements have been removed, so it’s not considered to be emptyand the styles defined with the :empty
selector does not kick in. To fix thisissue, we need to clear any whitespace from the element in our JavaScriptcode. Modify the renderTodo()
function as follows:The above code solves the problem, and the app now works as expected.
Take a breather and see the complete code at the end of this step.Persist the application state
Our todo list app is pretty much complete at this point, but let’s add one morefeature to make things a bit more interesting and realistic. At the moment, oncethe page is refreshed, all the todo items are cleared. Let’s prevent this bypersisting the application state to the browser’slocalstorage.
Add this line at the top of your
JSFiddle denies access to the window’s localStorage so you must run the code locally to test out this part of the tutorial.renderTodo()
function:Only strings may be stored in the localStorage so we need to convert our
todoItems
array to a JSON string first before passing it to the setItem
method which adds a new data item under the specified key.Each time the
renderTodo()
function is invoked, the value of todoItemsRef
inthe localStorage will be replaced with the current value of the todoItems
array. This way, the array and the corresponding localStorage reference is keptin sync.You can test this out by opening your browser dev tools, navigate to theApplication tab and monitor the Local Storage section. If you’re notusing Chrome, the dev tools may be organised differently.
The final step is to render any existing todo list items when the page isloaded. Add the following code snippet at the bottom of the JavaScript pane:
When the
DOMContentLoaded
event is fired, we proceed to retrieve the value oftodoItemsRef
from the localStorage. If it exists, the JSON.parse
method isused to convert the JSON string back to its original array form and save it intodoItems
.Following that,
Take a breather and see the complete code at the end of this step.renderTodo()
is invoked for each todo object present in thearray. This causes any saved todo items to be rendered as soon as the pageloads.Conclusion
In this tutorial, we successfully built a todo list app that allows auser to add new tasks, mark a task as completed and delete old ones. We alsodiscussed the importance of accounting for empty states when designing anapplication, then proceeded to talk about a potential problem when using the
:empty
selector and how to fix it.Finally, we discussed persisting the application state to the browser’slocalStorage and how to get around its limitations using
JSON.stringify
andJSON.parse
. If a section or piece of code is not clear to you, feel free toleave a comment below and I’ll get back to you as soon as possible.Thanks for reading, and happy coding!
Opinions expressed by Entrepreneur contributors are their own.
Let's face it: getting things done is hard. Even when you have a solid 'to-do' list.
The main problem with traditional 'to-do' lists is that they lack prioritization. Think about how a trip to the store goes with your typical grocery list.
You get in the store, start rolling down the aisles and look for the items. No particular order, really. It’s more like “check the list…check the aisle…check the list…check the aisle” until you find everything. You don’t really feel like it matters which aisle you start in, or what order you pick things up in. I's easy to end up missing things, or going up and down the aisles repeatedly.
Clearly, this model is inefficient. So, why do we treat our important daily tasks like this? Here are three steps you can take you make your 'to-do' lists so efficient that they practically do themselves. (If your list is already overflowing, you can always just grab the 'cheatsheet' for this article. It summarizes all the main points for you.)
1: Stop treating your 'to-do's' like a grocery list.
Yesterday, I did a brain dump into my notebook and these were the objectives I came up with for the day:
- Follow up with magazine editors.
- Client meeting.
- Add widget to website.
- Send emails.
- Write blog post.
- Upload videos to YouTube.
- Edit articles.
It’s tempting to write this list down and immediately start hacking away at it ,like a shopping list. But that’s not the smartest way. If I look at it, I can see that some items are time sensitive, some are more mentally taxing, others are relatively unimportant.
So let's rearrange that same list according to our new priorities.
The new list might look like:
- Client meeting.
- Upload videos to YouTube.
- Edit articles.
- Write blog post.
- Follow up with magazine editors.
- Send emails.
- Add widget.
Notice now that the two things directly related to making income are now prioritized first, followed by the most intellectually challenging items, followed by the more rote tasks. This new list is set up so that even if I only finish HALF of the items, the most important things are taken care of.
Which brings up a good point. What happens to your list if you don’t finish all the items on a given day?
Related: To-Do Lists Not Working? Try This Time-Management Alternative
To Do List Beautiful Todo Lists For Your Site 2017
2. Rollover, delegate or drop it.
if you’re even remotely busy (like we all are) there’s a 99 percent chance you’re not going to finish everything you listed, even if you organized the list well.
What happens to the items you don’t get to for the day? You have three options for incomplete tasks:
Rollover: If you didn’t finish something yesterday, just roll it over into tomorrow’s list, right? Sometimes this is ok, but you have to be careful. If you rollover too many “non-critical” items for too many days in a row, you’ll end up with a list of 73 things like “refill toilet paper roller.” Not efficient.
Process tool for mac os. Flowcharts are a great way to develop ideas, visualize workflows and map out process flows so we’ve taken a look at the best flowchart software for Mac. Of course, the most popular flowchart and diagramming tool on Windows is Microsoft Visio but since it isn’t available on macOS, you need an alternative to Visio on Mac.
Try to rollover one to two items per day, max.
Delegate: Some things still need to get done but, after prioritizing your list and trying to roll them over for a day or two, you realize that you just can’t be the one who does them. When this is the case, time to delegate.
This happened to me when I realized that I had a dozen little website issues that needed fixing, and I just couldn’t get to them.
They were important enough to write down, but not important enough to actually work on compared to everything else. That’s when I hired someone to help me manage the site. Now, getting something on Rich20Something is as simple as sending a quick email. More importantly, my 'to-do' list is now shorter.
Drop it. This is my secret weapon. If you’ve tried rolling it over and you can’t get to it…and delegation isn’t a good option…. Just drop it.
Say what??! Yep — just forget about it. The key here is getting good enough to determine which items are unnecessary before even adding them to the list.
Related: Why Your 'To Do' List Is Failing You
3. Get ruthless.
Simple to-do lists are powerful. Long to-do lists are disempowering.
I want you to get super specific about what needs to get done for the day, even after you’ve prioritized your list. Make your priorities fight each other. Then chop that list down to three priorities for the day. Just three.
Why? The reasons are both pragmatic and psychological.
Think about it this way. Whether you accomplish three out of seven things of the day, or three out of three, you’re still completing the SAME amount of work but one list leaves you feeling empty and dissatisfied, while the other leaves you confident and happy with your daily progress.
To Do List Beautiful Todo Lists For Your Site Free
Related: The Not-to-Do List -- 7 Habits That Are Sabotaging Your Productivity and Happiness