Merged post - Build a Stylized To-Do List - Build a Stylized To-Do liststyle a list issue

HTML-CSS
21

hi. okay. so do the list with label and the input tag. then do i then put the second list, and then paste the anchor links there. is that what you are saying. is that how i do it. a bit confused.
marvin.
ps: if that is what you are saying fine. not the clearest insturctions to follow, as totally blind and using a screen reader. let me know if that is what i need to do.
marvin.

22

You have addressed the first two bulleted items inside of User Story #3. Now continue with the last two. Try it, then post your updated code if you need more help.

23

hi. totally confused. where do i put the second list. and do i need to separate my label and input elements and have them on separate lines. just tell me where to put the second list, and if i have got this wrong, please explain in plain terms where to put this as a screen reader user. so please help.
totally frustrated and going around and around in circles. and have read the insturctions. maybe dumb, stupid or not understand or not able to see. so please help.
totally frustrated.
and pasting the errors. where do i put them and then how to structure the code better for the lists.
please help.
if today if possible.
marvin.
ps: pasting the errors below.

  • Failed:9. After the label elements, there should be an unordered list with the class sub-item.

  • Failed:10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

24

hi. i do have the input and labels on separate lines.
so how to get the second list working and how to fix.
can you let me know asap in simple language.
marvin.

25

hi. just help me out, cannot get user story 9 and 10 to pass. so what am i missing. how to code. give me an example how to do this, and the links to the dummy site, do they need to be separate id and links, very frustrated. just help me out. not working and tried a few things, but not working, totally frustrated. so do i need four links, and then do i need to have differnet ids for each link, help me out asap. been waiting 2 or 3 hours for help.
totally stuck and now just totally frustrated. cannot seem to figure this out, as totally blind and using a screen reader. did try chat gtp. but did not fix it. so maybe help me out, how to get this working and what am i missing, so the sample code for the second unordered list where to put this, and how to get it to pass. need to hear the code so where to put it. can you do this now if possible if any one is online from the team or staff. marvin..

26

hi, an did then google and did get a utube video, but no code sample to hear the actual code. should have a way to then view the code in these utube videos.
marvin.

27

Preformatted textFailed:10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.```
hi. okay googled and did find a sample code from some one had done else a few years back or a few months. so got this to work only test 10, not liking it. so how to fix. what am i doing wrong. sorry, trying to figure this out my self. so will then paste my code and the error. so can you show me how to fix this.
marvin.
ps: pasting below.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Style To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<ul class="todo-list">
<li class="todo-list">
     <input type="checkbox" id="gaming" name="ganing" value="gaming">
<label for="gaming">Explore gaming keyboards</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">Store</a> 
</ul>
</li>
 <li class="todo-list">
    <input type="checkbox" id="request" name="request" value="request">
<label for="request">Finish the report</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">Store</a> 
</ul>
</li>
<li class="todo-list"> 
    <input type="checkbox" id="phone" name="phone" value="phone">
<label for="phone">View Phone's Warranty</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">Store</a> 
</ul>
</li>
<li class="todo-list"> 
    <input type="checkbox" id="model" name="model" value="model">
<label for="model">View Model Number</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">Store</a> 
</ul>
</li>
</body>
</html>
28

hi. sorry my jaws screen reader was having an issue. so the code for the project is there and the error. so how to fix. how to get this to pass, so whats the correct code for this just one issue in the html. the other error is to do with css.but will get to that later.can you let me know how to fix today if possible. dont have all day to wait. got other things to do and need to get this to work today. been trying to get this to work for the past three days.
marvin.

29

hi. only this issue now. so how to fix. marvin.
ps: pasting below.
Failed:10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

30

hi. okay will paste my css and not liking the color when it changes or the changes when visited. how to fix.
first time doing the css color stuff.
marvin.
ps: pasting below.

  • Failed:15. The links should change color when hovered over.
    ul {
    list-style-type: square;
    }

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

  a:visited {
      color: purple;
  }

  a:hover {
      color: grene;
  }

  a:focus {
      outline: solid;
  }

  • Failed:16. The links should change color when they are being clicked.

31

hi. okay well got an error on story 10. not liking it. so how to fix. will paste my updated code. marvin.
ps: pasting below.


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<title>Style To-Do List</title>
</head>
<body>
<h1>My To-Do List</h1>
<ul class="todo-list">
<li class="todo-list">
     <input type="checkbox" id="gaming" name="ganing" value="gaming">
<label for="gaming">Explore gaming keyboards</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">Store</a> 
</ul>
</li>
 <li class="todo-list">
    <input type="checkbox" id="request" name="request" value="request">
<label for="request">Finish the report</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">Request Access</a> 
</ul>
</li>
<li class="todo-list"> 
    <input type="checkbox" id="phone" name="phone" value="phone">
<label for="phone">View Phone's Warranty</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">View Receipts</a> 
</ul>
</li>
<li class="todo-list"> 
    <input type="checkbox" id="model" name="model" value="model">
<label for="model">View Model Number</label> 
<ul class="sub-item">
        <a href="https://www.freecodecamp.org/learn/full-stack-developer/lab-stylized-to-do-list/build-a-stylized-to-do-list" target="_blank" class="sub-item">View Model Number</a> 
</ul>
</li>
</body>
</html>
32

hi. and heres the failure message. so how to fix.
marvin.
Failed:10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

33

You have been asked previously to be patient. Everyone who answers questions is doing so on their own time. Other people have their own code to work on as well. When people answer questions, it’s because they have time and know how to help. Some people may not know how to help. Posting 10 messages in a row is not going to make people available faster. Be patient, and when someone has time and availability, you will more than likely receive a response.

1 Like
34

Where in the instructions were you asked to add a class of .todo-list inside a li element?

Your ul.sub-item element does not contain a li element, and where in the instructions were you asked to add a class of .sub-item to an a element?

The instructions and hints are giving you very specific suggestions on how to fix your code. Please spend more time trying to understand them and carefully apply them rather than constantly demanding help.

UPDATE: Just wanted to share that I know of a few developers who are visually challenged. I worked with one. These developers have risen above their limitation to be successful in their field. My hope is that you will continue to stay motivated to do the same. Good luck.

35

hi, it says in the instructions for the user story. so, unless i am doing this wrong. so how to get this to work or how to do this. did google and some one had a similar project. so looked at his code. so am i going about hthis the wrong way. please help. so pasting the error message below. so how to fix, if i have got this wrong, then show me how to get this working.
marvin.
ps: pasting the error message below.
please help.
have tried and tried. so if i am doing this wrong, then let me know, did wait for over 7 hours yesterday. and it was not till late yesterday that i got a response from you.
Failed:10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link…

36

hi. heres the first instruction . and pasting below. to put a class called todo-list.
marvin.
ps: pasting below.

  1. You should have one unordered list with the class todo-list. .
37

I would think very carefully about what the directions are asking you to do.

That is not telling you to add a clas “todo-list” to any li elements. what is it telling you to add the class to?

38

hi. not sure. tell me what it is asking me to do. not the clearest instructions or trying to figure out what it is saying. you tell me what it is saying.
marvin.

39

hi. heres the instructions. so what am i missing. you tell me what i should do.
and if i am going about it the wrong way. sorry, trying my best as a blind person using a screen reader.
so pasting below.
marvin.

  1. You should have one unordered list with the class todo-list.
  2. Inside the unordered list, you should have four list items.
  3. Inside each list item, there should be:
  • An input element with the type checkbox and id set to a unique value.
  • A label element with the for attribute set to the corresponding input element’s id.
  • An unordered list with the class sub-item.
  • A list item with an anchor element in it. The anchor should have the class sub-item-link, a valid href value, and a target value that makes the link open in a new tab.
  1. Your anchor elements shouldn’t have any default text decoration.
  2. You should set the text color of the links to a color of your choice.
  3. When your links are visited, the color should change to another color of your choice.
  4. When your links are hovered over, the color should change to another color of your choice.
  5. When your links are focused, there should be a colored outline around the link.
  6. When your links are clicked, the color should change to another color of your choice.
40

hi, is any staff online here to help me out. been waiting over 2 hours, and waited over 7 hours yesterday. so what am i doing wrong. please advice. be gentle with me. trying my best as a blind person using a screen reader.
marvin from seaford rise, adelaide, south australia, australia..