<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>To-Do List</title>
 <script>
  let random = true;
  let appContainer;
  window.onload = function() {
   appContainer = document.querySelector('.app');
 }
  function addItem() {
   if (random === true) {
   var newItem = document.createElement("div");
   newItem.className = "item";
   newItem.innerHTML = document.getElementById("box").value;
   newItem.onclick = removeItem;
   document.getElementById("list").appendChild(newItem);
   newItem.style.color = "royalblue";
   newItem.style.backgroundcolor = "darkred";
   saveList();
   random = false;
    }
    else {
    var newItem = document.createElement("div");
    newItem.className = "item";
   newItem.innerHTML = document.getElementById("box").value;
   newItem.onclick = removeItem;
   document.getElementById("list").appendChild(newItem);
   newItem.style.color = "green";
   newItem.style.backgroundcolor = "darkred";
   saveList();
   random = true;
    }
  }
  function removeItem() {
   document.getElementById("list").removeChild(this);
   saveList();
  }
  function saveList() {
   localStorage.storedList = document.getElementById("list").innerHTML;
  }
  function loadList() {
   document.getElementById("list").innerHTML = localStorage.storedList;
   for(var i = 0; i < list.children.length; i++) {
    list.children[i].onclick = removeItem;
   }
  }
 </script>
 <style>
  .header {
    height:75px; 
    width: 350px; 
    background-color:darkred; 
    float: center; 
    padding:10px; 
    margin:20px auto;
    text-align:center; 
    font-size:24px;
  }
  .app {
    width: 350px; 
    background-color:darkred; 
    align: center; 
    padding:10px; 
    margin:20px auto;
  }
  .item {
    height: 25px auto;
    font-size: 30px;
    text-align: center;
  }
  input[type="button"] {
   background-color: Black;
  }
 </style>
</head>
<body bgcolor="black">
  <a href="Page One.html" style="color: darkred;" type="button">Back to Home</a>
  <div class="header">
  <img src="" style="float: left;"> 
  <p style="color: royalblue; text-align: center; font-size: 37px; margin: 15px auto;">To-Do List for Website</p>
 </div>
 <div class="app">
  <p style="font-size:30px; font-style:bold; color: royalblue; margin: 10px auto; text-align: center;">To-Do</p>
  <br>
  <div style="text-align: center;">
  <input style="color: black; font-size: 18px; text-align: center;" type="text" id="box" placeholder="Type here to add task"/>
  </div>
  <br/>
  <div style="text-align: center;">
  <input style="color:red; font-size: 20px;" type="button" value="Add item" onclick="addItem();"/>
  </div>
  <br/>
   <div id="list"></div>
 </div>
 <script>
  if(localStorage.storedList) {
   loadList();
  }
 </script>
</body>
</html>