Day 6: Task Views – Show a completed task

Showing a completed task

Let’s add our status to show view. In order to do it, we need to add a new paragraph tag. If a task is completed, we want to display text: “Completed. Yay!”. We’re going to use our completed? method to determine whether we should show this section or not. This is what it’s going to look like. Go ahead and put this code in show view before Edit link.

Show completed code

Don’t forget to start a server if you don’t have it running already. Go back to your browser and navigate to http://localhost:3000/tasks/1. Look, our task shows as completed, Yay!

Completed code in the browser

Adding a status to task listing

The last change that we’re going to make is adding a status to list view. We want to see which task is completed and which is not. This is really simple. Open up app/views/tasks/index.html.erb. We’ll need to add a new HTML table row. We will show the text “Completed!” if a task is completed.

Adding status to a task listing

Go back to the browser. Go to: http://localhost:3000/tasks. You should see “Completed!” next to our first task. Just so we see the difference, let’s add a new task. Click “New Task”, enter “Learn how to program better”. Click “Create Task”. Click “Back” link to return to the task listing. You should see two tasks. One is completed. Another one is not.

Completed on the task listing screenWe learned how to program, now we need to learn how to program better.

What we just covered

We’ve made great progress! We wrote our first web application using Ruby on Rails. How cool is that? We went through basics of Rails framework. We understood how Models, Views and Controllers work together to deliver a web page to a user. This time we did everything ourselves. We generated a database migration. We used an attribute method on Task model. We looked at how TaskController renders views using actions. At the end of this chapter we added the ability to complete a task. Then we displayed this information on show, edit and list views.

Now we have a fully working todo application. Let’s put it on the Internet and tell the world about it.

Photo by rodrigosa