Weekly Todo List

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://1xpto.netlify.app/articles/html/css default/default.css">
  <title>Weekly Todo List</title>
  <style>
    .box {
      margin: 10px auto;
      border: 1px solid;
      display: block;
      width: 80%;
      height: 200px;
      position: relative;
    }

    .area {
      width: 100%;
      height: 150px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
      padding: 0 20px;
    }

    .h1 {
      font-size: 20px;
      position: absolute;
      left: 20px;
    }

    .btn {
      position: absolute;
      right: 0;
      bottom: 0;
      margin: 20px;
      background-color: red;
      color: white;
      padding: 2px 20px;
    }

    #header {
      text-align: center;
      margin: 30px;
      font-size: 40px;
    }

    .clear {
      background-color: red;
      color: white;
      padding: 2px 20px;
      transform: translate(0, -4px);
    }
  </style>
</head>

<body>

  <h1 id='header'>Weekly Todo List <button class='clear' onclick='localStorage.clear();location.reload()'>Clear</button></h1>

  <script>
    weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    for (i = 0; i < weekday.length; i++) {
      document.body.appendChild(box = document.createElement('div'));
      box.appendChild(h1 = document.createElement('h1'));
      box.appendChild(area = document.createElement('textarea'));
      box.appendChild(btn = document.createElement('button'));
      box.className = 'box';
      area.className = 'area';
      h1.className = 'h1';
      btn.className = 'btn';
      btn.innerHTML = 'Store';
      h1.innerHTML = weekday[i];
    }
    btn = document.getElementsByClassName('btn');
    area = document.getElementsByClassName('area');
    btn[0].onclick = () => {
      localStorage.setItem('key0', area[0].value)
    }
    btn[1].onclick = () => {
      localStorage.setItem('key1', area[1].value)
    }
    btn[2].onclick = () => {
      localStorage.setItem('key2', area[2].value)
    }
    btn[3].onclick = () => {
      localStorage.setItem('key3', area[3].value)
    }
    btn[4].onclick = () => {
      localStorage.setItem('key4', area[4].value)
    }
    btn[5].onclick = () => {
      localStorage.setItem('key5', area[5].value)
    }
    btn[6].onclick = () => {
      localStorage.setItem('key6', area[6].value)
    }
    window.addEventListener('load', () => {
      area[0].value = localStorage.getItem('key0');
      area[1].value = localStorage.getItem('key1');
      area[2].value = localStorage.getItem('key2');
      area[3].value = localStorage.getItem('key3');
      area[4].value = localStorage.getItem('key4');
      area[5].value = localStorage.getItem('key5');
      area[6].value = localStorage.getItem('key6');
    });
  </script>
</body>
</html>