Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

Why this error is coming.

error 1
error 1881×273 15.9 KB

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
<h1>My To-Do List</h1>
<ul class-"todo-list">
    <li>
        <input id="check_1" type="checkbox">
        <label for="check_1">Explore gaming keyboards</label></li>
        <ul class="sub-item">
            <li><a href="store.com" class="sub-item-link" target="_blank">Store link</a></li>
        </ul>
    
    <li>
        <input id="check_2" type="checkbox">
        <label for="check_2">Finish the report</label></li>
        <ul class="sub-item">
            <li><a href="View_Receipts.com" class="sub-item-link" target="_blank">Request Access</a></li>
        </ul>
    <li>
        <input id="check_3" type="checkbox">
        <label for="check_3">View Phone's Warranty</label></li>
        <ul class="sub-item">
            <li><a href="View_Receipts.com" class="sub-item-link" target="_blank">View Receipts</a></li>
        </ul>
    <li>
        <input id="check_4" type="checkbox">
        <label for="check_4">Check Processor Specs</label></li>
        <ul class="sub-item">
            <li><a href="View_Receipts.com" class="sub-item-link" target="_blank">View Model Number</a></li>
        </ul>
</ul>
</body>

</html>```
### Your code so far


```html
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
<h1>My To-Do List</h1>
<ul class-"todo-list">
    <li>
        <input id="check_1" type="checkbox">
        <label for="check_1">Explore gaming keyboards</label></li>
        <ul class="sub-item">
            <li><a href="store.com" class="sub-item-link" target="_blank">Store link</a></li>
        </ul>
    
    <li>
        <input id="check_2" type="checkbox">
        <label for="check_2">Finish the report</label></li>
        <ul class="sub-item">
            <li><a href="View_Receipts.com" class="sub-item-link" target="_blank">Request Access</a></li>
        </ul>
    <li>
        <input id="check_3" type="checkbox">
        <label for="check_3">View Phone's Warranty</label></li>
        <ul class="sub-item">
            <li><a href="View_Receipts.com" class="sub-item-link" target="_blank">View Receipts</a></li>
        </ul>
    <li>
        <input id="check_4" type="checkbox">
        <label for="check_4">Check Processor Specs</label></li>
        <ul class="sub-item">
            <li><a href="View_Receipts.com" class="sub-item-link" target="_blank">View Model Number</a></li>
        </ul>
</ul>
</body>

</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36 Edg/136.0.0.0

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

are you sure you are writing the class attribute correctly?

3

Changed some but some issues still persists

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="check_1">
            <label for="check_1">Explore gaming keyboards</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">Store link</a></li></ul>
        </li>
        <li>
            <input type="checkbox" id="check_2">
            <label for="check_2">Finish the report</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">Request Access</a></li></ul></li>
        <li>
            <input type="checkbox" id="check_3">
            <label for="check_3">View Phone's Warranty</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">View Receipts</a></li>
    </ul></li>
    <li>
            <input type="checkbox" id="check_4">
            <label for="check_4">Check Processor Specs</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">View Model Number</a></li>
    </ul></li>  
</body>
</html>

/* unvisited link */
a:link {
  color: blue;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: green;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: hotpink;
  text-decoration: none;
}

li{
  margin: 20px;
  background-color: #c0eeb9;
  border-radius: 10px;
}

body > ul{
  list-style-type: none;
}

error 3
error 3580×250 9.97 KB

4

To satisfy 14, think about what the default anchor tag selector would be. And I see no CSS to satisfy 17.

5

Satisfied all the points except no. 16.

a{
  text-decoration: none;
}

/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:clicked {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

a:focus {
  outline: 2px solid violet; /* Blue outline */
  outline-offset: 2px;
}

li{
  margin: 20px;
  background-color: #c0eeb9;
  border-radius: 10px;
  padding: 5px;
}

body > ul{
  list-style-type: none;  
}

h1{
  margin: 20px;
  text-align: center;
}
6

What about a default color?

7

I don’t get!!
Would u kindly explain please!!

8

you added a default text-decoration, right? now you need to add a default color

9

I’ll try. If there is no default color set on the anchor tag, how can it change color when it changes state?

10

Still nothing changed!!

11

because the browser gives it a color?

1 Like
12

show your updated code please

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>My To-Do List</h1>
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="check_1">
            <label for="check_1">Explore gaming keyboards</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">Store link</a></li></ul>
        </li>
        <li>
            <input type="checkbox" id="check_2">
            <label for="check_2">Finish the report</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">Request Access</a></li></ul>
        </li>
        <li>
            <input type="checkbox" id="check_3">
            <label for="check_3">View Phone's Warranty</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">View Receipts</a></li>
    </ul>
        </li>
    <li>
            <input type="checkbox" id="check_4">
            <label for="check_4">Check Processor Specs</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href=" https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list#" target="_blank">View Model Number</a></li>
    </ul>
    </li>
    </ul> 
</body>
</html>

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

/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:clicked {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

a:focus {
  outline: 2px solid violet; /* Blue outline */
  outline-offset: 2px;
}

li{
  margin: 20px;
  background-color: #c0eeb9;
  border-radius: 10px;
  padding: 5px;
}

body > ul{
  list-style-type: none;  
}

h1{
  margin: 20px;
  text-align: center;
}
14

now there is an issue, do you think if the color is the same for default and when clicked, the color can change?

I know you see them change, but I don’t think the tests are considering a:link

1 Like
15

Yes I changed the default color!!
But still no change.

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

/* unvisited link */
a:link {
  color: blue;
}

/* visited link */
a:clicked {
  color: green;
}

/* mouse over link */
a:hover {
  color: red;
}

a:focus {
  outline: 2px solid violet; /* Blue outline */
  outline-offset: 2px;
}

li{
  margin: 20px;
  background-color: #c0eeb9;
  border-radius: 10px;
  padding: 5px;
}

body > ul{
  list-style-type: none;  
}

h1{
  margin: 20px;
  text-align: center;
}
16

are you sure that clicked is an existing pseudoclass?

18

removed clicked but the issue persists!!

19

no, it’s not enough, you need to use the right one instead of this one that doesn’t exist

20

Does this bit from Copilot help? Not sure if tests would be checking for the order, but this does cover the basic link states. Do you have all of them?

To ensure proper styling, the pseudo-classes should follow this order in your CSS:

  1. :link
  2. :visited
  3. :hover
  4. :active
21

please remember that AI generated content is against the rules