Build a Book Inventory App - Build a Book Inventory App

Jakemeister37 · April 28, 2025, 9:49pm

Tell us what’s happening:

Hi,
I seem to be stuck trying to get steps 15-17 figured out. I have tried looking back on the course material and of course searching online.
Thanks.

Your code so far

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

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Book Inventory</h1>
<table>  
    <tr>
  <th>Title</th>
  <th>Author</th>
  <th>Category</th>
  <th>Status</th>
  <th>Rate</th>
  </tr>
  <tr class="read">
        <td>The Dante Connection</td>
        <td>Estelle Ryan</td>
        <td>Fiction</td>
        <td>
          <span class="status">Read</span>
        </td>
        </td>
        <td>
          <span class="rate one">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td> 
  <tr class="to-read">
     <td>The Black List</td>
        <td>Joe Smith</td>
        <td>Fiction</td>
        <td>
          <span class="status">To Read</span>
        </td>  
        </td>
        <td>
          <span class="rate two">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
  </tr>
  <tr class="in-progress">
     <td>A Book</td>
        <td>Faith Daly</td>
        <td>Fiction</td>
        <td>
          <span class="status">In Progress</span>
        </td>
        </td>
        <td>
          <span class="rate three">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
        <td>
          <span class="rate">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
  </tr>
  </table>
</body>

</html>

/* file: styles.css */
tr[class='read']{background-image: linear-gradient(30deg,purple, green)}
tr[class='to-read'] {  background-image: linear-gradient(30deg,purple, green)
}
tr[class='in-progress'] {
  background-image: linear-gradient(30deg,purple, green)
}
span {
  display: inline-block;
}
tr[class="to-read"] span[class="status"] {
  border: 3px solid blue;
  background-image: linear-gradient(41deg, lightblue, teal);
  border-radius: 7px;
}
tr[class="read"] span[class="status"] {
  border: 3px solid yellow;
  background-image: linear-gradient(41deg, teal, purple);
  border-radius: 10px;
}
tr[class="in-progress"] span[class="status"] {
 border: 3px dotted pink;
 background-image: linear-gradient(41deg, teal, purple)
 }
span[class="status"] span[class="rate"] {
  height: 35px;
  width: 50px;
  padding: 3px 3px;
  text-align: center;
  span[one]{
background-image: linear-gradient(41deg, orange, teal);span[two]{
background-image: linear-gradient(41deg, orange, teal);
span[three]{
background-image: linear-gradient(41deg, orange, teal);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

ILM · April 28, 2025, 9:55pm

there are syntax issues in your css, you should fix those before trying to tackle the failing test

Jakemeister37 · April 28, 2025, 10:08pm

Thanks. Do you mean the last three selectors? I just did those out roughly until I figure out how to do them properly.

ILM · April 28, 2025, 10:11pm

you still need to have the curly brackets in the rigth place

Jakemeister37 · April 28, 2025, 11:27pm

Thanks. I think I fixed that. I see the closing ones were missing.

span[one]{

background-image: linear-gradient(41deg, orange, teal);

}

span[two]{

background-image: linear-gradient(41deg, orange, teal);

span[three]{

background-image: linear-gradient(41deg, orange, teal);

}

Hopefully, that’s better. I’m having trouble with the descendants syntax. I couldn’t find info on it that was applicable to this circumstance.

ILM · April 29, 2025, 7:47am

you have already written selectors that target descendants of other elements, for example here:

Jakemeister37 · May 11, 2025, 8:52pm

Tell us what’s happening:

You should have an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate. This is where I’m at now. Help!

Your code so far

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

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Book Inventory</h1>
  <table>
    <thead>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </thead>
    <tbody>
      <tr class="in-progress">
        <td>A Book</td>
        <td>Faith Daly</td>
        <td>Fiction</td>
        <td>
          <span class="status">
            In Progress
          </span>
        </td>
        <td>
          <span class="rate">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="to-read">
        <td>
          The Black List
        </td>
        <td>Joe Smith</td>
        <td>Fiction</td>
        <td>
          <span class="status">
            To Read
          </span>
        </td>
        <td>
          <span class="rate">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="read">
        <td>
          The Dante Connection
        </td>
        <td>Estelle Ryan</td>
        <td>Fiction</td>
        <td>
          <span class="status">
            Read
          </span>
        </td>
        <td>
          <span class="rate two">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="read">
        <td>
          Another Book
        </td>
        <td>An Author</td>
        <td>Fiction</td>
        <td>
          <span class="status">
            Read
          </span>
        </td>
        <td>
          <span class="rate three">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

/* file: styles.css */
tr[class='read'] {
  background-image: linear-gradient(30deg,purple, green)
}
tr[class='to-read'] {
  background-image: linear-gradient(30deg,purple, green)
}
tr[class='in-progress'] {
  background-image: linear-gradient(30deg,purple, green)
}
span {
  display: inline-block;
}
tr[class="to-read"] span[class="status"] {
  border: 3px solid blue;
  background-image: linear-gradient(41deg, lightblue, teal);
  border-radius: 7px;
}
tr[class="read"] span[class="status"] {
  border: 3px solid yellow;
  background-image: linear-gradient(41deg, teal, purple);
  border-radius: 10px;
}
tr[class="in-progress"] span[class="status"] {
 border: 3px dotted pink;
 background-image: linear-gradient(41deg, teal, purple)
 }
 span[class="status"] span[class="rate"] {
  height: 35px;
  width: 50px;
  padding: 3px 3px;
 }
 span[class="one"]
 :nth-child(1) {
  background-image: linear-gradient(41deg, turquoise, yellow);
 }
   span[class="two"] :nth-child(-n + 2) {
  background-image: linear-gradient(41deg, turquoise, yellow);
  }
  span[class="two"] :nth-child(2) {
  background-image: linear-gradient(45deg, orange, yellow);
}
  span[class="three"] :nth-child {
  background-image: linear-gradient(41deg, turquoise, yellow);
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:138.0) Gecko/20100101 Firefox/138.0

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

Teller · May 12, 2025, 12:17am

Hi @Jakemeister37

How do you separate multiple selectors, and how to select a class starting with a specific value?

Happy coding

Jakemeister37 · May 12, 2025, 5:16pm

Hi. Thank you. I changed it to this.

 span[class="status"], span [class^="rate"] {
  height: 35px;
  width: 50px;
  padding: 3px 3px;
 }

and it was working, but I don’t know what I did because now it isn’t working.

JuniorQ · May 12, 2025, 5:22pm

Hi,
Can you share your latest code and explain where you’re failing?

Jakemeister37 · May 12, 2025, 5:28pm

Hi Thanks. I did get it working again, but now I’m stuck from 39 to 50 in the tests.

tr[class='read'] {
  background-image: linear-gradient(30deg,purple, green)
}
tr[class='to-read'] {
  background-image: linear-gradient(30deg,purple, green)
}
tr[class='in-progress'] {
  background-image: linear-gradient(30deg,purple, green)
}
span {
  display: inline-block;
}
tr[class="to-read"] span[class="status"] {
  border: 3px solid blue;
  background-image: linear-gradient(41deg, lightblue, teal);
  border-radius: 7px;
}
tr[class="read"] span[class="status"] {
  border: 3px solid yellow;
  background-image: linear-gradient(41deg, teal, purple);
  border-radius: 10px;
}
tr[class="in-progress"] span[class="status"] {
 border: 3px dotted pink;
 background-image: linear-gradient(41deg, teal, purple)
 }
 span[class="status"], span[class^="rate"] {
  height: 35px;
  width: 50px;
  padding: 3px 3px;
 }
 span[class="one"], span
 :nth-child(1) {
  background-image: linear-gradient(41deg, turquoise, yellow);
 }
   span[class="two"] :nth-child(-n + 2) {
  background-image: linear-gradient(41deg, turquoise, yellow);
  }
  span[class="two"] :nth-child(2) {
  background-image: linear-gradient(45deg, orange, yellow);
}
  span[class="three"] :nth-child {
  background-image: linear-gradient(41deg, turquoise, yellow);
  }

JuniorQ · May 12, 2025, 5:42pm

Okay, so step 39 tells you to target span elements that are direct children of span elements with class of rate. Have you tried something for that?

Jakemeister37 · May 12, 2025, 5:45pm

I realized I had missed step 14 in the instructions, so I working on that now.

Jakemeister37 · May 12, 2025, 5:50pm

ok back to figuring out 39.

JeremyLT · May 12, 2025, 5:51pm

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

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

Jakemeister37 · May 12, 2025, 5:55pm

ok thanks. I will try to rememember that.

JuniorQ · May 12, 2025, 5:57pm

Great! Let’s see what you’ve tried so far.

Jakemeister37 · May 12, 2025, 5:59pm

 span[class="one"]
 :nth-child(1) {
  background-image: linear-gradient(41deg, turquoise, yellow);
 }
   span[class="two"] :nth-child(-n + 2) {
  background-image: linear-gradient(41deg, turquoise, yellow);
  }
  span[class="two"] :nth-child(2) {
  background-image: linear-gradient(45deg, orange, yellow);
}
  span[class="three"] :nth-child {
  background-image: linear-gradient(41deg, turquoise, yellow);
  }

JuniorQ · May 12, 2025, 6:02pm

Do any of these target the spans mentioned in step 39?
Target the spans that are inside the span with the class of rate, which means your attribute selector should look for classes starting with rate.

Jakemeister37 · May 12, 2025, 6:18pm

Thanks again. I’m a bit confused because the instructions don’ t mention the rate class.

Topic		Replies	Views
Having trouble on an HTML Responsive Web Design course HTML-CSS	3	440	December 11, 2022
I need help for the step 51 HTML-CSS	3	417	December 26, 2022
Is there any one who can help me on html step 60 HTML-CSS	2	437	January 5, 2023
Learn HTML by Building a Cat Photo App - Step 43 HTML-CSS	2	173	June 27, 2024
I need help for pasisng the 63 step HTML-CSS	5	283	December 4, 2022

Build a Book Inventory App - Build a Book Inventory App

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics