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

Curriculum Help
,
1

Tell us what’s happening:

tests #9, 10. I feel like I’m not labeling right but not sure why the current code doesn’t work for it.

Thank you!

Your code so far

<!-- file: index.html -->
<!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 class="todo-list"> 
            <input type="checkbox"id="water"/>
            <label for="water">text</lable>
                <ul class="sub-item">
                    <li>
                        <a class="sub-item-link" href="https://www.google.com" target="_blank">af</a>
                    </li>
                </ul>
        </li>

        <li class="todo-list">
            <input type="checkbox"id="water"/>
            <label for="water">text</lable>
                <ul class="sub-item">
                   <li>
                        <a class="sub-item-link" href="https://www.google.com" target="_blank">af</a>
                    </li>
                </ul>
        </li>

        <li class="todo-list"> 
            <input type="checkbox"id="water"/>
            <label for="water">text</lable>
                <ul class="sub-item">
                   <li>
                        <a class="sub-item-link" href="https://www.google.com" target="_blank">af</a>
                    </li>
                </ul>
        </li>

        <li class="todo-list">
             <input type="checkbox" id="water"/>
            <label for="water">text</lable>
                <ul class="sub-item">
                   <li>
                        <a class="sub-item-link" href="https://www.google.com" target="_blank">af</a>
                    </li>
                </ul>
        </li>

    </ul>
</body>

</html>

/* file: styles.css */
body{
  margin: 100px;
  background-color: pink;
}
.sub-item{
  text-decoration: none;
}
.sub-item-link{
  text-decoration: none;
}
.todo-list{background-color: white;
  color: green;

  padding: 100px;
  margin-top: 15px;
  margin-right: 15px;
  
}


a {
  text-decoration: none;
}

ul,li{
  background-color: pink
}

a:link{color: yellow;

}

a:visited{color: black;

}
a:hover{color: purple;

}
a:active{color: red;

}
a:focus{ 
  outline: 3px black;
}

sub-item-link:active{
  color:white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-stylized-to-do-list/66c051d13a6a20255a963695.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @josesoria276,

Please check the closing tags of your label elements. You have a typo.

Also, note that an id attribute value must be unique to each element.

Happy coding

3

@dhess are the best! gotta love the typos :laughing: