<div class="container">
      <header class="header">
        <h1 class="header__logo">To-do List</h1>
        <a class="header__button" href="#">+</a>
      </header>
      <div class="input__container">
        <div class="message"></div>
        <input type="text" id="text" />
      </div>
      <div class="content">
        <ul class="content__list"></ul>
      </div>
      <div class="footer"></div>
    </div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: "Lexend Deca", sans-serif;
}

.hide {
    display: none;
}

.finished {
    text-decoration: line-through !important;
}

.notFinished {
    text-decoration: none;
}

.hideHeight {
    height: calc(100vh - 100px) !important;
}

.container {
    background: #eee;
    width: 400px;
    margin: auto;
    height: 100vh;
    position: relative;
}

.header {
    background: #192a56;
    height: 50px;
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
}

.input__container {
    position: relative;
}

.content {
    overflow: auto;
    height: calc(100vh - 143px);
}

.footer {
    background: #192a56;
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 10px;
    color: #fff;
    align-items: center;
    justify-content: center;
}

.header__logo {
    color: #fff;
}

.header__button:link,
.header__button:visited {
    color: #fff;
    font-size: 40px;
    text-decoration: none;
    padding-bottom: 5px;
}

.input__container input {
    display: block;
    height: 100%;
    width: 100%;
    border: none;
    padding: 10px;
    outline: 0;
    color: #fff;
    font-size: 18px;
    font-family: "Lexend Deca", sans-serif;
    background: #273c75;
}

.content__list {
    list-style: none;
}

.content__list--item {
    padding: 10px;
    color: #fff;
}

.wraper {
    display: flex;
}

.wraper:nth-child(odd) {
    background: #485460;
}

.wraper:nth-child(even) {
    background: #1e272e;
}

.wraper:hover .remove {
    width: 40px;
    color: #fff;
    font-size: 18px;
}

.remove {
    background: #eb2f06;
    width: 0px;
    color: #fff;
    font-size: 0px;
    transition: width 0.4s;
    will-change: width;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}

.message {
    height: 100%;
    width: 0;
    background: #000;
    position: absolute;
    will-change: width;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: width .4s;
    transition: font-size .1s .2s;

}

@media(max-width:463px) {
    .container {
        width: 100%;
    }

    .content__list--item {
        padding: 15px;
    }
}

/* #f8d7da */
/* #d4edda */
/*# sourceMappingURL=main.css.map */

const inputToggle = document.querySelector('.header__button');
const text = document.getElementById('text');
const ul = document.querySelector('.content__list');
inputToggle.addEventListener('click', function() {
  document.querySelector('.input__container').classList.toggle('hide');
  document.querySelector('.content').classList.toggle('hideHeight');
});

text.addEventListener('keypress', function(e) {
  if (e.keyCode === 13) {
    if (
      !text.value.trim() ||
      text.value.trim().length < 3 ||
      text.value.trim().length > 20
    ) {
      showMessage('At Least 3 Character And 20 For Max', '#721c24', '#f8d7da');
    } else {
      addItem(text.value);
      showMessage('To Do Added Successfully', '#155724', '#d4edda');
    }
  }
});

function addItem(data) {
  document.querySelector('.content__list').innerHTML += `
<div class="wraper">
            <div class="remove fas fa-trash"></div>
            <li class="content__list--item">${data}</li>
          </div>
`;
  addToLocale(data);
  count();
  text.value = null;
}

ul.addEventListener('click', e => {
  if (e.target.classList.contains('remove')) {
    e.target.parentElement.remove();
    delFromLocal2(e.target.parentElement.children[1].textContent);
    showMessage('To Do Deleted Successfully', '#004085', '#cce5ff');
  }
  if (e.target.classList.contains('content__list--item')) {
    e.target.classList.toggle('finished');
    if (e.target.classList.contains('finished')) {
      delFromLocal(e.target.parentElement.children[1].textContent, true);
      showMessage('To Do Is Checked Successfully', '#004085', '#cce5ff');
    } else {
      delFromLocal(e.target.parentElement.children[1].textContent, false);
      showMessage('To Do Is Unchecked Successfully', '#004085', '#cce5ff');
    }
    console.log('g');
  }
});

function addToLocale(data) {
  let arr = [];
  if (localStorage.getItem('todo')) {
    arr = JSON.parse(localStorage.getItem('todo'));
  }
  arr.push({ text: data, isChecked: false });
  localStorage.setItem('todo', JSON.stringify(arr));
}

document.addEventListener('DOMContentLoaded', loadfromlocal);
function loadfromlocal() {
  let data = JSON.parse(localStorage.getItem('todo'));
  document.querySelector('.content__list').innerHTML = null;
  if (data) {
    data.forEach(function(todo) {
      document.querySelector('.content__list').innerHTML += `
            <div class="wraper">
                        <div class="remove fas fa-trash "></div>
                        <li class="content__list--item ${
                          todo.isChecked ? 'finished' : 'notFinished'
                        }">${todo.text}</li>
                      </div>
            `;
    });
  }
  count();
}

function delFromLocal(item, status) {
  let arr = JSON.parse(localStorage.getItem('todo'));
  if (arr) {
    for (let i = 0; i < arr.length; i++) {
      if (item === arr[i].text) {
        arr[i].isChecked = status;
        localStorage.setItem('todo', JSON.stringify(arr));
        break;
      }
    }
  }
  //   count();
}

function count() {
  let a = JSON.parse(localStorage.getItem('todo'));
  if (a) {
    document.querySelector('.footer').textContent = `There Is ${a.length} Todo`;
  } else {
    document.querySelector('.footer').textContent = `There Is 0 Todo`;
  }
}

function showMessage(message, color, bgcolor) {
  let output = document.querySelector('.message');
  output.style.backgroundColor = bgcolor;
  output.style.color = color;
  output.style.width = '100%';
  output.style.fontSize = '17px';
  output.textContent = message;
  setTimeout(() => {
    output.style.backgroundColor = 'none';
    output.style.fontSize = '0';
    output.style.width = '0';
    output.textContent = null;
  }, 3000);
}

function delFromLocal2(item) {
  let arr = JSON.parse(localStorage.getItem('todo'));
  if (arr) {
    for (let i = 0; i < arr.length; i++) {
      if (item === arr[i].text) {
        arr.splice(i, 1);
        localStorage.setItem('todo', JSON.stringify(arr));
        break;
      }
    }
  }
  count();
}