To-do app

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CA To-do</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <style>
      #completed{
        display:none;
      }

      .card{
        overflow:auto;
      }
      #color{
        color:#1b03a3;
      }
      table{
         margin-left:auto;
         margin-right:auto;
      }
        td{
      text-align: center;
      vertical-align: middle;
      }
      #completed{
        overflow:auto;
      }
    </style>
  </head>
  <body>
  <section class="section">
    <div class="container has-text-centered">
      <h1 class="title">
        <span id="color"> CA Todo-App</span>
      </h1>
      <div class="field">
        <div class="tabs is-centered">
        <ul>
        <li id="one" onclick="showCompleted()"><a>Completed Tasks</a></li>
        <li id="two" onclick="showSheduled()" class="is-active"><a>Scheduled Tasks</a></li>
        </ul>
        </div>
      </div><!--End field-->
      <div class="notification">
        <div class="field">
          <label class="label">
            Task Name:
          </label>
        </div><!--End field-->
        <div class="field">
          <div class="control">
            <input id="tn" class="input">
          </div><!--End control-->
        </div>
        <div class="field">
          <label class="label">
            Task Description:
          </label>
        </div><!-- End field-->
        <div class="field">
          <div class="control">
            <textarea id="td" class="textarea"></textarea>
          </div>
        </div><!--End field-->
        <div class="field">
          <button onclick="add()" class="button is-success">ADD</button>
        </div><!--End field-->
      </div><!--End notification-->
      <div id="show">
      </div>
      <div id="completed" class="has-text-centered">
        <table class="table is-bordered is-narrow is-small is-centered">
          <thead>
            <tr>
              <th>Task Name</th>
              <th>Task Description</th>
              <th>Time Completed</th>
              <th>Remove Task</th>
            </tr>
          </thead>
          <tbody id="body">
          </tbody>
        </table>
      </div>
    </div><!--End of container-->
  </section>


  <script>
    let tn = document.getElementById('tn');
    let td = document.getElementById('td');
    let flag = true;
    let time = new Date();


    function remove2(name){
      let result = localStorage.getItem('completed');
      result = JSON.parse(result);
      for (let i=0; i<result.length; i++){
        if (result[i].taskName === name){
           let target = result.indexOf(result[i])
           result.splice(target, 1);
           localStorage.setItem('completed', JSON.stringify(result));
        }
      }
      showCompleted();
    }


   function completed(name, desc){
     let time = new Date();
     let oldstorage = localStorage.getItem('todo');
     oldstorage = JSON.parse(oldstorage);
     for (let i=0; i<oldstorage.length;i++){
       if (oldstorage[i].todoName===name){
         //let array = [];
         let newstorage = localStorage.getItem('completed');
         if (!newstorage){
           let array = [];
           let history = {"taskName":name, "taskCompleted":desc, "time": time}
           array.push(history);
           localStorage.setItem('completed', JSON.stringify(array));
         }
         else{
            let array = localStorage.getItem('completed');
            array = JSON.parse(array);
           let history = {"taskName":name, "taskCompleted":desc, "time": time};
           array.push(history);
           localStorage.setItem('completed', JSON.stringify(array));
         }
       }
     }
     remove(name);
   }


   function showSheduled(){
      document.getElementById("two").className = 'is-active';
      document.getElementById("one").className = "";
      document.getElementById('completed').style.display = 'none';
      document.getElementById('show').style.display = 'block';
      document.documentElement.scrollTop = document.body.scrollTop = 300;
   }


   function showCompleted(){
     document.getElementById("one").className = "is-active";
     document.getElementById("two").className = "";
     document.getElementById('show').style.display = 'none';
     document.getElementById('completed').style.display = 'block';

     let result = localStorage.getItem('completed');
     result = JSON.parse(result);
     result = result.reverse();
     let container = "<div>";
     for (let i=0; i<result.length; i++){
     let content = `<tr>
     <td>${result[i].taskName}</td>
     <td>${result[i].taskCompleted}</td>
     <td>${result[i].time}</td>
     <td><button onclick='remove2("${result[i].taskName}")' class="button is-danger is-small">Delete</button></td>
     </tr>`
     container+= content;
     }
     container += ` <br><div class='field has-text-centered'>
                    <button onclick='moveUp()' class="button is-link">Top</button>
                     </div>`
     container+='</div>';

     document.getElementById('body').innerHTML = container;
     document.documentElement.scrollTop = document.body.scrollTop = 300;
   }


    function edit(name){
      let result = localStorage.getItem('todo');
      result = JSON.parse(result);
      for (let i=0; i<result.length; i++){
        if (result[i].todoName===name){
          target = result.indexOf(result[i]);
          document.body.scrollTop = document.documentElement.scrollTop = 0;
          tn.value = result[i].todoName;
          td.value = result[i].todoDesc;
          result.splice(target, 1);
          localStorage.setItem('todo', JSON.stringify(result));
        }
      }
    }

    function moveUp(){
       document.documentElement.scrollTop = document.body.scrollTop = 0;
    }


    function remove(name){
      //let ask = confirm('Are you sure');
      //if (!ask){
        //return false;
      //}
      let result = localStorage.getItem('todo');
      result = JSON.parse(result);
      for (let i=0; i<result.length; i++){
        if (result[i].todoName===name){
           let target = result.indexOf(result[i]);
           result.splice(target, 1);
           localStorage.setItem('todo', JSON.stringify(result));
        }
      }
    display();
    }


    function add(){
       if (!tn.value || !td.value){
         alert('Enter required fields');
         return false;
       }
       let record = localStorage.getItem('todo');
       if (!record){
         let todoList = [];
         recordObj = {"todoName":tn.value,
                      "todoDesc":td.value};
         todoList.push(recordObj)
         localStorage.setItem('todo', JSON.stringify(todoList));
       }
       else{
         //let todoList = [];
         recordObj = {"todoName":tn.value,
                       "todoDesc":td.value};
         //todoList.push(recordObj);
         result = localStorage.getItem('todo');
         result = JSON.parse(result)
         result.push(recordObj);
         localStorage.setItem('todo', JSON.stringify(result));
       }
       tn.value = '';
       td.value = '';
      display();
    }// End of add function


    function display(){
      let results = localStorage.getItem('todo');
      results = JSON.parse(results);
      let container = '<div>';
      results = results.reverse();
      for (let i=0; i<results.length; i++){
        let card = `<div class="card">
                      <div class="card-header">
                        <div class="card-header-title is-centered">
                          <strong>Todo Title:</strong> ${results[i].todoName}
                        </div>
                      </div>
                      <div class="card-content">
                        <strong>Todo Description:</strong> ${results[i].todoDesc}
                      </div>
                      <div class="card-footer">
                        <div class="card-footer-item">
                          <button onclick='remove("${results[i].todoName}")' class="button is-danger">Remove</button>
                        </div>
                        <div class="card-footer-item">
                          <button onclick='edit("${results[i].todoName}")' class="button is-warning">Edit</button>
                        </div>
                        <div class="card-footer-item">
                          <button onclick='completed("${results[i].todoName}", "${results[i].todoDesc}")' class="button is-success">Completed</button>
                        </div>
                      </div>
                    </div><br>`
                    container+= card;
      }
      container += `<div class="field">
                      <button onclick='moveUp()' class="button is-link">Top</button>
                    </div>`
      container+= '</div>';
      document.getElementById('show').innerHTML = container;
      document.getElementById('one').className = '';
      document.getElementById('two').className = 'is-active';
      document.getElementById('show').style.display = 'block';
      document.getElementById('completed').style.display = 'none';
    }


   display();

  </script>
  </body>
</html>