【每日一练】242—JS实现一款列表添加效果

每日一练7个月前更新 admin
1,296 0

第242练的最终效果如下:

【每日一练】242—JS实现一款列表添加效果

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>
    <link
      rel=”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”>
      <input
        type=”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));
}
© 版权声明

相关文章

暂无评论

暂无评论...