The course is part of this learning path
Part 3: Deleting all 'To-dos'.
Now, let's say we want to clear our to-do list and start afresh. We could add a Delete all button. So let's do that. Here we've added a new button, and again styled it with some bootstrap classes. We've given it the MT5 class to give it a large top margin to keep it away from the Add button. We don't want our users to accidentally hit the Delete all button instead of the Add button.
The button has an on-click event hooked up to a Delete all todo's function, which we'll implement next. Let's now add this Delete all function. We only need two lines of code. One to clear the local storage JSON data item, one to empty the to-do list DOM element on our page. Let's refresh the page and see if it works. Good, our list is cleared and the JSON data local storage item has also been cleared.
Try it on a mobile device, chrome dev tools. This gives us a way of simulating different screen sizes, which is useful for testing a user interface for mobile or tablet devices. Switch to Mobile M. 375 pixels width. Then change zoom to 100%. You can see the elements on the screen look very small compared to the size of the screen. On mobile, we would expect the buttons to be at least half the width of the screen, for example. Much bigger than now.
So what's going on here? Well, the page isn't scaling well. It's still behaving like a page being viewed in a large screen. The content is scaling to fit without adjusting in layout at all. And we therefore get the effect of a zoomed out page on mobile. Let us fix this. Fortunately, this is really easy to fix. Let's add a viewport meta tag which ensures the page is scaled correctly, regardless of the screen size. Let us test this in the browser. Refresh page. That looks much better. The buttons are now accessible for a mobile device user.
We can make some improvements here though. With such a small screen, the Todo list of the left and the Add form on the right are fighting for space. So let's adjust our two column bootstrap layout, so the content flows better on smaller screens. To do this, let's change the bootstrap layout classes on our column divs. Here, we're changing the classes so that we will have a two column layout only on medium-sized screens and larger. For smaller screens and mobile devices for example, the columns will fall back to full width. Let us test this. Great, so things are looking pretty good.
So let us update our app and replace some of our code with jQuery to demonstrate the differences and benefits. We'll also add some animations to enhance the user experience. With jQuery, animating elements is very easy. In order to be able to use jQuery, we need to include it on our page, we'll do this by referencing the jQuery files already hosted on a CDN. This is the same approach that we took with bootstrap. We'll include this code within the head section of our HTML document. Let's also tidy up some leftover commented code while we are looking through things.
Let us clean up our commented code now since we don't need it. Now, let's use jQuery to improve our user experience. We are going to add some subtle animations, which make it easier for the user to see when new todos are added and deleted. Instead of instantaneously appearing or disappearing, we are going to fade them in or out. Let us make one simple change first. Instead of using the jQuery remove function, let us use the jQuery fade-out function when we are deleting todo items. Let's save and refresh our browser, and try deleting our todo to see it in action. Great. It was as simple as using the jQuery fade out function. This function has other options so you can control the speed of the fading-out for example.
If you are interested in seeing what else you can control, have a look for examples and documentation online. Let us try making todos fade-in when we add them. Here, we need to approach things a little differently. We need to add the new list items to the list hidden initially, and then fade them in. To do this, we can use an endless tail on the new list items to set the display property to none. Then we use jQuery to fade it in. Let's save it and refresh and test it out. Great, works nicely.
To demonstrate another automation we could use, let us try slide-up instead of fade-out. Let us test that and try it out. So now we can see a nice effect of removing an item and the rest of the list items smoothly slide up to fill the space instead of jumping. One improvement we can make to the user experience and reliability of the app, is to add some basic validation to the Add form. Currently, if we hit add when the form is empty, it will add an empty todo. This isn't great. So let's fix this.
One way of addressing this, is to add a pair of if statements at the appropriate places where we add new todos. If a todo title is blank, we won't add a new todo. Let's test and verify it works. Great. We click Add when the input field is blank and nothing happens, as it should.
In terms of extending this app further, what if we wanted to use our todo list across different devices? That's where we need to introduce remote storage rather than just relying on our browser's local storage. A common way to do this would be to set up a remotely hosted server site component for this app, which consists of a RESTful API. Allowing us to read and write data to a database.