Scribd
Upload
16 views7 pages

Completely Working Model

This document defines the code for a to-do list application with the following key features: - Users can add tasks with text and priority level - Tasks are rendered and sorted by priority level into separate sections - Tasks can be marked as complete or deleted by the user - Task data is stored locally for persistence between sessions

Uploaded by

quizzicaldavinci
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views7 pages

Completely Working Model

This document defines the code for a to-do list application with the following key features: - Users can add tasks with text and priority level - Tasks are rendered and sorted by priority level into separate sections - Tasks can be marked as complete or deleted by the user - Task data is stored locally for persistence between sessions

Uploaded by

quizzicaldavinci
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f7;
margin: 0;
padding: 0;
}
.container {
width: 100%;
display: flex;
justify-content: center;
margin-top: 40px;
padding: 0 20px; /* Add some padding to the containers */
box-sizing: border-box; /* Ensure padding doesn't increase the width */
}
.input-container {
display: flex;
align-items: center;
margin-bottom: 20px;
width: 100%; /* Ensure the input container spans the full width */
max-width: 600px; /* Limit the maximum width of the input container */
}
#taskInput {
flex: 1; /* Let the input field grow to fill the available space */
padding: 12px;
box-sizing: border-box;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease;
}
#taskInput:focus {
border-color: #007bff;
outline: none;
}
#prioritySelector {
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
transition: border-color 0.3s ease;
}
#prioritySelector:focus {
border-color: #007bff;
outline: none;
}
button {
cursor: pointer;
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
transition: background-color 0.3s ease, transform 0.2s ease;
}
button:hover {
background-color: #0056b3;
transform: translateY(-2px);
}
.priority-section {
width: 100%;
max-width: 300px;
padding: 20px;
background-color: #f8f9fa;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
margin-left: 20px;
}
.priority-section:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
color: #333;
}
.task-item {
padding: 12px;
border-bottom: 1px solid #ddd;
cursor: pointer;
color: #333;
transition: background-color 0.3s ease;
display: flex;
flex-direction: column;
}
.task-item:hover {
background-color: #f0f4f7;
}
.task-name {
margin-bottom: 10px;
}
.task-buttons {
display: flex;
justify-content: space-between;
}
.task-buttons button {
background-color: #fff;
color: #0130ff;
transition: background-color 0.3s ease, color 0.3s ease;
}
.task-buttons button:hover {
background-color: #00fdfd;
color: #fff;
}
.high-priority {
background-color: #fddfdf;
}
.medium-priority {
background-color: #faedd2;
}
.low-priority {
background-color: #e4e6fd;
}
</style>
</head>
<body>
<div class="container">
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a new task...">
<select id="prioritySelector">
<option value="low">Low Priority</option>
<option value="medium">Medium Priority</option>
<option value="high">High Priority</option>
</select>
<button onclick="addTask()">Add Task</button>
</div>
</div>

<div class="container">
<div class="priority-section" id="highPrioritySection">
<h2>High Priority</h2>
<div id="highPriorityTasks"></div>
</div>
<div class="priority-section" id="mediumPrioritySection">
<h2>Medium Priority</h2>
<div id="mediumPriorityTasks"></div>
</div>
<div class="priority-section" id="lowPrioritySection">
<h2>Low Priority</h2>
<div id="lowPriorityTasks"></div>
</div>
</div>

<script>
const taskInput = document.getElementById('taskInput');
const prioritySelector = document.getElementById('prioritySelector');
const highPriorityTasks = document.getElementById('highPriorityTasks');
const mediumPriorityTasks = document.getElementById('mediumPriorityTasks');
const lowPriorityTasks = document.getElementById('lowPriorityTasks');
let tasks = [];

function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') {
return;
}

const priority = prioritySelector.value;


const taskItem = createTaskElement(taskText, priority);
tasks.push({ text: taskText, priority: priority, completed: false });
saveTasks();
renderTasks();
taskInput.value = '';
}

function createTaskElement(taskText, priority, completed) {


const taskItem = document.createElement('div');
taskItem.classList.add('task-item', `${priority}-priority`);
const textDecoration = completed ? 'line-through' : 'none';
const backgroundColor = completed ? '#b3ffb3' : ''; // Set green
background for completed tasks
taskItem.style.backgroundColor = backgroundColor; // Apply background
color
taskItem.innerHTML = `
<div class="task-name">
<span style="text-decoration:
${textDecoration}">${taskText}</span>
</div>
<div class="task-buttons">
<button class="complete-button">${completed ? 'Undo' :
'Complete'}</button>
<button class="delete-button">Delete</button>
</div>
`;
taskItem.querySelector('.complete-button').addEventListener('click',
function() {
const index = tasks.findIndex(task => task.text === taskText &&
task.priority === priority);
if (index !== -1) {
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
}
});
taskItem.querySelector('.delete-button').addEventListener('click',
function() {
const index = tasks.findIndex(task => task.text === taskText &&
task.priority === priority);
if (index !== -1) {
tasks.splice(index, 1);
saveTasks();
renderTasks();
}
});

return taskItem;
}

function renderTasks() {
highPriorityTasks.innerHTML = '';
mediumPriorityTasks.innerHTML = '';
lowPriorityTasks.innerHTML = '';
tasks.forEach(task => {
const taskItem = createTaskElement(task.text, task.priority,
task.completed);
if (task.priority === 'high') {
highPriorityTasks.appendChild(taskItem);
} else if (task.priority === 'medium') {
mediumPriorityTasks.appendChild(taskItem);
} else {
lowPriorityTasks.appendChild(taskItem);
}
});
}

function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
const storedTasks = localStorage.getItem('tasks');
if (storedTasks) {
tasks = JSON.parse(storedTasks);
renderTasks();
}
}

loadTasks();
</script>
</body>
</html>

<script>
const taskInput = document.getElementById('taskInput');
const prioritySelector = document.getElementById('prioritySelector');
const highPriorityTasks = document.getElementById('highPriorityTasks');
const mediumPriorityTasks = document.getElementById('mediumPriorityTasks');
const lowPriorityTasks = document.getElementById('lowPriorityTasks');
let tasks = [];

function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') {
return;
}

const priority = prioritySelector.value;


const taskItem = createTaskElement(taskText, priority);
tasks.push({ text: taskText, priority: priority, completed: false });
saveTasks();
renderTasks();
taskInput.value = '';
}

function createTaskElement(taskText, priority, completed) {


const taskItem = document.createElement('div');
taskItem.classList.add('task-item', `${priority}-priority`);
const textDecoration = completed ? 'line-through' : 'none';
const backgroundColor = completed ? '#b3ffb3' : ''; // Set green
background for completed tasks
taskItem.style.backgroundColor = backgroundColor; // Apply background
color
taskItem.innerHTML = `
<div class="task-name">
<span style="text-decoration:
${textDecoration}">${taskText}</span>
</div>
<div class="task-buttons">
<button class="complete-button">${completed ? 'Undo' :
'Complete'}</button>
<button class="delete-button">Delete</button>
</div>
`;
taskItem.querySelector('.complete-button').addEventListener('click',
function() {
const index = tasks.findIndex(task => task.text === taskText &&
task.priority === priority);
if (index !== -1) {
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
}
});
taskItem.querySelector('.delete-button').addEventListener('click',
function() {
const index = tasks.findIndex(task => task.text === taskText &&
task.priority === priority);
if (index !== -1) {
tasks.splice(index, 1);
saveTasks();
renderTasks();
}
});

return taskItem;
}

function renderTasks() {
highPriorityTasks.innerHTML = '';
mediumPriorityTasks.innerHTML = '';
lowPriorityTasks.innerHTML = '';
tasks.forEach(task => {
const taskItem = createTaskElement(task.text, task.priority,
task.completed);
if (task.priority === 'high') {
highPriorityTasks.appendChild(taskItem);
} else if (task.priority === 'medium') {
mediumPriorityTasks.appendChild(taskItem);
} else {
lowPriorityTasks.appendChild(taskItem);
}
});
}

function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function loadTasks() {
const storedTasks = localStorage.getItem('tasks');
if (storedTasks) {
tasks = JSON.parse(storedTasks);
renderTasks();
}
}

loadTasks();
</script>

You might also like