Web-based Task Prioritization JavaScript, HTML, CSS

👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Prioritization</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 20px;
    }

    h1 {
      text-align: center;
    }

    #task-form {
      margin-bottom: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
    }

    #task-form label {
      display: block;
      margin-bottom: 5px;
    }

    #task-form input,
    #task-form select,
    #task-form textarea {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box; /* Ensures padding doesn't increase width */
    }

    #task-form button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    #task-form button:hover {
      background-color: #3e8e41;
    }

    #task-list {
      list-style: none;
      padding: 0;
    }

    .task-item {
      border: 1px solid #ddd;
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .task-item:hover {
      background-color: #f0f0f0;
    }

    .task-item p {
      margin: 0;
    }

    .task-item .priority {
      font-weight: bold;
    }

    .task-item .buttons {
      display: flex;
      gap: 5px;
    }

    .task-item button {
      padding: 5px 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .task-item .delete-button {
      background-color: #f44336;
      color: white;
    }

    .task-item .delete-button:hover {
      background-color: #d32f2f;
    }

    .task-item .complete-button {
      background-color: #2196F3;
      color: white;
    }

    .task-item .complete-button:hover {
      background-color: #1976D2;
    }

    .completed {
      text-decoration: line-through;
      color: #888;
    }

    /* Media query for smaller screens */
    @media (max-width: 600px) {
      .task-item {
        flex-direction: column;
        align-items: flex-start;
      }

      .task-item .buttons {
        margin-top: 10px;
      }
    }

  </style>
</head>
<body>
  <h1>Task Prioritization</h1>

  <div id="task-form">
    <label for="task-name">Task Name:</label>
    <input type="text" id="task-name" name="task-name" required>

    <label for="task-description">Description:</label>
    <textarea id="task-description" name="task-description" rows="3"></textarea>

    <label for="task-priority">Priority:</label>
    <select id="task-priority" name="task-priority">
      <option value="high">High</option>
      <option value="medium">Medium</option>
      <option value="low">Low</option>
    </select>

    <button id="add-task-button">Add Task</button>
  </div>

  <ul id="task-list">
    <!-- Tasks will be added here -->
  </ul>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const taskForm = document.getElementById('task-form');
      const taskNameInput = document.getElementById('task-name');
      const taskDescriptionInput = document.getElementById('task-description');
      const taskPrioritySelect = document.getElementById('task-priority');
      const addTaskButton = document.getElementById('add-task-button');
      const taskList = document.getElementById('task-list');

      let tasks = [];

      // Load tasks from localStorage
      if (localStorage.getItem('tasks')) {
        tasks = JSON.parse(localStorage.getItem('tasks'));
        renderTasks();
      }

      addTaskButton.addEventListener('click', () => {
        const taskName = taskNameInput.value.trim();
        const taskDescription = taskDescriptionInput.value.trim();
        const taskPriority = taskPrioritySelect.value;

        if (taskName !== '') {
          const newTask = {
            id: Date.now(),
            name: taskName,
            description: taskDescription,
            priority: taskPriority,
            completed: false,
          };

          tasks.push(newTask);
          saveTasks();
          renderTasks();

          // Clear the form
          taskNameInput.value = '';
          taskDescriptionInput.value = '';
          taskPrioritySelect.value = 'medium'; // Reset to default
        } else {
          alert('Task name cannot be empty.');
        }
      });

      function renderTasks() {
        taskList.innerHTML = ''; // Clear the existing list

        // Sort tasks by priority (High > Medium > Low) and then by completion status
        tasks.sort((a, b) => {
          if (a.completed === b.completed) {
            const priorityOrder = { 'high': 0, 'medium': 1, 'low': 2 };
            return priorityOrder[a.priority] - priorityOrder[b.priority];
          } else {
            return a.completed ? 1 : -1; // Completed tasks go to the end
          }
        });

        tasks.forEach(task => {
          const listItem = document.createElement('li');
          listItem.classList.add('task-item');

          listItem.innerHTML = `
            <div class="task-details">
              <p class="${task.completed ? 'completed' : ''}">
                <strong>${task.name}</strong>
                <br>
                ${task.description ? task.description + '<br>' : ''}
                <span class="priority">Priority: ${task.priority}</span>
              </p>
            </div>
            <div class="buttons">
              <button class="complete-button" data-id="${task.id}">${task.completed ? 'Undo' : 'Complete'}</button>
              <button class="delete-button" data-id="${task.id}">Delete</button>
            </div>
          `;

          taskList.appendChild(listItem);
        });

        // Add event listeners to the buttons after rendering
        const deleteButtons = document.querySelectorAll('.delete-button');
        deleteButtons.forEach(button => {
          button.addEventListener('click', () => {
            const taskId = parseInt(button.dataset.id);
            deleteTask(taskId);
          });
        });

        const completeButtons = document.querySelectorAll('.complete-button');
        completeButtons.forEach(button => {
          button.addEventListener('click', () => {
            const taskId = parseInt(button.dataset.id);
            completeTask(taskId);
          });
        });
      }

      function deleteTask(taskId) {
        tasks = tasks.filter(task => task.id !== taskId);
        saveTasks();
        renderTasks();
      }

      function completeTask(taskId) {
        tasks = tasks.map(task => {
          if (task.id === taskId) {
            return { ...task, completed: !task.completed };
          }
          return task;
        });
        saveTasks();
        renderTasks();
      }

      function saveTasks() {
        localStorage.setItem('tasks', JSON.stringify(tasks));
      }
    });
  </script>
</body>
</html>
```
👁️ Viewed: 10
Web-based Task Prioritization JavaScript, HTML, CSS

Comments

Site Statistics
