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" />
    <!-- Compiled and minified CSS -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
      integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

    <title>JS Practice - To Do List</title>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col s12">
          <!-- #main is use as a box -->
          <div id="main" class="card" style="margin-top: 50px">
            <!-- CARD CONTENT -->
            <div class="card-content">
              <span class="card-title">Task List</span>
              <div class="row">
                <form class="task-form">
                  <div class="input-field col s12">
                    <input type="text" name="task" id="task" />
                    <label for="task">Add New Task</label>
                  </div>
                  <input
                    type="submit"
                    value="Add task"
                    class="add-task btn"
                    style="margin-left: 10px"
                  />
                </form>
              </div>
            </div>
            <!-- CARD ACTION -->
            <div class="card-action">
              <h5 class="task-title">Tasks</h5>
              <div class="input-field col s12">
                <input type="text" name="filter" id="filter" />
                <label for="filter">Filter Tasks</label>
              </div>
              <ul class="collection"></ul>
              <a href="#" class="clear-task btn black">Clear Tasks</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script
      src="https://code.jquery.com/jquery-3.6.1.js"
      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
      crossorigin="anonymous"
    ></script>
    <script src="./script.js"></script>
  </body>
</html>