index.html

{% extends 'base.html' %}
{% block title %}Home{% endblock title %}
{% block body %}
    <div class="container my-3">
      <H2>Track</H2>
      <form action="/" method="POST">
        <div class="mb-3">
          <label for="title" class="form-label">Time(mins)</label>
          <input type="Integer" class="form-control" name="title" id="exampleInputEmail1" aria-describedby="emailHelp">
          
        </div>
        <div class="mb-3">
          <label for="desc" class="form-label">Review</label>
          <input type="text" class="form-control" name="desc" id="exampleInputPassword1">
        </div>
        <div class="mb-3 form-check">
          
        </div>
        <button type="submit" class="btn btn-success my--2">Submit</button>
      </form>
    </div>
    <div class="container my-4">
      <h2>YOUR TODO</h2>
      <table class="table">
        
        <tbody id="results">
          {% if allTodo|length == 0 %}
          <div class="alert alert-info" role="alert">
            No record found! Show Your Progress!!!
          </div>
                 {% else %}
                 <thead>
                  <tr>
                    <th scope="col">S.no</th>
                    <th scope="col">Time</th>
                    <th scope="col">Review</th>
                    <th scope="col">Time & Date</th>
                    <th scope="col">Result</th>
                  </tr>
                 </thead>
          
            
          
          {% 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>
              <script>
                 // Assuming todo.title contains the time in minutes
                 var Time = {{ todo.title }};
        
                if (Time < 30) {
                    document.write("<p>25%</p>");
                } 
                else if (Time >= 30 && Time <60) {
                    document.write("<p>75%</p>");
                }
                else{
                  document.write("<p>100%</p>");
                }
              </script>
              <!--<a href = "/update/{{todo.sno}}" type="button" class="btn btn-outline-danger btn-sm mx-1">Update</button>-->
              <a href = "/delete/{{todo.sno}}" type="button" class="btn btn-outline-danger btn-sm mx-1">Delete</button>
            </td>
          </tr>
        
            
          {% endfor %}
          {% endif %}
        </tbody>
      </table>  
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

{% endblock body %}