<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<div class="text">
<input id="text-input" type="text" placeholder="Add a task">
<input id="date-input" type="date">
<input id="color-input" type="color">
<button onclick="addtask()">+Add</button>
</div>
<!--danh sách chứa nội dung task dc thêm vào-->
<ul id="list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
body{
text-align:center;
justify-content:center;
font-family:Arial;
}
.container{
background-Color:#d640d6;
width:700px;
height:500px;
}
h1{
color:white;
padding-top:30px;
font-size:60px;
}
.text{
background-color:white;
width:480px;
height:90px;
margin-top:30px;
margin-left:100px;
padding-left:20px;
padding-right:20px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
}
#text-input{
height:30px;
margin-top:25px;
background-color:#e3e6e4;
border:solid #e3e6e4;
}
#date-input{
height:32px;
background-color: lightgrey;
border:solid lightgrey;
}
#color-input{
height:28px;
}
button{
height:38px;
background-color:#a1eb8d;
border:solid #a1eb8d;
font-size:14px;
}
#list{
background-color:white;
width:480px;
height:90px;
margin-left:100px;
padding-left:20px;
padding-right:20px;
}
li:hover {
text-decoration:line-through;
cursor:pointer;
}
li {
text-align: left;
list-style-position: inside;
word-wrap: break-word;
margin: 20px 0;
}
ul {
padding:0;
}
let todoList = document.getElementById("list");
let colorList = document.querySelector('.container');
function addtask() {
let textInput = document.getElementById("text-input").value;
let dateInput = document.getElementById("date-input").value;
let colorInput = document.getElementById("color-input").value;
if (textInput.length > 0) {
//tạo một thẻ "li" mới và lưu trữ nó vào một biến.
const listItem = document.createElement("li");
//thêm văn bản đã gửi vào mục trong" danh sách
listItem.textContent = textInput + " " + dateInput;
//Đổi màu task
listItem.style.color = colorInput;
//thêm thẻ "li" vào thẻ "ul"
todoList.appendChild(listItem);
textInput.value = " ";
document.getElementById("text-input").value = "";
listItem.onclick = removeItem;
}
else {
alert("Hãy nhập một thứ gì đó");
}
}
function removeItem(event1) {
const completedTask = event1.target;
todoList.removeChild(completedTask);
}
function color1() {
colorList.style.backgroundColor = "#4287f5";
}
function color2() {
colorList.style.backgroundColor = "red";
}
function color3() {
colorList.style.backgroundColor = "green";
}
function color4() {
colorList.style.backgroundColor = "pink";
}
document.addEventListener("keyup", function(e) {
if (e.key === "Enter")
addTask();
else if (e.key === "y")
color1();
else if (e.key === "u")
color2();
else if (e.key === "i")
color3();
else if (e.key === "o")
color4();
});