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

HTML-CSS
1

Tell us what’s happening:

My code couldn’t pass the user stories nos 2, 13, 14, 15, 16, 17. I have really tried everything I think I know yet to no avail.

User story says I should remove the default list style from my " .todo-list ", I did and it didn’t pass.

User stories 13 to 17 are about the state of anchor elements like hover, visited, active, focus…I am confused right now.

Your code so far

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

<head>
    <meta name="viewport" content="width:device-width" initial-scale="1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Styled To-Do List</title>
</head>

<body>
    <h1>My To-Do List</h1>
<ul class="todo-list">
    <li>
        <input type="checkbox" id="gaming-keys">
        <label for="gaming-keys">Explore gaming keyboards</label>
        
        <ul class="sub-item">
            <li>
                <a href="https://www.google.com/search?q=gaming+keyboards&oq=gaming+keyboards&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDM4NzZqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8" target="_blank" class="sub-item-link">Store link</a>
                </li>
        </ul>

    </li>


    <li>
        <input type="checkbox" id="finish-report">
        <label for="finish-report">Finish the report</label>
        
        <ul class="sub-item">
            <li>
                <a href="https://www.google.com/search?q=gaming+keyboards&oq=gaming+keyboards&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDM4NzZqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8" target="_blank" class="sub-item-link">Request Access</a>
            </li>
        </ul>
    </li>


    <li>
        <input type="checkbox" id="phone-warranty">
        <label for="phone-warranty">View Phone's Warranty</label>
        
        <ul class="sub-item">
            <li>
                <a href="https://www.google.com/search?q=gaming+keyboards&oq=gaming+keyboards&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDM4NzZqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8" target="_blank" class="sub-item-link">View Receipts</a>
            </li>
        </ul>
    </li>


    <li>
        <input type="checkbox" id="check-processor">
        <label for="check-processor">Check Processor Specs</label>
        
        <ul class="sub-item">
            <li>
                <a href="https://www.google.com/search?q=gaming+keyboards&oq=gaming+keyboards&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCDM4NzZqMGo3qAIAsAIA&sourceid=chrome&ie=UTF-8" target="_blank" class="sub-item-link">View Model Number</a>
            </li>
        </ul>
    </li>
</ul>
</body>

</html>

/* file: styles.css */
html{
  background-color: rgba(128, 128, 128, 0.126);

body{
  background-color: white;
  width: 60%;
  margin: auto;
  font-family: sans-serif;
} 

h1{
  text-align: center;
  padding-top: 30px;
}


.todo-list{
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: -55px;
  padding: 30px;
  width: 80%;
}

.todo-list > li{
  border-radius: 10px;
  background-color: rgba(72, 90, 72, 0.057);
  padding: 20px;
  margin-top: 15px;
}

.sub-item{
  list-style: none;
  color: black;
  margin: 20px;
}
a{
  text-decoration: none;
  outline-color: transparent;
}

a:link{
   color: #6900ff;
  }

a:visited{
  color: #a5c300;
}

a:focus{
  text-decoration: none;
  background: #bae498;
}

a:hover{
  text-decoration: none;
  background: #cdfeaa
}

a:active{
  background: #6900ff;
  color: #cdfeaa;
}

Your browser information:

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

Challenge Information:

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

2

you have an unclosed selector here, that will solve most of the tests

1 Like
3

Thank you so much; it did take care of most of the issues I had.