index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <title>Todo</title>
  </head>
  <body>
    <section class="section-wrapper">
      <div class="container">
        <div class="form-container">
          <form action="" class="todo-form">
            <input
              id="form-input"
              class="form"
              type="text"
              placeholder="Enter new Todo..."
              required
           />
            <button class="todo-button" type="submit">
              <span class="material-icons">send</span>
            </button>
          </form>
          <button class="clear-localstorage">
            Delete All <span class="material-icons">delete_forever</span>
          </button>
        </div>
        <div class="todo-header">
          <p>Todos...</p>
          <div class="date-holder"></div>
        </div>
        <div class="todo-items-wrapper">
          <ul class="todo-list">
            <h1 class="todo-holder">Your Todo List is Empty!</h1>
          </ul>
        </div>
      </div>
    </section>
    <div id="modal-box" class="modal-box">
      <span id="modal-icon" class="material-icons"> circle_notifications </span>
      <p class="modal-text">Proceed to delete all todos?</p>
      <div id="modal-buttons">
        <button id="button-1" class="modal-button">Delete all</button>
        <button class="modal-button" id="button-2">Cancel</button>
      </div>
    </div>
    <script src="index.js"></script>
  </body>
</html>