Wirawa24/index.html

## index.html
<!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 with Priority & Calendar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="todo-container">
    <h1>To-Do List</h1>
    <div class="input-section">
      <input type="text" id="taskInput" placeholder="Add a new task...">
      <input type="date" id="dueDate">
      <select id="priority">
        <option value="High">High</option>
        <option value="Medium">Medium</option>
        <option value="Low">Low</option>
      </select>
      <select id="category">
        <option value="Work">Work</option>
        <option value="Personal">Personal</option>
        <option value="Shopping">Shopping</option>
        <option value="Other">Other</option>
      </select>
      <button onclick="addTask()">Add</button>
    </div>
    <div class="filter-section">
      <label for="filter">Filter:</label>
      <select id="filter" onchange="filterTasks()">
        <option value="all">All</option>
        <option value="completed">Completed</option>
        <option value="pending">Pending</option>
        <option value="Work">Work</option>
        <option value="Personal">Personal</option>
        <option value="Shopping">Shopping</option>
        <option value="Other">Other</option>
      </select>
      <label for="sort">Sort:</label>
      <select id="sort" onchange="sortTasks()">
        <option value="none">None</option>
        <option value="priority">Priority</option>
        <option value="dueDate">Due Date</option>
        <option value="alphabetical">Alphabetical</option>
      </select>
    </div>
    <div class="search-section">
      <input type="text" id="searchBar" placeholder="Search tasks..." oninput="searchTasks()">
    </div>
    <div id="calendarView" class="calendar-section">
      <h3>Calendar View</h3>
      <div id="calendar"></div>
    </div>
    <ul id="taskList"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

## script.js
// Add a new task
function addTask() {
  const taskInput = document.getElementById('taskInput');
  const dueDate = document.getElementById('dueDate');
  const priority = document.getElementById('priority').value;
  const category = document.getElementById('category').value;
  const taskText = taskInput.value.trim();

  if (taskText === '') {
    alert('Please enter a task.');
    return;
  }

  const task = {
    text: taskText,
    dueDate: dueDate.value,
    priority,
    category,
    completed: false,
  };

  saveTask(task);
  appendTask(task);
  taskInput.value = '';
  dueDate.value = '';
}
// Sort tasks
function sortTasks() {
  const sortOption = document.getElementById('sort').value;
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  if (sortOption === 'priority') {
    tasks.sort((a, b) => {
      const priorities = { High: 3, Medium: 2, Low: 1 };
      return priorities[b.priority] - priorities[a.priority];
    });
  } else if (sortOption === 'dueDate') {
    tasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
  } else if (sortOption === 'alphabetical') {
    tasks.sort((a, b) => a.text.localeCompare(b.text));
  }

  // Clear and reload task list
  document.getElementById('taskList').innerHTML = '';
  tasks.forEach((task) => appendTask(task));
}
function updateCalendar() {
  const calendar = document.getElementById('calendar');
  calendar.innerHTML = '';

  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  const groupedTasks = tasks.reduce((acc, task) => {
    if (task.dueDate) {
      acc[task.dueDate] = acc[task.dueDate] || [];
      acc[task.dueDate].push(task.text);
    }
    return acc;
  }, {});

  for (const [date, tasks] of Object.entries(groupedTasks)) {
    const dateHeader = document.createElement('h4');
    dateHeader.textContent = date;

    const taskList = document.createElement('ul');
    tasks.forEach((task) => {
      const li = document.createElement('li');
      li.textContent = task;
      taskList.appendChild(li);
    });

    calendar.appendChild(dateHeader);
    calendar.appendChild(taskList);
  }
}

// Call updateCalendar whenever tasks change
function saveTask(task) {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));
  updateCalendar(); // Update calendar view
}

## style.css
/* Priority Dropdown */
.input-section select {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Calendar Section */
.calendar-section {
  margin-top: 20px;
  padding: 10px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.calendar-section h3 {
  text-align: center;
  margin-bottom: 10px;
}

## to-do-list.markdown

      
    Raw
  

              to-do-list.markdown
            
          
    To-Do List

A Pen by Wahyu Irawan on CodePen.
License.
	<!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 with Priority & Calendar</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<div class="todo-container">
	<h1>To-Do List</h1>
	<div class="input-section">
	<input type="text" id="taskInput" placeholder="Add a new task...">
	<input type="date" id="dueDate">
	<select id="priority">
	<option value="High">High</option>
	<option value="Medium">Medium</option>
	<option value="Low">Low</option>
	</select>
	<select id="category">
	<option value="Work">Work</option>
	<option value="Personal">Personal</option>
	<option value="Shopping">Shopping</option>
	<option value="Other">Other</option>
	</select>
	<button onclick="addTask()">Add</button>
	</div>
	<div class="filter-section">
	<label for="filter">Filter:</label>
	<select id="filter" onchange="filterTasks()">
	<option value="all">All</option>
	<option value="completed">Completed</option>
	<option value="pending">Pending</option>
	<option value="Work">Work</option>
	<option value="Personal">Personal</option>
	<option value="Shopping">Shopping</option>
	<option value="Other">Other</option>
	</select>
	<label for="sort">Sort:</label>
	<select id="sort" onchange="sortTasks()">
	<option value="none">None</option>
	<option value="priority">Priority</option>
	<option value="dueDate">Due Date</option>
	<option value="alphabetical">Alphabetical</option>
	</select>
	</div>
	<div class="search-section">
	<input type="text" id="searchBar" placeholder="Search tasks..." oninput="searchTasks()">
	</div>
	<div id="calendarView" class="calendar-section">
	<h3>Calendar View</h3>
	<div id="calendar"></div>
	</div>
	<ul id="taskList"></ul>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	// Add a new task
	function addTask() {
	const taskInput = document.getElementById('taskInput');
	const dueDate = document.getElementById('dueDate');
	const priority = document.getElementById('priority').value;
	const category = document.getElementById('category').value;
	const taskText = taskInput.value.trim();

	if (taskText === '') {
	alert('Please enter a task.');
	return;
	}

	const task = {
	text: taskText,
	dueDate: dueDate.value,
	priority,
	category,
	completed: false,
	};

	saveTask(task);
	appendTask(task);
	taskInput.value = '';
	dueDate.value = '';
	}
	// Sort tasks
	function sortTasks() {
	const sortOption = document.getElementById('sort').value;
	const tasks = JSON.parse(localStorage.getItem('tasks')) \|\| [];

	if (sortOption === 'priority') {
	tasks.sort((a, b) => {
	const priorities = { High: 3, Medium: 2, Low: 1 };
	return priorities[b.priority] - priorities[a.priority];
	});
	} else if (sortOption === 'dueDate') {
	tasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
	} else if (sortOption === 'alphabetical') {
	tasks.sort((a, b) => a.text.localeCompare(b.text));
	}

	// Clear and reload task list
	document.getElementById('taskList').innerHTML = '';
	tasks.forEach((task) => appendTask(task));
	}
	function updateCalendar() {
	const calendar = document.getElementById('calendar');
	calendar.innerHTML = '';

	const tasks = JSON.parse(localStorage.getItem('tasks')) \|\| [];
	const groupedTasks = tasks.reduce((acc, task) => {
	if (task.dueDate) {
	acc[task.dueDate] = acc[task.dueDate] \|\| [];
	acc[task.dueDate].push(task.text);
	}
	return acc;
	}, {});

	for (const [date, tasks] of Object.entries(groupedTasks)) {
	const dateHeader = document.createElement('h4');
	dateHeader.textContent = date;

	const taskList = document.createElement('ul');
	tasks.forEach((task) => {
	const li = document.createElement('li');
	li.textContent = task;
	taskList.appendChild(li);
	});

	calendar.appendChild(dateHeader);
	calendar.appendChild(taskList);
	}
	}

	// Call updateCalendar whenever tasks change
	function saveTask(task) {
	const tasks = JSON.parse(localStorage.getItem('tasks')) \|\| [];
	tasks.push(task);
	localStorage.setItem('tasks', JSON.stringify(tasks));
	updateCalendar(); // Update calendar view
	}
	/* Priority Dropdown */
	.input-section select {
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 5px;
	}

	/* Calendar Section */
	.calendar-section {
	margin-top: 20px;
	padding: 10px;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 5px;
	}

	.calendar-section h3 {
	text-align: center;
	margin-bottom: 10px;
	}