todo list

cross browser issues with select box solved. ToDo inspired by DevEd youtube

by trentHarlem

HTML

<header>
      <h1>
        <i class="fas fa-clipboard-list"></i> ToDo List
        <i class="fas fa-pencil-alt"></i>
      </h1>
    </header>

    <form>
      <input id="itemInput" type="text" placeholder="Add an item" />
      <button id="submit" type="submit">
        <span>+</span>
      </button>
      <div class="select">
        <select name="todos" id="filter-todo" class="dropdown">
          <option value="all">All</option>
          <option value="completed">Completed</option>
          <option value="incomplete">Incomplete</option>
        </select>
      </div>
    </form>

    <div id="list-container">
      <ul id="list"></ul>
    </div>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: wheat;
  background-color: rgb(255, 167, 3);
  color: #333;
  min-height: 100vh;
  font: 1.5rem monospace;
  width: 100%;
}

header {
  min-height: 20vh;
}

form {
  min-height: 10vh;
}

header,
form {
  display: flex;
  justify-content: center;
  align-items: center;
}

form input,
form button {
  font-size: 1.5rem;
  padding: 0.5rem;
}

input {
  background-color: rgb(255, 255, 255);
  border: none;
}

input:focus {
  background-color: rgb(255, 255, 255);
}

form button {
  background-color: rgb(255, 255, 255);
  color: rgb(255, 167, 3);
  display: inline-block;
  border: none;
}

form button:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(255, 167, 3);
}

.fa-trash-alt,
.fa-square {
  pointer-events: none;
}

#list-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style-type: none;
  min-width: 30%;
}

.todo {
  display: flex;
  margin: 0.5rem;
  justify-content: space-around;
  background-color: #fff;
  align-items: center;
  transition: all ease-in-out 0.5s;
}

.todo li {
  transition: all ease-in-out 0.5s;
  padding: 0 0.5rem;
  flex: 1;
}

.delete-btn,
.completed-btn {
  border: none;
  color: white;
  font-size: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
  /* font-size: 1rem; */
}

.completed-btn {
  background-color: rgb(255, 167, 3);
  background-color: rgb(39, 223, 2);
}

.completed {
  background-color: rgba(43, 255, 0, 0.3);
  text-decoration: line-through;
}

.delete-btn {
  background-color: rgb(201, 138, 21);
}

.fa-trash-alt,
.fa-square {
  pointer-events: none;
}

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  cursor: pointer;
  color: rgb(255, 167, 3);
  width: 11rem;
  font-size: 1rem;
  padding: 0.9rem;
}

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

.select::after {
 ...

JavaScript

const input = document.getElementById('itemInput');
 const submit = document.getElementById('submit');
 const list = document.getElementById('list');
 const filter = document.getElementById('filter-todo');
 // full list of items
 const listItems = [];
 // full list of div 
 const listDivs = [];
 // for future UNDO option
 const TrashItems = [];

 submit.addEventListener('click', addItem);
 /* filter.addEventListener('click', filterList); */
 
 // change listener TYPE from CLICK to CHANGE
 filter.addEventListener('change', filterList, false);
// change back to CLICK TO REPRODUCE select list BUGs on chrome brave and safari

 function addItem(event) {
   let inputValue = input.value;
   //make sure no empty items can be added to the list
   // if (!inputValue) {
   //   alert('Please enter a value');
   // } else {
   // prevent the form from submitting by itself
   event.preventDefault();
   // create a div
   const todoDiv = document.createElement('div');
   todoDiv.classList.add('todo');
   // create a li
   const todoItem = document.createElement('li');
   todoItem.classList.add('todo-item');
   todoDiv.classList.add('incomplete');

   //add li to div
   todoDiv.appendChild(todoItem);
   // add user input to li

   //todoItem.append('test');
   todoItem.append(inputValue);
   // add item to array of items

   listItems.push(inputValue);
   // add item completed button
   const completedButton = document.createElement('button');
   completedButton.innerHTML = '_';
   completedButton.classList.add('completed-btn');
   todoDiv.appendChild(completedButton);
   let completed = false;
   completedButton.addEventListener('click', function complete(e) {
     if (completed == true) {
       completed = false;
       completedButton.innerHTML = '_';
       todoDiv.classList.remove('completed');
       todoDiv.classList.add('incomplete');
       console.log('complete', completed);
     } else {
       completed = true;
       todoDiv.classList.add('completed');
      ...