Building the Main Components

Adding the Main Section

We will add the main section between the nav and footer elements. This will be the container for our todo list. For now, we will leave it empty.

<main class="max-w-lg mx-auto font-thin bg-white shadow-md">
  <!-- Todo list will go here -->
</main>

The main element is a semantic HTML element. It marks the main content of a document.

The classes used to style the main element are as follows:

  • max-w-lg to set the maximum width to large.
  • mx-auto to center the main section on the page.
  • font-thin to set the font weight to thin.
  • bg-white to set the background color to white.
  • shadow-md to add a shadow effect to the main section.

We need to add three sections to the main element: an input for new todos, a list of todos, and a section for todo actions (such as clearing completed todos).

Adding the Input for New Todos

Inside the main section, we will add an input field. This is where users will be able to enter new todos.

<input
  id="new-todo"
  placeholder="What needs to be done?"
  autofocus
  class="w-full p-4 text-2xl italic outline-0 focus:outline-1 focus:outline-offset-0 focus:outline-rose-700"
/>

The input element is a self-closing element. It creates an input field where users can enter data.

The attributes used in the input element are as follows:

  • id="new-todo" to uniquely identify the input field.
  • placeholder="What needs to be done?" to provide a hint to users about what to enter.
  • autofocus to automatically focus on the input field when the page loads.

The classes used to style the input element are as follows:

  • w-full to set the width to full.
  • p-4 to add padding of 4 units.
  • text-2xl to set the font size to 2xl.
  • italic to set the font style to italic.
  • outline-0 to remove the default outline style.
  • focus:outline-1 to set the outline width to 1 unit when the input is focused.
  • focus:outline-offset-0 to set the outline offset to 0 units when the input is focused.
  • focus:outline-rose-700 to set the outline color to rose-700 when the input is focused.

In Tailwind CSS, the focus: prefix applies a style only when the element is in focus. That lets us style an element based on what the user is doing, such as focusing an input field. There are other prefixes like hover: and active: for other states of an element.

Adding the Todo List Section

Next, we will add a section for the todo list. This will be a container for all the todos. For now, we will leave it empty.

<section
  id="todo-list"
  class="flex flex-col w-full text-xl font-normal divide-y"
>
  <!-- Todos will go here -->
</section>

The section element is a semantic HTML element. It marks a section of a document, and it usually holds content that belongs together.

We have given the id="todo-list" attribute to this section element so that we can easily select it using JavaScript. Later, we will use JavaScript to hide this section by default and only show it when todos exist.

The classes used to style the section element are as follows:

  • flex to set the display property to flex.
  • flex-col to set the flex direction to column.
  • w-full to set the width to full.
  • text-xl to set the font size to extra large.
  • font-normal to set the font weight to normal.
  • divide-y to add a vertical divider between the child elements.

Checkpoint: Commit your progress.

git add .
git commit -m "todos-05: Add main section and input field"
git push