index.html

{% extends 'base.html' %}
{% block title %}Home {% endblock title %}
{% block body %}
        
  
    <div class="container my-3">
      <h2>Add a Todo</h2>
      <form action="/" method="POST">
        <div class="mb-3">
          <label for="title" class="form-label">Todo Title</label>
          <input
            type="text"
            class="form-control" name="title"
            id="title"
            aria-describedby="emailHelp"
          />
        </div>
        <div class="mb-3">
          <label for="desc" class="form-label" >Todo Description</label>
          <input type="text" class="form-control" name="desc" id="desc" />
        </div>
        <button type="submit" class="btn btn-dark">Submit</button>
      </form>
    </div>

   
    <div class="container my-3">
      <h2>Your Todos</h2>

        {% if allTodo|length==0 %}

        <div class="alert alert-dark" role="alert">
          No Todos found.Add your first todo now!
        </div>
       
         {% else %}

          <table class="table">
            <thead>
              <tr>
                <th scope="col">Sno.</th>
                <th scope="col">Title</th>
                <th scope="col">Description</th>
                <th scope="col">Time</th>
                <th scope="col">Actions</th>
              </tr>
            </thead>
            <tbody>

         {% for todo in allTodo %}
          <tr>
            <th scope="row">{{loop.index}}</th>
            <td>{{todo.title}}</td>
            <td>{{todo.desc}}</td>
            <td>{{todo.date_created}}</td>
            <td>
              <a href="/update/{{todo.sno}}" type="button" class="btn btn-outline-dark btn-sm mx-1">Update</button>
              <a href="/delete/{{todo.sno}}" type="button" class="btn btn-outline-dark btn-sm mx-1">Delete</button>
            </td>
         </tr>
         {% endfor %}
         {% endif %}
        </tbody>
      </table>
         
         
        

          <!--<tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr> -->


    
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>

    {% endblock body %}