Advertisement
rezamalik15

Untitled

May 24th, 2024
517
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.39 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Todo List</title>
  7.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  8. </head>
  9. <body>
  10.  
  11.     <main class="container">
  12.         <div class="row vh-100">
  13.             <div class="col-lg-6 col-md-8 col-10 p-3 m-auto border rounded-3 shadow">
  14.                 <h1 class="p-2 text-primary text-center border-bottom">
  15.                     Todo List
  16.                 </h1>
  17.                 <form action="{% url 'todo-add' %}" method="post">
  18.                     {% csrf_token %}
  19.                     <div class="input-group mb-3">
  20.                         <input class="form-control" type="text" name="todo" placeholder="Enter your new todo">
  21.                         <button type="submit" class="btn btn-primary">Add</button>
  22.                     </div>
  23.                 </form>
  24.                 <ul class="list-group list-group-flush overflow-auto" style="max-height: 300px;">
  25.                    
  26.                     {% for item in todos %}
  27.  
  28.                         <li class="list-group-item d-flex justify-content-between">
  29.                             <a href="" class="btn btn-outline-danger">Delete</a>
  30.  
  31.                             {% if item.status %}
  32.  
  33.                                 <p class="my-auto">
  34.                                     <del>{{ item.text }}</del>
  35.                                 </p>
  36.                                 <a href="{% url 'todo-update' item.id %}" class="btn btn-outline-primary">Redo</a>
  37.  
  38.                             {% else %}
  39.  
  40.                                 <p class="my-auto">{{ item.text }}</p>
  41.                                 <a href="{% url 'todo-update' item.id %}" class="btn btn-outline-secondary">Done</a>
  42.  
  43.                             {% endif %}
  44.  
  45.                            
  46.                         </li>
  47.  
  48.                     {% endfor %}
  49.  
  50.                 </ul>
  51.             </div>
  52.         </div>
  53.     </main>
  54.  
  55.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>      
  56. </body>
  57. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement