Build a Stylized To-Do List

HTML-CSS
1

Build an app that is functionally similar to this example project. Try not to copy the example project, give it your own personal style.

In this lab, you will practice the different styles that can be applied to links when they are hovered over, focused, clicked, and visited.

Objective: Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

  1. You should have one unordered list with the class todo-list.

  2. Inside the unordered list, you should have four list items.

  3. Inside each list item, there should be:

    • An input element with the type checkbox and id set to a unique value.

    • A label element with the for attribute set to the corresponding input element’s id.

    • An unordered list with the class sub-item.

    • A list item with an anchor element in it. The anchor should have the class sub-item-link, a valid href value, and a target value that makes the link open in a new tab.

  4. Your anchor elements shouldn’t have any default text decoration.

  5. You should set the text color of the links to a color of your choice.

  6. When your links are visited, the color should change to another color of your choice.

  7. When your links are hovered over, the color should change to another color of your choice.

  8. When your links are focused, there should be a colored outline around the link.

  9. When your links are clicked, the color should change to another color of your choice.

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>

<body>
   <ul class="todo-list">
  <li>
    <input type="checkbox" id="task-1">
    <label for="task-1">Task 1</label>

    <ul class="sub-item">
      <li>
        <a
          class="sub-item-link"
          href="https://example.com"
          target="_blank"
        >
          More details
        </a>
      </li>
    </ul>
  </li>

  <li>
    <input type="checkbox" id="task-2">
    <label for="task-2">Task 2</label>

    <ul class="sub-item">
      <li>
        <a
          class="sub-item-link"
          href="https://example.com"
          target="_blank"
        >
          More details
        </a>
      </li>
    </ul>
  </li>

  <li>
    <input type="checkbox" id="task-3">
    <label for="task-3">Task 3</label>

    <ul class="sub-item">
      <li>
        <a
          class="sub-item-link"
          href="https://example.com"
          target="_blank"
        >
          More details
        </a>
      </li>
    </ul>
  </li>

  <li>
    <input type="checkbox" id="task-4">
    <label for="task-4">Task 4</label>

    <ul class="sub-item">
      <li>
        <a
          class="sub-item-link"
          href="https://example.com"
          target="_blank"
        >
          More details
        </a>
      </li>
    </ul>
  </li>
</ul>
</body>

</html>

CSS

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}

a:focus {
  outline: 2px solid orange;
}

a:visited {
  color: purple;
}

Can anyone please explain to me why my code is failing?

1 Like
2

Welcome to the forum @radjenovic.simoo

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

Happy coding

3

Hi @radjenovic.simoo

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493Ă—196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

4

I’m so sorry for this. I didn’t even look at the head section… Thoght it was connected at the start of the exercise. Thank you for your help. :smiley:

1 Like