Todo Laravel Project - Show todo task detail

In this Laravel project tutorial we will learn to show the detail of selected todo tasks.

Making Todo tasks clickable

Open home.blade.php file which is inside the resources/views directory.

We have the following logic to render the ACTIVE todo tasks list.

@if (count($todos) > 0)
  <ul class="list-group">
  @foreach ($todos as $todo)
    <li class="list-group-item">{{ $todo->title }}</li>
  @endforeach
  </ul>
@else
  <p class="lead">No ACTIVE todo tasks</p>
@endif

Convert the list item <li class="list-group-item">{{ $todo->title }}</li> into the following.

<li class="list-group-item">
  <p>
    <a data-toggle="collapse" href="#collapse-id-{{ $todo->id }}">{{ $todo-> title }}</a>
  </p>
  <div class="collapse" id="collapse-id-{{ $todo->id }}">
    <div class="card card-body">
      <div class="todo-description">{{ $todo->description }}</div>
      <hr>
      <p>Status: {{ $todo->status }}</p>
      <p title="{{ $todo->created_at }}">Created: {{ $todo->created_at->diffForHumans() }}</p>
    </div>
  </div>
</li>

In the above code we are taking help of Bootstrap 4 collapse component.

When user will click on the title of the todo task till will reveal the detail of the task. If the title is clicked again then the detail will be hidden.

The code $todo->created_at->diffForHumans() will show the time in format like 1 hour ago.

Open the home page in the browser and click on any todo task to reveal its detail.

Modify other views

Open the active.blade.php, done.blade.php and deleted.blade.php files which are inside the resources/views directory and make the list item clickable.

The code of this project is there in my GitHub repository todo-laravel. Feel free to check that out.

Alright this brings us to the end of this section. In the next tutorial we will be working on how to update todo tasks.

See you there. Have fun coding :-)