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

HTML-CSS
1

Tell us what’s happening:

When running tests, I can’t get #3 to check, even though I have four list items within my unordered list. Here is my code. I have 4 total li tags within a ul tag.

Any help is appreciated!
Thanks!

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 for="apples">
            <input type="checkbox" id="apples">
            <label for="apples">Apples</label>
        
        </li>
        
        <li>
            <input type="checkbox" id="pickles">
            <label for="pickles">Pickles</label>
        
        </li>
        
        <li>
            <input type="checkbox" id="dates">
            <label for="dates">Dates</label>
            
        </li>
        
        <li>
            <input type="checkbox" id="strawberrys">
            <label for="strawberrys">Strawberrys</label>
            
        </li>
        
    </ul>
</body>

</html>

/* file: styles.css */
.todo-list {
  list-style: none;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

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

2

Hi. The label elements should have a for attribute corresponding to the id of the input element. You have put the for attribute in the first list item element.

You have not done a sub-item LI in each of the list elements with an anchor element. You need to complete all the stories at 3 to pass.

3

Yep, that did it. I should have trusted the process and kept going through with the steps. Thank you!

1 Like