To-Do-List 1.17

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDo List App</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
    background-color: #f4f4f4;
  }
  .task-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
  }
  .task-toggle button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    outline: none;
  }
  .task-content {
    flex: 1;
    padding-left: 10px;
  }
  .task-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }
  .task-header span {
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .task-note {
    margin-top: 10px;
    background-color: white;
    padding: 10px;
    display: none;
  }
  
  .note-container {
    display: flex;
    align-items: center;
  }

  .note-container input[type="checkbox"] {
      margin-right: 5px; /* Adjust as needed */
  }


  .btn-group {
    display: flex;
    align-items: center;
  }
  .btn {
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 8px 12px;
  }
  
  #toggleAllBtn, #inverseAllBtn, #deleteAllBtn {
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
}

#toggleAllBtn:hover, #inverseAllBtn:hover, #deleteAllBtn:hover {
    background-color: #0056b3;
}

  
  
  .delete-btn {
    background-color: #dc3545;
    color: white;
  }
  .delete-btn:hover {
    background-color: #c82333;
  }
  .resolve-btn, .note-btn, #importBtn, #exportBtn {
   ...

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
    background-color: #f4f4f4;
  }
  .task-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
  }
  .task-toggle button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    outline: none;
  }
  .task-content {
    flex: 1;
    padding-left: 10px;
  }
  .task-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
  }
  .task-header span {
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .task-note {
    margin-top: 10px;
    background-color: white;
    padding: 10px;
    display: none;
  }
  
  .note-container {
    display: flex;
    align-items: center;
  }

  .note-container input[type="checkbox"] {
      margin-right: 5px; /* Adjust as needed */
  }


  .btn-group {
    display: flex;
    align-items: center;
  }
  .btn {
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 8px 12px;
  }
  
  #toggleAllBtn, #inverseAllBtn, #deleteAllBtn {
    margin-left: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 8px 12px;
    background-color: #007bff;
    color: white;
}

#toggleAllBtn:hover, #inverseAllBtn:hover, #deleteAllBtn:hover {
    background-color: #0056b3;
}

  
  
  .delete-btn {
    background-color: #dc3545;
    color: white;
  }
  .delete-btn:hover {
    background-color: #c82333;
  }
  .resolve-btn, .note-btn, #importBtn, #exportBtn {
    background-color: #007bff;
    color: white;
  }
  .resolve-btn:hover, .note-btn:hover, #importBtn:hover, #exportBtn:hover {
    background-color: #0056b3;
  }
  
  
  /*...

JavaScript

[
  {
    "taskTitle": "Complete project report",
    "taskStatus": false,
    "taskNotes": ["Include sales data and projections."]
  },
  {
    "taskTitle": "Buy groceries",
    "taskStatus": false,
    "taskNotes": ["Milk, eggs, bread, and fruits."]
  },
  {
    "taskTitle": "Call mom",
    "taskStatus": false,
    "taskNotes": ["Wish her happy birthday.", "Whatever"]
  },
  {
    "taskTitle": "Go to the gym",
    "taskStatus": false,
    "taskNotes": ["Leg day."]
  },
  {
    "taskTitle": "Read book",
    "taskStatus": true,
    "taskNotes": ["Include sales data and projections.",
      "asdsadsadsadasd",
      "", ""]
  }
]



divTitle
divInput --> this div should be devided horizontaly in 2
divMenu
divTasks --> this div should be devided horizontaly in 2 (and left of those 2 difs should again be devided in 2 verticaly)