<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>To-Do List</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 750px;
padding: 15px;
margin: 15px auto;
position: relative;
top: 60px;
}
h1 {
text-align: center;
color: #333;
}
.input-container {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
input[type="text"] {
width: calc(100% - 50px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 10px; /* To create space for the fixed container */
}
ul li {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.remove {
color: #dc3545;
cursor: pointer;
}
.remove:hover {
color: #c82333;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">My Note</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<a class="navbar-brand" href="todo.html">To do</a>
<ul class="navbar-nav mr-auto"></ul>
<a class="navbar-brand" href="phone.html">Phone Book</a>
</div>
</nav>
<center>
<div class="container">
<h3>To-Do List</h3>
<div class="input-container">
<input type="text" id="taskInput" placeholder="Add a new task...">
<button onclick="addTask()">Add</button>
</div>
<ul id="taskList"></ul>
</div>
</center>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
loadTasks();
});
function addTask() {
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');
if (taskInput.value.trim() !== '') {
const li = document.createElement('li');
li.textContent = taskInput.value;
const removeButton = document.createElement('span');
removeButton.textContent = '✖';
removeButton.className = 'remove';
removeButton.onclick = function() {
if (confirm('Are you sure you want to delete this task?')) {
taskList.removeChild(li);
saveTasks();
}
};
li.appendChild(removeButton);
taskList.appendChild(li);
taskInput.value = '';
saveTasks();
}
}
function saveTasks() {
const taskList = document.getElementById('taskList');
const tasks = [];
taskList.querySelectorAll('li').forEach(task => {
tasks.push(task.firstChild.textContent);
});
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem('tasks'));
if (tasks) {
tasks.forEach(taskText => {
const taskList = document.getElementById('taskList');
const li = document.createElement('li');
li.textContent = taskText;
const removeButton = document.createElement('span');
removeButton.textContent = '✖';
removeButton.className = 'remove';
removeButton.onclick = function() {
if (confirm('Are you sure you want to delete this task?')) {
taskList.removeChild(li);
saveTasks();
}
};
li.appendChild(removeButton);
taskList.appendChild(li);
});
}
}
</script>
</body>
</html>