Local Storage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Local Storage and Event Delegation</title>

  <link rel="stylesheet" href="./styles.css"/>
</head>
<body>
  <h1 class="logo">//Sushi Night//</h1>

  <div class="menu">
    <img src="./img/sushi.png" alt="Sushi Logo" class="icon">

    <ul class="menu-list"></ul>

    <form class="add-items">
      <input type="text" name="add-item" class="item-name" placeholder="Item Name" />
      <input type="submit" class="btn" value="+ Add Item" />
    </form>
  </div>

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

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

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

body {
  background: url('./img/bg.jpg') no-repeat;
  background-size: 1500px;
  background-position-x: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.logo {
  font-family: 'Permanent Marker', cursive;
  color: #FFF;
  letter-spacing: 3px;
  text-shadow: 2px 2px 2px #000;
  margin-bottom: 50px;
}

.menu {
  background: rgba(255, 255, 255, .9);
  padding: 20px 40px 40px;
  min-width: 300px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
}

.menu .icon {
  width: 60px;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  margin-bottom: 15px;
}

.menu-list .item {
  list-style: none;
  padding: 15px 0;
  font-size: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
}

.item input[type="checkbox"] {
  display: none;
}

.item input[type="checkbox"] + label {
  display: flex;
  align-items: center;
}

.item input[type="checkbox"] + label:before {
  content: '◻️';
  margin-right: 20px;
}

.item input[type="checkbox"]:checked + label:before {
  content: '🍣';
}

.menu .item-name,
.menu .btn {
  height: 50px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-top: 30px;
  outline: none;
}

.menu .item-name {
  font-size: 13px;
  width: 145px;
}

.menu .btn {
  background: #d50000;
  color: #FFF;
  width: 78px;
}

@media screen and (max-height: 600px) {
  .logo {
    font-size: 28px;
    margin-bottom: 5px;
  }

  .menu {
    max-height: 85vh;
  }

  .menu-list {
    max-height: 120px;
    overflow-y: scroll;
  }
}

let menuList = document.querySelector('.menu-list'),
    form = document.querySelector('.add-items'),
    storage = window.localStorage,
    items = JSON.parse(storage.getItem('items')) || [];

function addItem(e) {
  e.preventDefault();

  let text = this.querySelector('[name="add-item"]').value,
      item = { text, done: false };

  items.push(item);
  storage.setItem('items', JSON.stringify(items));
  populateList(items, menuList);
  this.reset();
}

function populateList(plates = [], platesList) {
  menuList.innerHTML = plates.map((plate, i) => {
    let checked = plate.done ? 'checked' : '';

    return `
      <li class="item">
        <input type="checkbox" data-index=${i} id=item${i} ${checked}/>
        <label for="item${i}">${plate.text}</label>
      </li>
    `;
  }).join('');
}

function toggleDone(e) {
  if (!e.target.matches('input')) return;

  let element = e.target,
      index = element.dataset.index;

  items[index].done = !items[index].done;
  storage.setItem('items', JSON.stringify(items));
}

form.addEventListener('submit', addItem);
menuList.addEventListener('click', toggleDone);

populateList(items, menuList);