Task 2: Set up the layout and styling
For this task, our main focus will be on the layout and styling of our ToDo app. We require a space to enter todos, a space to display them, and some basic navigation and controls.
Step 1: Reset the HTML structure
Open the index.html file. Notice the basic HTML structure with a head and body section. We also have the title tag and the meta tags for character encoding and viewport settings.
Please remove the <div id="app"></div> from the body section. The HTML should look like the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToDo App</title>
</head>
<body>
<!-- Content will go here -->
<!-- Scripts here. Don't remove ↓ -->
<script type="module" src="/src/main.js"></script>
</body>
</html>Furthermore, remove the code from main.js that was added to display “Hello World!” in the browser. Your main.js file should only contain the following import statement:
import "../style.css";Step 2: Add the header
Next, we’ll add the header section. This will include a h1 tag for the title of our app.
<body class="bg-stone-100">
<header class="max-w-lg py-4 mx-auto mt-5 font-thin text-center">
<h1 class="font-sans text-7xl text-rose-700">~ todos ~</h1>
</header>
<!-- Scripts here. Don't remove ↓ -->
<script type="module" src="/src/main.js"></script>
</body>Notice that we have added class attributes to various elements to style them. We have the following classes:
bg-stone-100for thebodysection to set the background color to a light gray.max-w-lgandmx-autofor theheadersection to center it on the page.py-4for theheadersection to add padding on the y-axis.mt-5for theheadersection to add margin on the top.font-thinfor theheadersection to set the font weight to thin.text-centerfor theheadersection to align the text to the center.font-sansfor theh1tag to set the font family to sans-serif.text-7xlfor theh1tag to set the font size to 7xl.text-rose-700for theh1tag to set the text color to rose-700.
These classes are part of the Tailwind CSS utility classes that we will use to style our app.
Aside: The header is a semantic HTML element that is used to define a header for a document or a section. It typically contains a group of introductory or navigational aids. In this case, we are using it to display the title of our app.
Step 3: Add the footer
Right before the script tag, we’ll add the footer section. This will include some basic instructions on how to use the app.
<footer
class="flex flex-col items-center justify-center max-w-lg mx-auto mt-10 text-xs text-gray-500 font-extralight"
>
<div>Click to complete a todo</div>
<div>Double-click to edit a todo</div>
</footer>The footer is a semantic HTML element that is used to define a footer for a document or a section. It typically contains information about the author, copyright data, or links to related documents. In this case, we are using it to provide some basic instructions on how to use the app.
We used the following classes to style the footer section:
flexto set the display property to flex.flex-colto set the flex direction to column.items-centerto align the items in the center along the cross-axis.justify-centerto align the items in the center along the main axis.max-w-lgto set the maximum width to large.mx-autoto center the footer on the page.mt-10to add margin on the top.text-xsto set the font size to extra small.text-gray-500to set the text color to gray-500.font-extralightto set the font weight to extra light.
The flex class is part of the Tailwind CSS utility classes that enable us to use flexbox properties easily. Flexbox is a CSS layout model that allows us to design complex layouts more efficiently.
Step 4: Add the navigation tag
We’ll add a nav tag between the header and footer sections to filter our todos and switch between completed and active ones, or show all todos. Later, we will use JavaScript to hide this nav bar by default and show it only when todos exist.
<nav
id="todo-nav"
class="flex items-center justify-center gap-3 py-2 filters"
role="navigation"
>
<a
href="#/"
class="p-1 underline underline-offset-4 decoration-rose-800 decoration-2"
role="button"
>All</a
>
<a
href="#/active"
class="p-1"
role="button"
>Active</a
>
<a
href="#/completed"
class="p-1"
role="button"
>Completed</a
>
</nav>Notice that the nav element has three child anchor elements, each with a different href value. These anchor elements are used to filter between all, active, and completed todos. The first child anchor element is selected by default, which is reflected in its unique style (underlined decoration). We will use JavaScript later to apply similar styling when a user clicks and selects a different anchor element.
Aside: The role attribute is used to define the purpose of an element. In this case, we are using it to indicate that the nav element is a navigation bar. This helps assistive technologies, such as screen readers, to understand the purpose of the element. On the anchor elements, we are using the role attribute to indicate that they are buttons. This is because they behave like buttons when clicked.
The nav is a semantic HTML element that is used to define a navigation bar for a document or a section. It typically contains links to other pages or sections within the document. In this case, we are using it to provide filtering options for our todos.
The classes used to style the nav element are as follows:
flexto set the display property to flex.items-centerto align the items in the center along the cross-axis.justify-centerto align the items in the center along the main axis.gap-3to add a gap of 3 units between the child elements.py-2to add padding on the y-axis.filterswhich is not a Tailwind CSS class but a custom class to allow us select thenavelement easily.
The classes used to style the anchor elements are as follows:
p-1to add padding of 1 unit.underlineto underline the text.underline-offset-4to set the underline offset to 4 units.decoration-rose-800to set the underline color to rose-800.decoration-2to set the underline thickness to 2 units.
Step 5: Add the main section
We’ll add the main section between the nav and footer elements. This will be the container for our todo list. For now, we’ll leave it empty.
<main class="max-w-lg mx-auto font-thin bg-white divide-y shadow-md">
<!-- Todo list will go here -->
</main>The main element is a semantic HTML element that is used to define the main content of a document. It typically contains the primary content of the document, such as articles, blog posts, or applications. In this case, we are using it to contain the todo list.
The classes used to style the main element are as follows:
max-w-lgto set the maximum width to large.mx-autoto center themainsection on the page.font-thinto set the font weight to thin.bg-whiteto set the background color to white.divide-yto add a vertical divider between the child elements.shadow-mdto add a shadow effect to themainsection.
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).
Step 6: Add the input for new todos
Inside the main section, we’ll 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-none focus:outline-offset-0 focus:outline-rose-700"
/>The input element is a self-closing element that is used to create an input field for users to enter data. In this case, we are using it to allow users to enter new todos.
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.autofocusto automatically focus on the input field when the page loads.
The classes used to style the input element are as follows:
w-fullto set the width to full.p-4to add padding of 4 units.text-2xlto set the font size to 2xl.italicto set the font style to italic.outline-noneto remove the default outline style.focus:outline-offset-0to set the outline offset to 0 units when the input is focused.focus:outline-rose-700to set the outline color to rose-700 when the input is focused.
In Tailwind CSS, the focus: prefix is used to apply styles when an element is in focus. This allows us to style elements based on user interactions, such as when an input field is selected. There are other prefixes like hover: and active: that can be used to apply styles based on different states of an element.
Step 7: Add the section for the todo list
Next, we’ll add a section for the todo list. This will be a container for all the todos. For now, we’ll 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 that is used to define a section in a document. It typically contains related content that can be grouped together. In this case, we are using it to contain the list of todos.
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:
flexto set the display property to flex.flex-colto set the flex direction to column.w-fullto set the width to full.text-xlto set the font size to extra large.font-normalto set the font weight to normal.divide-yto add a vertical divider between the child elements.
Step 8: Add sample todos
Let’s add two sample todos within the section that has id="todo-list". Each todo will be contained within a div with the class “todo-item”. The todo text will be displayed within a div with the class “todo-text”. Additionally, there will be an input element with the class “hidden todo-edit”, which will be initially hidden. This input element will be used to edit the todo text. For example, when we double click on a todo, the text will be replaced with this input field.
<div class="p-4 todo-item">
<div class="todo-text">Buy milk</div>
<input class="hidden todo-edit" value="Buy milk" />
</div>
<div class="p-4 todo-item">
<div class="todo-text">Buy bread</div>
<input class="hidden todo-edit" value="Buy bread" />
</div>Notice the todo-item, todo-text, and todo-edit are custom classes used to select and style the elements. The hidden and p-4 are Tailwind classes used to hide the input field and add padding to the div elements, respectively.
Step 9: Add the section for todo actions
Finally, we’ll add a section for todo actions. This will include a count of the remaining todos, a button to mark all todos as completed, and a button to clear completed todos. Later, we will use JavaScript to hide this section by default and only show it when todos exist.
<section
id="todo-actions"
class="flex justify-between p-4 text-sm text-gray-600"
>
<span id="todo-count">2 items left</span>
<button id="mark-all-completed" aria-label="Mark all tasks as completed">
Mark all as complete
</button>
<button id="clear-completed" aria-label="Clear completed tasks">
Clear completed
</button>
</section>The classes used to syle the section element and its child elements are as follows:
flexto set the display property to flex.justify-betweento align the items with space between them along the main axis.p-4to add padding of 4 units.text-smto set the font size to small.text-gray-600to set the text color to gray-600.
Aside-1: The aria-label attribute is used to provide an accessible name for an element when the visible label is not sufficient. In this case, we are using it to provide a label for the buttons that mark all tasks as completed and clear completed tasks. This helps users who rely on screen readers to understand the purpose of the buttons.
Aside-2: The span element is used to group inline elements and apply styles to them. In contrast to div, which is a block-level element, span is an inline element, which means it does not start on a new line. Here, we are using it to display the count of remaining todos. The id="todo-count" attribute is used to uniquely identify this element so that we can easily select it using JavaScript.
Step 10: Run the App locally
Run the application and view it in the browser. You should see the following view.
For your reference, this is the complete HTML file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ToDo App</title>
</head>
<body class="bg-stone-100">
<!-- Header here ↓ -->
<header class="max-w-lg py-4 mx-auto mt-5 font-thin text-center">
<h1 class="font-sans text-7xl text-rose-700">~ todos ~</h1>
</header>
<!-- This nav should be hidden by default and shown when there are todos ↓ -->
<nav
id="todo-nav"
class="flex items-center justify-center gap-3 py-2 filters"
role="navigation"
>
<!-- This nav item is selected by default ↓ -->
<a
href="#/"
class="p-1 underline underline-offset-4 decoration-rose-800 decoration-2"
role="button"
>All</a
>
<a
href="#/active"
class="p-1"
role="button"
>Active</a
>
<a
href="#/completed"
class="p-1"
role="button"
>Completed</a
>
</nav>
<main class="max-w-lg mx-auto font-thin bg-white divide-y shadow-md">
<!-- This input should always be shown ↓ -->
<input
id="new-todo"
placeholder="What needs to be done?"
autofocus
class="w-full p-4 text-2xl italic outline-none focus:outline-offset-0 focus:outline-rose-700"
/>
<!-- This section should be hidden by default and shown when there are todos ↓ -->
<section
id="todo-list"
class="flex flex-col w-full text-xl font-normal divide-y"
>
<div class="p-4 todo-item">
<div class="todo-text">Buy milk</div>
<input class="hidden todo-edit" value="Buy milk" />
</div>
<div class="p-4 todo-item">
<div class="todo-text">Buy bread</div>
<input class="hidden todo-edit" value="Buy bread" />
</div>
</section>
<!-- This section should be hidden by default and shown when there are todos ↓ -->
<section
id="todo-actions"
class="flex justify-between p-4 text-sm text-gray-600"
>
<!-- This should be `0 items left` by default -->
<span id="todo-count">2 items left</span>
<!-- Hidden if no active items are left ↓ -->
<button
id="mark-all-completed"
aria-label="Mark all tasks as completed"
>
Mark all as complete
</button>
<!-- Hidden if no completed items are left ↓ -->
<button id="clear-completed" aria-label="Clear completed tasks">
Clear completed
</button>
</section>
</main>
<!-- This footer shows minimal instructions on how to use the app ↓ -->
<footer
class="flex flex-col items-center justify-center max-w-lg mx-auto mt-10 text-xs text-gray-500 font-extralight"
>
<div>Click to complete a todo</div>
<div>Double-click to edit a todo</div>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script type="module" src="/src/main.js"></script>
</body>
</html>This is a well-structured and clean HTML document. The use of semantic HTML elements, along with meaningful and consistent class and ID names, makes it easy to understand the purpose of each section. The comments are also helpful and provide additional context for each section. Additionally, good accessibility practices, such as the use of role and aria-label attributes, were followed. Overall, this document demonstrates good HTML coding practices.
Aside: Some people take issue with how Tailwind CSS classes can make the HTML look cluttered and less readable. This is a valid concern, as the classes can make the HTML code harder to read and maintain. However, the utility classes provided by Tailwind CSS allow for rapid prototyping and easy customization of styles. It’s a trade-off between readability and convenience, and the choice depends on the project requirements and personal preferences.
Step 11: Commit and push changes
To wrap up this section, we will stage and commit the changes using the following bash commands:
git add .
git commit -m "Set up the layout and styling"Push your code to GitHub. It must be automatically deployed as a GitHub Page, as we have already configured it.