list.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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>Today's to-do List</title>
  7. <style>
  8. body {
  9. background-color: transparent;
  10. color: #ffd39a;
  11. width: 400px;
  12. }
  13. </style>
  14. <script>
  15. function checkForUpdates() {
  16. fetch('/checkTodo')
  17. .then(response => response.json())
  18. .then(data => {
  19. const newList = data.items; // Assuming LIST is returned as JSON with { items: [...] }
  20. // Compare current list with new list (you can customize this comparison)
  21. const currentItems = Array.from(document.querySelectorAll('li')).map(li => li.textContent);
  22. if (newList.length !== currentItems.length || !currentItems.every((item, index) => item === newList[index].name)) {
  23. // Refresh the page if the list has changed
  24. window.location.reload();
  25. }
  26. })
  27. .catch(error => console.error('Error fetching the to-do list:', error));
  28. }
  29. setInterval(checkForUpdates, 15 * 1000); // Check every 15 seconds
  30. </script>
  31. </head>
  32. <body>
  33. {% if items %}
  34. <h4>Today's to-do List</h4>
  35. <ul id="todo-list">
  36. {% for item in items %}
  37. <li style="text-decoration: {{ 'line-through' if item.crossed == 'yes' else 'none' }};">
  38. {{ item.name }}
  39. </li>
  40. {% endfor %}
  41. </ul>
  42. {% else %}
  43. <h4>Nothing on the to-do list yet</h4>
  44. {% endif %}
  45. </body>
  46. </html>