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

Programming HTML-CSS
1

Tell us what’s happening:

Hello,

I am running the code provided, but the test fails saying I should have four list items in the unordered list (step no. 2). I tried to reformat the code so the structure is more clear, however to no avail. I also tried to check the number of items temporarily switching to an ordered list and it shows four items. Please help :frowning:

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>
    <main>
    <div class="main-frame">
    <h1>TO-DO list</h1>
      <ul class="todo-list">
        <div class="todo-list-item">
          <li>
            <input type="checkbox" id="checkbox-1"/> 
            <label for="checkbox-1">Do laundry</label>
            <ul class="sub-item">
              <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1" target="_blank">Like this</a></li>
            </ul>
          </li>
        </div>
        <div class="todo-list-item">
          <li>
            <input type="checkbox" id="checkbox-2"/> 
            <label for="checkbox-2">Make sandwich</label>
            <ul class="sub-item">
              <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1" target="_blank">Like this</a></li>
            </ul>
          </li>
        </div>
        <div class="todo-list-item">
          <li>
            <input type="checkbox" id="checkbox-3"/> 
            <label for="checkbox-3">Eat sandwich</label>
            <ul class="sub-item">
              <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1" target="_blank">Like this</a></li>
            </ul>
          </li>
        </div>
        <div class="todo-list-item">
          <li>
            <input type="checkbox" id="checkbox-4"/> 
            <label for="checkbox-4">Lay down</label>
            <ul class="sub-item">
              <li><a class="sub-item-link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1" target="_blank">Like this</a></li>
            </ul>
          </li>
        </div>
      </ul>
      </div>
    </main>
  </body>
</html>

/* file: styles.css */
html {
    color: #05445E;
}
h1 {
  text-align: center
}

a {
  text-decoration: none;
  color: #189AB4;
}

a:visited {
  color: #8018B4;
}

a:hover {
  color:#B43218;
}

a:focus {
  outline: #05445E;
}

a:active {
  color: #4CB418;
}

.todo-list-item {
  background-color: #75E6DA;
margin-bottom: 10px;
}


.todo-list {
  list-style: none
}

.main-frame {
  background-color: #D4F1F4;
  border: 2px black;
  border-radius: 30px;
  margin: 0px 20px;
  padding: 5px 20px
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list
https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list

2

are you sure this is a good idea?
a div is not a list item

3

Thank you, this was very helpful! I put the div inside the list item, not the other way around. It both passed the text and looked better :slight_smile: