html – JavaScript ToDo List Help- Priority and Date

//Selectors
var todoInput = document.querySelector(".todo-input");
var dateInput = document.querySelector(".todo-date");
var todoButton = document.querySelector(".todo-button");
var todoList = document.querySelector(".todo-list");
var filterOption = document.querySelector(".filter-todo");

//Event Listener
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);

//Functions

// Add ToDo Function
function addTodo(e) {
  // Prevent form from submitting
  e.preventDefault();
  // Todo Div
  var todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  // Create Li
  var newTodo = document.createElement("li");
  newTodo.innerText = todoInput.value;
  // Here is where to make input value append to list
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);

  // // Date Scroll
  // var newDate = document.createElement("input class=input input-date type=date")
  // newDate.classList.add("")

  // Completed Button
  var completedButton = document.createElement("button");
  completedButton.innerHTML = '<i class="fas fa-check"></i>';
  completedButton.classList.add("complete-btn");
  todoDiv.appendChild(completedButton);

  // Delete Button
  var trashButton = document.createElement("button");
  trashButton.innerHTML = '<i class="fas fa-trash"></i>';
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);

  // Append to List
  todoList.appendChild(todoDiv);
  // Clear Input Value
  todoInput.value = "";
}

function deleteCheck(e) {
  var item = e.target;
  // Delete Todo
  if (item.classList[0] === "trash-btn") {
    var todo = item.parentElement;
    // Animation
    todo.classList.add("fall");
    todo.addEventListener("transitionend", function () {
      todo.remove(); // Use this function to remove element after the transition
    });
  }

  // Check Todo
  if (item.classList[0] === "complete-btn") {
    var todo = item.parentElement;
    todo.classList.toggle("completed");
  }
}

function filterTodo(e) {
  var todos = todoList.childNodes;
  todos.forEach(function (todo) {
    switch (e.target.value) {
      case "all":
        todo.style.display = "flex";
        break;
      case "completed":
        if (todo.classList.contains("completed")) {
          todo.style.display = "flex";
        } else {
          todo.style.display = "none";
        }
        break;
      case "pending":
        if (!todo.classList.contains("completed")) {
          // add ! to check if it does not have the "completed"
          todo.style.display = "flex";
        } else {
          todo.style.display = "none";
        }
        break;
    } // reads value from the html div select values: all, completed &pending
  });
}
/* EVERY PAGE STYLING STARTS HERE */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap");

@media (max-width: 700px) {
  .text h1 {
    font-size: 20px;
  }
  .nav_links ul li {
    display: block;
  }
  body {
    background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
      url(./images/qap3_back.jpg);
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto Slab", serif;
  list-style: none;
  text-decoration: none;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  /* vh means viewport- percentage length based on the browsers default viewport size */
  width: 100%;
  /* background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); */
  background-image: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
    url(./images/qap3_back.jpg);
  background-position: center;
  background-size: cover;
}

.logo {
  display: grid;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  justify-content: left;
}

nav {
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: center;
}

nav img {
  width: 150px;
}

.nav_links {
  flex: 1;
  text-align: right;
}

.nav_links ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
}

.nav_links ul li a {
  color: rgb(248, 248, 248);
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
  font-family: "Roboto Slab", serif;
}

.nav_links ul li::after {
  content: "";
  width: 0%;
  height: 2px;
  background: #13707c;
  display: block;
  margin: auto;
  transition: 0.5s;
}

.nav_links ul li:hover::after {
  width: 100%;
}

/* Start of TODO List */

.list-container {
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

header h1 {
  color: #f7f7f7;
}

header {
  font-size: 2.5rem;
}

header,
form {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: #fff;
}

form button {
  color: #13707c;
  cursor: pointer;
  background: #fff;
  transition: all 0.3s ease;
}

form button:hover {
  background: #13707c;
  color: #fff;
}

.todo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.todo-list {
  min-width: 30%;
  list-style: none;
}

.todo {
  margin: 0.5rem;
  background: #fff;
  color: black;
  font-size: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s ease;
}

.todo li {
  flex: 1;
}

.trash-btn,
.complete-btn {
  background: #13707c;
  color: #fff;
  border: none;
  padding: 1rem;
  cursor: pointer;
  font-size: 1rem;
}

.complete-btn {
  background: #4db1be;
}

.todo-item {
  padding: 0rem 0.5rem;
}

/* Needed to add this because clicking icon wouldnt avtivate click function */
.fa-trash,
.fa-check {
  pointer-events: none;
}

/* complete-btn */
.completed {
  text-decoration: line-through;
  opacity: 0.7;
}

.fall {
  transform: translateY(8rem) rotateZ(20deg);
  opacity: 0;
}

/* Cant style select button so must remove styles and do some tricks */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
}

.select {
  margin: 1rem;
  position: relative;
  overflow: hidden;
}

select {
  color: #13707c;
  width: 10rem;
  cursor: pointer;
  padding: 1rem;
}

.select::after {
  content: "25BC";
  position: absolute;
  background: #13707c;
  top: 0;
  right: 0;
  padding: 1rem;
  pointer-events: none;
  transition: all 0.3 ease;
}

.select:hover::after {
  background: #fff;
  color: #13707c;
}
<!DOCTYPE html>
<html lang="en">
  3
  <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>QAP3-MARK HANNEM</title>
    <link rel="stylesheet" href="https://stackoverflow.com/questions/73086577/./todo.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <section class="header">
      <nav>
        <a href="index.html"
          ><img src="./images/garybluenew.png" class="logo"
        /></a>
        <div class="nav_links">
          <ul>
            <li><a href="./index.html">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">RECIPES</a></li>
          </ul>
        </div>
      </nav>
    </section>
    <!-- Start of TODO List -->
    <section class="list-container">
      <header>
        <h1>ToDo List</h1>
      </header>
      <form>
        <input type="text" class="todo-input" />
        <input type="date" class="date-input" />
        <div class="priority">
          <select name="priority" class="check_pty">
            <option value="low">Low</option>
            <option value="med">Med</option>
            <option value="high">High</option>
          </select>
        </div>
        <button class="todo-button" type="submit">
          <i class="fas fa-plus-square"></i>
        </button>
        <div class="select">
          <select name="todos" class="filter-todo">
            <option value="all">All</option>
            <option value="completed">Completed</option>
            <option value="pending">Pending</option>
          </select>
        </div>
      </form>
      <div class="todo-container">
        <ul class="todo-list"></ul>
      </div>
      <script src="./todo.js"></script>
    </section>
  </body>
</html>

Leave a Comment