Untitled

index
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


    <h1>To-Do List</h1>
 <div class="container">
  <form action="#">
    <input type="text" name="item" id="item" placeholder="Add New" />
    <input type="date" id="date" name="to-do-start" value="2018-07-22">
    <button type="button" id="add-me-button" class="add-me-button">Add Me</button>
  </form>

<ul id="list"></ul>

</div>

<script src="js.js"></script>
</body>
</html>
=====

style
body {
    background: #eee;
    color: #444;
    font-family: 'Helvetica', arial, sans-serif;
  }


  .container {
    background: #fff;
    max-width: 600px;
    width: 100%;
    display: table;
    margin: 0 auto;
    margin-top: 40px;
    border: 2px solid #cfcbcc;
  }

  .add-me-button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    margin: 20px;
    padding: 10px;
  }

  .add-me-button:hover {
    background-color: rgb(175, 30, 156);
    color: white;
  }
  input {
    border: none;
    display: block;
    width: 98.4%;
    line-height: 1.5;
    padding: 8px 0 8px 10px;
    border-bottom: 1px solid #cfcbcc;
    outline: 0;
  }
  h1, h2 {
    text-align: center;
    margin-bottom: 0px;
    line-height: 1;
  }
  h2 {
    color: gray;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  ul li {
    color: #899098;
    font-weight: 400;
    border-bottom: 1px solid #cfcbcc;
    line-height: 1.5;
    padding: 8px 0;
  }
  ul li:before {
    content: "\25A1";
    padding: 10px 10px;
    font-size: 20px;
  }
  ul li:hover {
    text-decoration: line-through;
    cursor: pointer;
  }
  ul li:last-child {
    border-bottom: none;
  }
  .checked {
    color: green;
  }
  .checked:before {
    content: "\2713";
    padding: 10px;
    font-size: 20px;
  }
  .checked:hover {
    text-decoration: none;
  }
  .checked:hover:after {
    content: " (click to remove this)";
    color: tomato;
    text-align: right;
  }

===

js
(function(){

    var list = document.querySelector('#list');
    var form = document.querySelector('form');
    var item = document.querySelector('#item');
    var date = document.getElementById('date').value;
    var collection = [];

    /*
    form.addEventListener('submit',function(e){
      e.preventDefault();
      list.innerHTML += ` <li> <b>Name: </b>${item.value} <br> <b>Deadline:</b> ${date} </li> `;
      collection.push({item,date});
      console.log(collection);

      store();
      item.value = "";
    },false) */

    var addButton = document.getElementById("add-me-button");

    function myFunction() {
        list.innerHTML += `<li><b>Name: </b>${item.value} / <b>Deadline:</b> ${date} </li> `;
        collection.push({item,date});
        store();
        item.value = "";
        date.value = "";
    }

    addButton.addEventListener('click', () => {
        var title = document.querySelector('#item');

        var flag = false;

        for (i = 0; i < collection.length; i++) {
            if (collection[i].item == title && collection[i].date == date) {
                flag = true;
            }
        }

        if (collection.length > 0 && flag == true) {
            alert("You cannot add two identical items for the same date sorry.");
        }

        if (flag == false && title != '' && date != '') {
            myFunction();
        }
    })

    list.addEventListener('click',function(e){
      var t = e.target;
      if(t.classList.contains('checked')){
        t.parentNode.removeChild(t);
      } else {
        t.classList.add('checked');
      }
      store();
    },false)

    function store() {
      window.localStorage.myitems = list.innerHTML;
    }

    function getValues() {
      var storedValues = window.localStorage.myitems;
      if(!storedValues) {
        list.innerHTML = '<li><b>Name: </b> Some item here / <b>Deadline: </b> 2018-07-22</li>';
      }
      else {
        list.innerHTML = storedValues;
      }
    }
    getValues();
  })();