如何使用 JavaScript 动态应用 CSS 到待办事项列表？

问题描述 投票：0回答：1

我正在练习创建一个基本的待办事项网络应用程序，但我不知道如何制作它，以便之后我单击“提交”，它会创建另一个任务而不是替换现有的任务，我尝试动态创建另一个列表，但即使我绝对定位它，它也会与现有列表重叠，并且我希望它看起来相同，以复制完全相同的 CSS 样式，但无论我在输入框中键入什么内容，您可以吗帮我？ 这是我试图让它看起来如何的一个例子： Example

这是代码

//Dark mode background colors
document.addEventListener("DOMContentLoaded", function () {
  const darkModeToggle = document.getElementById("darkmode-toggle");
  const body = document.body;

  darkModeToggle.addEventListener("change", function () {
    if (this.checked) {
      body.classList.add("dark-mode");
    } else {
      body.classList.remove("dark-mode");
    }
  });
});

//Window pop up when clicking new button
document.addEventListener("DOMContentLoaded", function () {
  const newButton = document.getElementById("new-btn");
  const wholeContainer = document.querySelector(".whole-container");
  const submitButton = document.querySelector(".submit-btn");
  const taskNameInput = document.getElementById("taskName");
  const taskDayInput = document.getElementById("taskDay");
  const taskDateInput = document.getElementById("taskDate");
  const taskNameSpan = document.getElementById("task-name");
  const taskDaySpan = document.getElementById("task-day");
  const taskDateSpan = document.getElementById("task-date");
  const checkboxInput = document.getElementById("check-mark");

  function showWholeContainer() {
    wholeContainer.style.visibility = "visible";
    wholeContainer.style.opacity = "1";
    newButton.disabled = true;

    // Add event listener to close the window when clicking outside of it
    document.addEventListener("click", clickOutsideHandler);
  }

  function hideWholeContainer() {
    wholeContainer.style.opacity = "0";
    setTimeout(() => {
      wholeContainer.style.visibility = "hidden";
      newButton.disabled = false;
    }, 200);

    // Remove the event listener to prevent unnecessary checks
    document.removeEventListener("click", clickOutsideHandler);
  }

  function clickOutsideHandler(event) {
    if (!wholeContainer.contains(event.target) && event.target !== newButton) {
      hideWholeContainer();
    }
  }

  function resetForm() {
    taskNameInput.value = ""; // Clear task name input
    taskDayInput.value = ""; // Clear task date input
    taskDateInput.value = ""; // Clear task date input
  }

  function showTaskList() {
    const wholeContainerTwo = document.querySelector(".whole-container-two");
    wholeContainerTwo.style.visibility = "visible";
    wholeContainerTwo.style.opacity = "1";
  }

  function validateForm() {
    if (
      taskNameInput.value.trim() === "" ||
      taskDayInput.value.trim() === "" ||
      taskDateInput.value.trim() === ""
    ) {
      alert("Please fill out task name, day, and task date fields.");
      return false;
    }
    return true; // Return true if form is valid
  }

  newButton.addEventListener("click", function () {
    showWholeContainer();
  });

  checkboxInput.addEventListener("change", function () {
    if (this.checked) {
      taskNameSpan.classList.add("checked");
    } else {
      taskNameSpan.classList.remove("checked");
    }
  });

  submitButton.addEventListener("click", function (event) {
    event.preventDefault();
    if (validateForm()) {
      taskNameSpan.textContent = taskNameInput.value;
      taskDaySpan.textContent = taskDayInput.value;
      taskDateSpan.textContent = taskDateInput.value;
      resetForm();
      showTaskList();
      hideWholeContainer();
    }
  });

  hideWholeContainer(); // Initially hide the container
});
header {
  position: fixed;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  background-color: #f1ebdd;
  overflow-x: hidden;
}

/*header*/

.nav-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  flex: space-between;
  align-items: flex-start;
  z-index: 2;
}

.nav-container button {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  border-radius: 25px;
  border-color: transparent;
  background-color: #58585a;
  color: #f1ebdd;
  cursor: pointer;
}

.nav-container button:hover {
  background-color: #f1ebdd;
  color: #58585a;
  transition: 0.6ms;
}

.user-btn {
  margin: 45px 0px 0px 50px;
  padding: 25px 80px 25px 80px;
}

.mylist-btn {
  margin: 45px 0px 0px 50px;
  padding: 10% 25% 10% 26%;
}

.categories-btn {
  margin: 45px 0px 0px 50px;
  padding: 10% 20% 10% 21%;
}

.calendar-btn {
  margin: 45px 0px 0px 50px;
  padding: 10% 23% 10% 25%;
}

.settings-btn {
  margin: 45px 0px 0px 50px;
  padding: 10% 23% 10% 26%;
}

.about-btn {
  margin: 45px 0px 0px 50px;
  padding: 10% 23% 10% 23%;
}

/*Day/night Switch*/

.label-data {
  display: block;
  position: absolute;
  cursor: pointer;
  margin: 775px 0% 0% 50px;
  width: 200px;
  height: 80px;
  border-radius: 200px;
  background-color: #f1ebdd;
  box-shadow: inset 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.label-data:after {
  position: absolute;
  content: "";
  width: 80px;
  height: 80px;
  top: 0px;
  left: 0px;
  border-radius: 180px;
  background: linear-gradient(180deg, rgb(255, 170, 58), #d8a80b);
}

.input-data {
  visibility: hidden;
  width: 0;
  height: 0;
}

.input-data:checked + .label-data {
  background: #242424;
}

.input-data:checked + .label-data:after {
  left: 200px;
  transform: translateX(-100%);
  background: linear-gradient(180deg, #a3a3a3, #353535);
}

.label-data,
.label-data:after {
  transition: 0.4s;
}

.label-data:active:after {
  width: 50px;
}

.label-data svg {
  position: absolute;
  width: 70px;
  top: 5px;
  z-index: 100;
}

.label-data svg.sun {
  left: 5px;
  fill: #f1ebdd;
  border-radius: 50px;
  transition: 0.4s;
}

.label-data svg.moon {
  left: 125px;
  fill: #333333;
  transition: 0.4s;
}

.input-data:checked + .label-data svg.sun {
  fill: #242424;
}

.input-data:checked + .label-data svg.moon {
  fill: #f1ebdd;
}

.input-data:checked + .label-data + .background {
  background: #242424;
}

/*sidebar fixed background color*/

.sidebar-background h1 {
  position: fixed;
  padding: 40% 7% 10% 10%;
  margin: -1% 90% 0% 0%;
  background-color: #dbd8d3;
  z-index: 1;
}

/*to-do list app*/

.todo-container {
  position: absolute;
  margin: 70px 0px 0px 90%;
  z-index: 100;
}

.todo-container .new {
  padding: 3px 18px 3px 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  border-radius: 25px;
  color: #f1ebdd;
  background-color: #4eaabe;
  border-color: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: 0.8s;
}

.todo-container .new:hover {
  padding: 5px 25px 5px 25px;
  transition: 0.8s;
}

/*to-do list app window pop up*/

.whole-container {
  display: hidden;
  opacity: 0;
  transition: visibility 0.8s ease, opacity 0.2s ease;
}

.hidden {
  /*JavaScript code*/
  display: none;
}

.window-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 150px 150px;
  border-radius: 25px;
  background-color: #dbd8d3;
  transition: 0.4s;
  z-index: 1000;
}

.window-wrapper .form-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  gap: 25px;
  width: 150%;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  border-radius: 25px;
}

.form-data label {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: #f1ebdd;
  border-radius: 25px;
  padding: 10px;
  background-color: #58585a;
}

.form-data input {
  border-color: transparent;
  border-radius: 25px;
  font-size: 20px;
  padding: 10px;
  color: #58585a;
  background-color: #f1ebdd;
  outline-color: #58585a;
}

.form-data .submit-btn {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  border-radius: 25px;
  border-color: transparent;
  background-color: #58585a;
  color: #f1ebdd;
  cursor: pointer;
}

/*to-do list after window*/

.whole-container-two {
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.8s ease, opacity 0.2s ease;
}

.task-wrapper {
  position: absolute;
  margin: 177px 0% 0% 20%;
  padding: 0% 1% 0% 0%;
  border-radius: 25px;
  background-color: #4eaabe;
  z-index: -50;
}

.task-wrapper ul {
  list-style-type: none;
}

.task-list li {
  margin: 0px 0px 0px 30px;
}

.todo-item span {
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark-label {
  position: absolute;
  cursor: pointer;
}

.fa-circle-check {
  margin: -8px 0px 0px -60px;
  font-size: 40px;
  color: #f1ebdd;
  background-color: #f1ebdd;
  border-radius: 25px;
}

.checkbox-input:checked + .checkmark-label .fa-circle-check {
  color: #ace464;
  background-color: transparent;
  transition: 0.2s;
}

.todo-item .task-date-list {
  position: absolute;
  margin: -60px 0% 0% -70px;
  padding: 5px 1% 5px 1%;
  font-size: 20px;
  color: #bcb7af;
  z-index: -50;
}

.task-name-list {
  color: #f1ebdd;
}

.task-name-list.checked {
  text-decoration-line: line-through;
}

.todo-item .task-day-list {
  position: absolute;
  margin: -100px 0% 0% -75px;
  padding: 5px 1% 5px 1%;
  font-size: 25px;
  color: #58585a;
  z-index: -50;
}

/* Dark mode background colors */
.dark-mode {
  background-color: #242424;
  transition: 0.4s;
}

.dark-mode .nav-container button {
  background-color: #242424;
  color: #f1ebdd;
}

.dark-mode .nav-container button:hover {
  background-color: #f1ebdd;
  color: #242424;
  transition: 0.6ms;
}

.dark-mode .input-data:checked + .label-data {
  background: #242424;
}

.dark-mode .input-data:checked + .label-data:after {
  background: linear-gradient(180deg, #6e46fd, #2f0ea5);
}

.dark-mode .input-data:checked + .label-data svg.sun {
  fill: #242424;
}

.dark-mode .input-data:checked + .label-data svg.moon {
  fill: #f1ebdd;
}

.dark-mode .sidebar-background h1 {
  background: linear-gradient(180deg, #6e46fd, #2f0ea5);
  transition: 0.4s;
}

.dark-mode .window-wrapper {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  padding: 150px 150px;
  border-radius: 25px;
  background: linear-gradient(180deg, #6e46fd, #2f0ea5);
  transition: 0.4s;
  z-index: 300;
}

.dark-mode .form-data label {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: #f1ebdd;
  border-radius: 25px;
  padding: 10px;
  background-color: #242424;
}

.dark-mode .form-data input {
  border-color: transparent;
  border-radius: 25px;
  font-size: 20px;
  padding: 10px;
  color: #242424;
  background-color: #f1ebdd;
  outline-color: #242424;
}

.dark-mode .form-data .submit-btn {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  border-radius: 25px;
  border-color: transparent;
  background-color: #242424;
  color: #f1ebdd;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyList: Enhanced to-do list app</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="script.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <script
      src="https://kit.fontawesome.com/3ba961a955.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <header>
      <!--Sidebar navigation-->
      <nav class="nav-container" role="button">
        <button type="button" class="user-btn">User</button>
        <button type="button" class="mylist-btn">My lists</button>
        <button type="button" class="categories-btn">Categories</button>
        <button type="button" class="calendar-btn">Calendar</button>
        <button type="button" class="settings-btn">Settings</button>
        <button type="button" class="about-btn">About us</button>
      </nav>
      <!--Day/night Switch-->
      <input class="input-data" type="checkbox" id="darkmode-toggle" />
      <label class="label-data" for="darkmode-toggle">
        <svg
          version="1.1"
          class="sun"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
          <g
            id="SVGRepo_tracerCarrier"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></g>
          <g id="SVGRepo_iconCarrier">
            <path
              d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
              stroke="#f1ebdd"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </g>
        </svg>
        <svg
          version="1.1"
          class="moon"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g id="SVGRepo_bgCarrier1" stroke-width="0"></g>
          <g
            id="SVGRepo_tracerCarrier2"
            stroke-linecap="round"
            stroke-linejoin="round"
          ></g>
          <g id="SVGRepo_iconCarrier3">
            <path
              d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z"
              stroke="#f1f1f1f1"
              stroke-width="0"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></path>
          </g>
        </svg>
      </label>
      <!--sidebar fixed background color-->
      <div class="sidebar-background">
        <h1></h1>
      </div>
    </header>
    <!--to-do list app-->
    <div class="todo-container">
      <button type="button" class="new" id="new-btn">New</button>
    </div>
    <!--to-do list app window pop up-->
    <div class="whole-container">
      <div class="window-wrapper">
        <form class="form-data">
          <label for="taskName">Task Name</label>
          <input
            type="text"
            id="taskName"
            name="taskName"
            placeholder="What's in your mind?"
          />
          <label for="taskDate">Task Date and Day</label>
          <input
            type="text"
            id="taskDate"
            name="taskDate"
            placeholder="Set a date for your task"
          />
          <input
            type="text"
            id="taskDay"
            name="taskDay"
            placeholder="Set a day for your task"
          />
          <button type="submit" class="submit-btn">Submit</button>
        </form>
      </div>
    </div>
    <!--to-do list after window-->
    <div class="whole-container-two">
      <div class="task-wrapper">
        <ul class="task-list">
          <li class="todo-item">
            <input type="checkbox" id="check-mark" class="checkbox-input" />
            <label for="check-mark" class="checkmark-label"
              ><i class="fa-solid fa-circle-check"></i
            ></label>
            <span class="task-day-list" id="task-day">Task Day</span>
            <span class="task-date-list" id="task-date">Task Date</span>
            <span class="task-name-list" id="task-name">Task Name</span>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

javascript html css
1个回答
0
投票

您永远不会真正将 new 元素添加到任务列表中。您只需更改现有一项任务的值即可。考虑创建一个任务数组，每次添加新任务时都会将其附加到该数组中。您可以从此数组中动态创建任务列表。这个简单的例子希望能帮助你弄清楚：

let tasks = [];
let form = document.querySelector('form');
let list = document.querySelector('.list');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let task_text = form.querySelector('#task_text').value;
  let task_date = form.querySelector('#task_date').value;
  tasks.push({
    text: task_text,
    date: task_date
  });
  form.reset();
  updateList();
});

function updateList() {
  list.innerHTML = '';
  tasks.forEach((task) => {
    let taskitem = document.createElement('li');
    taskitem.textContent = task.text + ' (' + task.date + ')';
    list.append(taskitem);
  });
}
<ul class="list"></ul>

<form>
  <input type="text" id="task_text" placeholder="What's in your mind?">
  <input type="text" id="task_date" placeholder="Task date">
  <button>Add Task</button>
</form>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.