Step#50 and #51 Build a Book Inventory App

HTML-CSS
1

Hi everyone! I hope everybody is having a fine evening tonight! Well, I made it this far! I really need your help on this particular project. It’s a little challenging which is good and I thought I would take a crack at it and post in the freecodecamp forum for the first time. I am really trying to figure out Step#50 and #51 of building a book inventory application. I can’t seem to figure out how to write the code correctly for nth-child. Please help! Thank you in advance!!This text will be blurred Build a Book Inventory App

2

Welcome to the forum @tanksarriaga

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Happy coding

3
Book Inventory 
<section>

  <h1>Book Inventory</h1>

<table>

 <thead>

   <tr>

   <th>Title</th>

   <th>Author</th>

   <th>Category</th>

   <th>Status</th>

   <th>Rate</th>

   </tr>

  <tr class="to-read">

    <td>Passion of the Christ</td>

    <td>Mel Gibson</td>

    <td>Drama</td>

    <td><span class="status">To Read</span></td>

    <td><span class="rate one"><span></span><span></span><span></span></span></td>

  </tr>

  <tr class="in-progress">

    <td>Back to the Future</td>

    <td>Robert Zemeckis</td>

    <td>Adventure</td>

    <td><span class="status">In Progress</span></td>

    <td><span class="rate one"><span></span><span></span><span></span></span></td>

  </tr>

  <tr class="in-progress">

    <td>Peter Rabbit</td>

    <td>Beatrix Potter</td>

    <td>Children's Book</td>

    <td><span class="status">In Progress</span></td>

    <td><span class="rate two"><span></span><span></span><span></span></span></td>

  </tr>

  <tr class="to-read">

    <td>Dumbo</td>

    <td>Warner Bros.</td>

    <td>Cartoon</td>

    <td><span class="status">To Read</span></td>

    <td><span class="rate two"><span></span><span></span><span></span></span></td>

  </tr>

  <tr class="read">

    <td>iRobot</td>

    <td>Will Smith</td>

    <td>Fantasy</td>

    <td><span class="status">Read</span></td>

    <td><span class="rate three"><span></span><span></span><span></span></span></td>

  </tr>

 

 </tbody>

body {position: absolute;background-color: gray;color: white;}h1 {font-style: italic;}tr[class=“read”]{background-image: linear-gradient(to top, #0000ff, #ff0000);color: #0AF;font-weight: bold;}tr[class=“to-read”]{background-image: linear-gradient(to top, #0000ff, #ff0000);color: #0F0;font-weight: bold;font-style: italic;}tr[class=“in-progress”]{background-image: linear-gradient(to top, #0000ff, #ff0000);color: #FFF000;font-weight: bold;}span {display: inline-block;}tr[class=“to-read”] span[class=“status”]{background-image: linear-gradient(to left, #FFF, #A23FFF, #E002F8);border: 2px solid #000;}tr[class=“read”] span[class=“status”]{background-image: linear-gradient(to left, #FFF, #A23FFF, #E002F8);border: 2px solid #000;}tr[class=“in-progress”] span[class=“status”]{background-image: linear-gradient(to left, #FFF, #A23FFF, #E002F8);border: 2px solid #000;}span[class=“status”],span[class^=“rate”]{background-color: #000;height: 100px;width: 100px;padding: 2px;}span[class^=“rate”] > span{height: 10px;width: 50px;font-style: underline;border: 3px solid white;border-radius: 5px;margin: 2px; background-color: orange;}span[class~=“one”] :first-child{border-radius: 2px;background-image: linear-gradient(to top, #00FF00, #00FFF0);}span[class~=“two”] :nth-child(-n+2){border-radius: 2px;background-image: linear-gradient(to top, #00FF00, #00FFF0);}span >[class~=“three”]:nth-child(-n+3){background-image: linear-gradient(to left, #A24A30, #00FFF0);

This text will be blurred

}

4

I clicked on the Help button, but all I found was other people stuck on steps 46- 51?

5

I’m trying to do this right.

6

the suggestion was to use the help button to create your own topic, so that all that is needed to help you is automatically included, which is the link to the challenge, and your code properly formatted

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

Welcome to the forum @tanksarriaga

The last selector is missing a closing curly brace.

For test 50 , which selector is the descendant?

Solving 50 will also solve 51.

Happy coding

8

‘‘‘html Thank you so much for pointing that out. Now I will hopefully know how to post in the forum correctly. ‘‘‘html}

9

I’m confused, I don’t seem to be missing any curly brace?

10

Hi @tanksarriaga

Here is a snippet of your code. I inserted spacing for indentation.

Happy coding

1 Like
11

I knew exactly what you were talking about, but that wasn’t it though. Anyway, I passed it finally! I appreciate you guys!

1 Like