index.html

<!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" />
    <meta name="description" content="vanilla javascript todo app" />
    <meta name="keywords" content="HTML, CSS, Javascript" />
    <meta name="author" content="Geri" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <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=Lato:ital,wght@0,400;1,300;1,400&family=Poppins:ital,wght@0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,700&display=swap"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link
      rel="shortcut icon"
      type="image/jpg"
      href="assets/img/mug-saucer-solid.svg"
    />
    <title>todo-app chica</title>
  </head>

  <body>
    <header class="header">
      <nav class="menu__app-header">
        <ul class="header__navbar-list">
          <li class="nav__link-header-list-brand">
            <a href="#">Daily Planner</a>
          </li>

          <li class="nav__link-header-list">
            <a href="#">
              <div class="user__info">
                <span class="user__info__img">
                  <img
                    class="img"
                    src="https://avatars.githubusercontent.com/u/41730319?v=4"
                    alt="Profile Picture"
                    class="img-responsive"
                  />
                </span>

                <span class="user__info__name">
                  <span class="first">chicacode</span>
                </span>
              </div></a
            >
          </li>
          <li class="nav__link-header-list">
            <a href="#">
              <span id="today-date"></span>
            </a>
          </li>
        </ul>
      </nav>
    </header>
    <div class="container">
      <div class="search__app-container">
        <section class="search__app-section">
          <form onsubmit="addTask(event)">
            <div class="section__container-search">
              <label for="search-bar">Search task</label>
              <div class="searchbox">
                <svg aria-hidden="true" viewBox="0 0 24 24">
                  <path
                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
                  />
                </svg>
                <input
                  type="text"
                  placeholder="Search..."
                  name="search-input"
                  id="search-input"
                />
              </div>
              <div class="button-container-search">
                <button class="button" type="button">Search</button>
              </div>
            </div>
            <hr />
            <div class="section__container-task">
              <label for="task-item">Add your new task here</label>
              <input
                type="text"
                placeholder="Write a new task"
                name="task-item"
                id="task-item"
              />
              <div class="button-container">
                <button class="button-task-item__add">
                  <span class="material-symbols-outlined"> add </span>
                </button>
              </div>
            </div>
            <div class="section__container-date">
              <div class="input__date-container">
                <label for="date">Start date:</label>

                <input type="date" onchange="setDate(event)" />
              </div>

              <div class="input__container-time">
                <label for="time">Time:</label>
                <input type="time" onchange="setTime(event)" />
              </div>
            </div>

            <div class="section__container-priority">
              <div class="input__container-priority">
                <label for="high"> High</label>
                <input
                  type="radio"
                  name="priority"
                  id="high"
                  value="high"
                  onchange="selectPriority(event)"
                />
              </div>

              <div class="input__container-priority">
                <label for="medium"> Medium</label>
                <input
                  type="radio"
                  name="priority"
                  id="medium"
                  value="medium"
                  onchange="selectPriority(event)"
                />
              </div>

              <div class="input__container-priority">
                <label for="low"> Low</label>
                <input
                  type="radio"
                  name="priority"
                  id="low"
                  value="low"
                  onchange="selectPriority(event)"
                />
              </div>
            </div>
          </form>
        </section>
      </div>
      <div class="todolist__app-container">
        <section class="task-list__app-section">
          <h5 class="title-heading">Todo´s tasks</h5>
          <ul class="todos__app-list"></ul>

          <div class="button__container-delete">
            <button class="button button-task-list__trash">
              <span class="material-symbols-outlined"> delete </span>Delete
              Tasks
            </button>
          </div>
        </section>
      </div>
    </div>
    <script src="./script.js"></script>
    <script>
      let date = new Date().toDateString();
      document.getElementById("today-date").innerHTML = date;
    </script>
  </body>
</html>