Skip to content

Commit

Permalink
Updated styles for mobile and desktop versions
Browse files Browse the repository at this point in the history
  • Loading branch information
@RinaGal
RinaGal committed Sep 20, 2024
1 parent f408f70 commit 5467529
Show file tree
Hide file tree
Showing 3 changed files with 318 additions and 143 deletions.
60 changes: 41 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,55 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>
TodoList
</title>
<title>TodoList</title>
</head>
<body>


<div id="container">
<h1>My Tasks</h1>
<div class="task-input">
<input type="text" placeholder="Enter a new task">
<select id="category">
<option value="" disabled selected hidden>Select category</option> <!-- placeholder по умолчанию -->
<option value="Work">Work</option>
<option value="Personal">Personal</option>
<option value="Shopping">Shopping</option>
<option value="Other">Other</option>
</select>
<button>Add</button>

<!-- Container for category selection and Add button -->
<div class="input-controls">
<select id="category">
<option value="" disabled selected hidden>Select category</option>
<option value="Work">Work</option>
<option value="Personal">Personal</option>
<option value="Shopping">Shopping</option>
<option value="Other">Other</option>
</select>
<button>Add</button>
</div>
</div>

<ul id="task-list"></ul>

<!-- Container for sorting and delete completed tasks -->
<div class="sort-delete-container">
<div class="sort-tasks">
<label for="sort">Sort:</label>
<select id="sort">
<option value="date">Date Created</option>
<option value="alphabetical">Alphabetical (A-Z)</option>
<option value="reverse-alphabetical">Alphabetical (Z-A)</option>
<option value="category">Category</option>
</select>
</div>
<button id="delete-completed">Delete Completed</button>
</div>

<!-- This is where the tasks are displayed -->
<ul id="task-list">
<!-- Example task structure -->
<li>
<span>Task Description</span>
<span class="category">Work</span>
<button class="complete-button">Complete</button>
<button class="edit-button">Edit</button>
<button class="delete-button">Delete</button>
</li>
<!-- Additional tasks will be added here dynamically -->
</ul>
</div>




<script src="script.js"></script>
</body>
</html>
</html>
145 changes: 106 additions & 39 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,52 @@
// Get the input field, button, and task list
// Get input field, add button, task list, category select, sort select, and delete completed button
const inputField = document.querySelector('input[type="text"]');
const addButton = document.querySelector('button');
const taskList = document.querySelector('#task-list');
const categorySelect = document.querySelector('#category');
const sortSelect = document.querySelector('#sort'); // Select for sorting tasks
const deleteCompletedButton = document.querySelector('#delete-completed'); // New button for deleting completed tasks

// Function to save tasks to localStorage
// Array to store all tasks
let tasks = [];

// Save tasks to localStorage
function saveTasks() {
const tasks = [];
document.querySelectorAll('#task-list li').forEach(taskItem => {
const taskText = taskItem.querySelector('span').textContent;
const taskCategory = taskItem.querySelector('.category').textContent;
const isCompleted = taskItem.classList.contains('completed');
tasks.push({ text: taskText, category: taskCategory, completed: isCompleted });
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Function to load tasks from localStorage
// Load tasks from localStorage
function loadTasks() {
const savedTasks = JSON.parse(localStorage.getItem('tasks'));
if (savedTasks) {
savedTasks.forEach(task => {
addTask(task.text, task.category, task.completed);
});
tasks = savedTasks;
renderTasks();
}
}

// Function to add a task
function addTask(taskText, taskCategory, isCompleted = false) {
// Show tasks in the list
function renderTasks() {
taskList.innerHTML = ''; // Clear the current list
tasks.forEach(task => createTaskElement(task));
}

// Create a new task element
function createTaskElement(task) {
// Create a new list item (li)
const newTask = document.createElement('li');

// Create a span for the task text
const taskSpan = document.createElement('span');
taskSpan.textContent = taskText;
taskSpan.textContent = task.text;

// Create a span for the category
const categorySpan = document.createElement('span');
categorySpan.textContent = taskCategory;
categorySpan.textContent = task.category;
categorySpan.classList.add('category');
categorySpan.style.marginLeft = '10px';
categorySpan.style.fontStyle = 'italic';
categorySpan.style.color = '#888';

// Create the delete button
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.style.marginLeft = '10px';
Expand All @@ -49,6 +56,7 @@ function addTask(taskText, taskCategory, isCompleted = false) {
deleteButton.style.cursor = 'pointer';
deleteButton.style.borderRadius = '5px';

// Create the edit button
const editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.style.marginLeft = '10px';
Expand All @@ -58,77 +66,136 @@ function addTask(taskText, taskCategory, isCompleted = false) {
editButton.style.cursor = 'pointer';
editButton.style.borderRadius = '5px';

// Create the complete button
const completeButton = document.createElement('button');
completeButton.textContent = isCompleted ? 'Uncomplete' : 'Complete';
completeButton.textContent = task.completed ? 'Uncomplete' : 'Complete';
completeButton.style.marginLeft = '10px';
completeButton.style.backgroundColor = isCompleted ? '#95a5a6' : '#2ecc71';
completeButton.style.backgroundColor = task.completed ? '#95a5a6' : '#2ecc71';
completeButton.style.color = 'white';
completeButton.style.border = 'none';
completeButton.style.cursor = 'pointer';
completeButton.style.borderRadius = '5px';

if (isCompleted) {
// If task is completed, style it differently
if (task.completed) {
newTask.classList.add('completed');
taskSpan.style.textDecoration = 'line-through';
}

// Add all elements to the new task (li)
newTask.appendChild(taskSpan);
newTask.appendChild(categorySpan);
newTask.appendChild(completeButton);
newTask.appendChild(editButton);
newTask.appendChild(deleteButton);

// Add the new task to the task list (ul)
taskList.appendChild(newTask);

// Delete task
// Delete the task
deleteButton.addEventListener('click', function() {
taskList.removeChild(newTask);
// Remove task from array
tasks = tasks.filter(t => t !== task);

// Save updated tasks to localStorage
saveTasks();

// Re-render tasks to reflect changes
renderTasks();
});

// Edit task
// Edit the task
editButton.addEventListener('click', function() {
const newText = prompt('Edit your task:', taskSpan.textContent);
const newText = prompt('Edit your task:', task.text);
if (newText !== null && newText.trim() !== '') {
taskSpan.textContent = newText;
task.text = newText; // Update the task text in memory
saveTasks();
renderTasks(); // Re-render tasks to reflect changes
}
});

// Mark task as complete/incomplete
// Mark the task as complete or incomplete
completeButton.addEventListener('click', function() {
newTask.classList.toggle('completed');
const isNowCompleted = newTask.classList.contains('completed');
taskSpan.style.textDecoration = isNowCompleted ? 'line-through' : 'none';
completeButton.textContent = isNowCompleted ? 'Uncomplete' : 'Complete';
completeButton.style.backgroundColor = isNowCompleted ? '#95a5a6' : '#2ecc71';
task.completed = !task.completed; // Toggle completed status
saveTasks();
renderTasks(); // Re-render tasks to reflect changes
});

saveTasks();
}

// Add new task on button click
// Add new task when the "Add" button is clicked
addButton.addEventListener('click', function() {
const taskText = inputField.value;
const taskCategory = categorySelect.value;
const taskText = inputField.value; // Get task text
const taskCategory = categorySelect.value; // Get selected category

// Check if the input is empty
if (taskText === '') {
alert('Please enter a task');
return;
}

// Check if a category is selected
if (taskCategory === '') {
alert('Please select a category');
return;
}

addTask(taskText, taskCategory);
// Create new task object
const newTask = {
text: taskText,
category: taskCategory,
completed: false,
timestamp: Date.now()
};

// Add the task to array and save
tasks.push(newTask);
saveTasks();
createTaskElement(newTask); // Create a new task element

// Сброс поля ввода и категории
inputField.value = ''; // Clear the input field
categorySelect.value = ''; // Reset the category selection
});

// Load tasks from localStorage when the page loads
// Delete all completed tasks when the "Delete Completed Tasks" button is clicked
deleteCompletedButton.addEventListener('click', function() {
// Remove completed tasks from the tasks array
tasks = tasks.filter(task => !task.completed);

// Save updated tasks to localStorage
saveTasks();

// Re-render tasks
renderTasks();
});

// Sort tasks based on selected type
function sortTasks(type) {
switch (type) {
case 'alphabetical':
tasks.sort((a, b) => a.text.localeCompare(b.text)); // Sort by text A-Z
break;
case 'reverse-alphabetical':
tasks.sort((a, b) => b.text.localeCompare(a.text)); // Sort by text Z-A
break;
case 'category':
tasks.sort((a, b) => a.category.localeCompare(b.category)); // Sort by category
break;
case 'date':
tasks.sort((a, b) => a.timestamp - b.timestamp); // Sort by date (oldest first)
break;
case 'date-reverse':
tasks.sort((a, b) => b.timestamp - a.timestamp); // Sort by date (newest first)
break;
default:
break;
}
renderTasks(); // Re-render tasks after sorting
}

// When the sort type is changed, sort tasks
sortSelect.addEventListener('change', function() {
sortTasks(this.value);
});

// Load tasks when the page loads
loadTasks();
Loading

0 comments on commit 5467529

Please sign in to comment.