Задание по Javascript

(function () {
  
  function addStudent() {
    add_btn = document.getElementById('btn_add_student')
    //добавление студента в форму
    add_btn.addEventListener('click', async function () {
      let student_form = document.getElementById('student_form')
      if (document.getElementById('alertError')) {
        student_form.removeChild(document.getElementById('alertError'))
      }

      let  = validateForm(student_form)
      if (valid_form != false) {
        let data = converData(student_form)
        student_form.reset()
        let table = document.getElementById('student_table_body')
        let row = createRow(data)
        storageSave(data)
        table.append(row)
      }
    })
  }

  function filterTable(filter, index) {
    filter = filter.toUpperCase();
    let table = document.getElementById("student_table_body");
    let tr = table.getElementsByTagName("tr");
    let td, value
    for (let i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td");
      if (index == 1) {
        value = td[2].textContent.toUpperCase()
        value = value.split('-')[0]
      } else if  (index == 2) {
        value = td[2].textContent.toUpperCase()
        value = value.split('-')[1]
      }
      else {
        value = td[index].textContent.toUpperCase()
      }
      if (value.indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }

  function addAlert(student_form, message) {
    let alert_error = document.createElement('div')
    alert_error.className = 'alert alert-danger'
    alert_error.role = 'alert'
    alert_error.id = 'alertError'
    alert_error.innerHTML = message
    student_form.append(alert_error)
  }

  function validateForm(student_form) {
    valid = true;
    let form = document.getElementById('student_form')
    let inputs = form.querySelectorAll('.form-input')
    inputs.forEach(function (input) {
      if (input.value == "") {
        if (input.ariaLabel == null) {
          addAlert(form, `Не заполнено поле Год рождения`)
        } else {
          addAlert(form, `Не заполнено поле ${input.ariaLabel}`)
        }
        valid = false
      }
    });
    return valid;
  }

  function converData(student_form) {
    let name = student_form.querySelector('#name').value.trim()
    let surname = student_form.querySelector('#surname').value.trim()
    let middlename = student_form.querySelector('#middlename').value.trim()
    let birth_date = student_form.querySelector('#birth_date').value.trim()
    let study_start = parseInt(student_form.querySelector('#study_start').value.trim())
    let faculty = student_form.querySelector('#faculty').value.trim()
    let curr_date = new Date();
    let _birth_date = new Date(birth_date);
    if (_birth_date >= curr_date || new Date(1900, 0, 0) >= _birth_date) {
      addAlert(student_form, `Дата рождения не может быть позже текущей даты и раньше 1990 года`)
      return false
    }
    if (study_start >= curr_date.getFullYear() || 2000 >= study_start) {
      addAlert(student_form, `Год начала обучения не может быть больше ${new Date().getFullYear()} и меньше 2000`)
      return false
    }
    // Возраст
    let age = Math.abs(new Date(Date.now() - _birth_date).getFullYear() - 1970)
    age = agetostr(age)
    // birth_date =
    // Вычисление номера курса
    let curr_course = curr_date.getFullYear() - study_start
    if (curr_date >= new Date(curr_date.getFullYear(), 8, 1)) {
      curr_course += 1
    } else if (curr_date >= new Date(study_start + 4, 8, 1)) {
      curr_course = 'закончил'
    }
    // Запись в словарь
    let student = {
      full_name: `${surname} ${name} ${middlename}`,
      birth_date: `${birth_date} (${(age)})`,
      study_years: `${study_start}-${study_start + 4} (${curr_course})`,
      faculty: faculty,
    }
    return student
  }

  function createRow(data) {
    let row = document.createElement('tr');
    let td
    for (let elem in data) {
      if (data.hasOwnProperty(elem)) {
        td = document.createElement('td')
        td.innerHTML = data[elem]
        row.append(td)
      }
    }
    return row
  }

  function agetostr(age) {
    let txt;
    count = age % 100;
    if (count >= 5 && count <= 20) {
      txt = 'лет';
    } else {
      count = count % 10;
      if (count == 1) {
        txt = 'год';
      } else if (count >= 2 && count <= 4) {
        txt = 'года';
      } else {
        txt = 'лет';
      }
    }
    return age + " " + txt;
  }

  function storageSave(data) {
    let items = JSON.parse(localStorage.getItem('students'))
    if (items == null) {
      items = [{
        'fullname': data.full_name,
        'birth_date': data.birth_date,
        'study_years': data.study_years,
        'faculty': data.faculty,
      }]
    } else {
      items.push({
        'fullname': data.full_name,
        'birth_date': data.birth_date,
        'study_years': data.study_years,
        'faculty': data.faculty,
      })
    }
    let serialObj = JSON.stringify(items);
    localStorage.setItem('students', serialObj);
  }

  function loadStorage(data) {
    if (data) {
      for (let item of data) {
        if (item.hasOwnProperty('fullname') && item.name != '') {
          let table = document.getElementById('student_table_body')
          let row = createRow(item)
          table.append(row)
        }
      }
    }
  }
  window.loadStorage = loadStorage;
  window.addStudent = addStudent;
  window.filterTable = filterTable;

})();

* {
    box-sizing: border-box;
}

body {
    font-family: "Roboto", sans-serif;
}

.container {
  margin: 0 auto;
  margin-top: 2%;
  padding: 0;
    width: 95%;
}

.title {
  margin-bottom: 2%;
  text-align: center;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.add-box {
    margin-top: 2%;
    padding: 10px;
    width: 49%;
}

.add__form {
    display: flex;
    flex-direction: column;
}

.add__form label {
  margin: 0;
    padding-bottom: 5px;
    padding-left: 15px;
}

.form__label {
  font-size: 16px;
    font-weight: 700;
}

.form-input {
    margin-bottom: 20px;
    padding: 3px 15px;
    height: 35px;
    border: 1px solid lightgray;
    border-radius: 15px;
}

.form-input:hover {
    background-color: snow;
}

.form__btn {
    cursor: pointer;
    margin-top: 3%;
    height: 35px;
    font-size: 16px;
    color: gray;
    border: 1px solid lightgray;
    border-radius: 15px;
}

.form__btn:hover {
    background-color: lightgray;
    color: black;
    transition: all .2s ease-in;
}

.search-box {
  padding: 0 10px;
    width: 49%;
}

.search__form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.form-input:not(:last-child) {
  margin-right: 10px;
}

.table {
  width: 100%;
}

.thead-table {
  width: 100%;
  height: 40px;
  background-color: darkgrey;
}

.th-table {
  width: 25%;
}

.alert-danger {
    font-size: 16px;
    color: red;
}

<!DOCTYPE html>
<html lang="ru">
  <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">

    <title>Панель управления студентами</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css">
    
    <script>
      // localStorage.clear();
      document.addEventListener('DOMContentLoaded', () => {
        addStudent()
        loadStorage(JSON.parse(localStorage.getItem('students')))
        // Сортировка
        const getSort = ({
          target
        }) => {
          const order = (target.dataset.order = -(target.dataset.order || -1));
          const index = [...target.parentNode.cells].indexOf(target);
          const collator = new Intl.Collator(['en', 'ru'], {
            numeric: true
          });
          const comparator = (index, order) => (a, b) => order * collator.compare(
            a.children[index].innerHTML,
            b.children[index].innerHTML
          );
          for (const tBody of target.closest('table').tBodies)
            tBody.append(...[...tBody.rows].sort(comparator(index, order)));
          for (const cell of target.parentNode.cells)
            cell.classList.toggle('sorted', cell === target);
        };
        document.querySelectorAll('#student_table thead').forEach(tableTH => tableTH.addEventListener('click', () =>
          getSort(event)));
      });
      // window.localStorage.removeItem('students');
    </script>
    <script defer src="scripts/main.js"></script>
  </head>

  <body>
    <div class="container">
      <h1 class="title">
        Наши студенты. Панель управления
      </h1>
      <div class="flex-container">
        <div class="add-box">
          <form id="student_form" class="add__form">
            <label class="form__label" for="formGroupExampleInput">Имя</label>
            <input  class="form-input" id="name" type="text" placeholder="" aria-label="Имя" required>

            <label class="form__label" for="formGroupExampleInput">Фамилия</label>
            <input  class="form-input" id="surname" type="text" placeholder="" aria-label="Фамилия" required>

            <label class="form__label" for="formGroupExampleInput">Отчество</label>
            <input  class="form-input" id="middlename" type="text" placeholder="" aria-label="Отчество"
              required>

            <label class="form__label" for="formGroupExampleInput">Дата Рождения</label>
            <input  class="form-input" id="birth_date" type="date" required>

            <label class="form__label" for="formGroupExampleInput">Год начала обучения</label>
            <input  class="form-input" id="study_start" type="text" placeholder="" aria-label="Год начала обучения"
              required>

            <label class="form__label" for="formGroupExampleInput">Факультет</label>
            <input  class="form-input" id="faculty" type="text" placeholder="" aria-label="Факультет" required>

            <input id="btn_add_student" class="btn  form__btn" type="submit" value="Добавить">
          </form>
        </div> <!--add-box-->

        <div class="search-box">
            <h2 class="title-search">
              Поиск
            </h2>
            <form class="search__form">
                  <input class="form-input" type="text" onkeyup="filterTable(this.value, 0)" placeholder="ФИО">
                  <input class="form-input" type="text" onkeyup="filterTable(this.value, 1)" placeholder="Год начала обучения">
                  <input class="form-input" type="text" onkeyup="filterTable(this.value, 2)" placeholder="Год окончания обучения">
                  <input class="form-input" type="text" onkeyup="filterTable(this.value, 3)" placeholder="Факультет">
            </form>
            <table class="table" id="student_table">
              <thead class="thead-table">
                <tr>
                  <th class="th-table">ФИО</th>
                  <th class="th-table">Дата Рождения</th>
                  <th class="th-table">Годы обучения</th>
                  <th class="th-table">Факультет</th>
                </tr>
              </thead>
              <tbody id="student_table_body">
              </tbody>
            </table>
        </div> <!--search-box-->
      </div> <!--flex-container-->
    </div> <!--container-->
  </body>
</html>