第242练的最终效果如下：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta http-equiv=”X-UA-Compatible” content=”IE=edge” /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><title>第242练</title><linkrel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css”integrity=”sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==”crossorigin=”anonymous”referrerpolicy=”no-referrer”/><link rel=”stylesheet” href=”index.css” /></head><body><form class=”form”><inputtype=”text”class=”input”placeholder=”Enter your task”autocomplete=”off”/><ul class=”list”></ul></form><script src=”index.js”></script></body></html>
CSS:
body{margin: 0;display: flex;justify-content: center;background-color: #fafafa;}.form{position: absolute;top: 30%;box-shadow: 0 4px 8px rgba(0,0,0,.3);width: 400px;background-color:yellow;border-radius: 10px;}.input{width: 100%;box-sizing: border-box;padding: 20px;border-radius: 10px 10px 0 0;border: none;font-size: 20px;font-family: cursive;}.input::placeholder{color: lightgray;}.list{padding: 0;margin: 0;}.list li{list-style-type: none;padding: 20px;font-family: cursive;border-top: dotted;border-color: darkgray;position: relative;}.list li .fa-trash{color: red;position: absolute;right: 20px;top: 50%;transform: translateY(-50%);cursor: pointer;}.list li .fa-check-square{color: green;position: absolute;right: 40px;top: 50%;transform: translateY(-50%);cursor: pointer;}.list li.checked {color: darkgray;text-decoration: line-through;}.list li.checked .fa-check-square{color: darkgray;}
JS:
const formEl = document.querySelector(“.form”);const inputEl = document.querySelector(“.input”);const ulEl = document.querySelector(“.list”);let list = JSON.parse(localStorage.getItem(“list”));if (list) {list.forEach((task) => {toDoList(task);});}formEl.addEventListener(“submit”, (event) => {event.preventDefault();toDoList();});function toDoList(task) {let newTask = inputEl.value;if (task) {newTask = task.name;}const liEl = document.createElement(“li”);if (task && task.checked) {liEl.classList.add(“checked”);}liEl.innerText = newTask;ulEl.appendChild(liEl);inputEl.value = “”;const checkBtnEl = document.createElement(“div”);checkBtnEl.innerHTML = `<i class=”fas fa-check-square”>`;liEl.appendChild(checkBtnEl);const trashBtnEl = document.createElement(“div”);trashBtnEl.innerHTML = `<i class=”fas fa-trash”></i>`;liEl.appendChild(trashBtnEl);checkBtnEl.addEventListener(“click”, () => {liEl.classList.toggle(“checked”);updateLocalStorage();});trashBtnEl.addEventListener(“click”, () => {liEl.remove();updateLocalStorage();});updateLocalStorage();}function updateLocalStorage() {const liEls = document.querySelectorAll(“li”);list = [];liEls.forEach((liEl) => {list.push({name: liEl.innerText,checked: liEl.classList.contains(“checked”),});});localStorage.setItem(“list”, JSON.stringify(list));}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
