Build a book inventory app

HTML-CSS
1

I’m having trouble passing this certification test. Let me know if anything is wrong.
“HTML code”

Book Inventory

Book Inventory

  <tbody>
    <tr class="read">
      <td>Atomic Habits</td>
    <td>James Clear</td>
    <td>Self-Help</td>
    <td><span class="status">Read</span></td>
    <td><span class="rate three"> <span></span><span></span><span></span></span></td>
      </tr>
      <tr class="to-read">
        td>The Pragmatic Programmer</td>
    <td>Andrew Hunt</td>
    <td>Programming</td>
    <td><span class="status">To Read</span></td>
    <td>
      <span class="rate">
        <span></span><span></span><span></span>
      </span>
    </td>
        </tr>
        <tr class="in-progress">
          <td>Clean Architecture</td>
    <td>Robert C. Martin</td>
    <td>Software</td>
    <td><span class="status">In Progress</span></td>
    <td>
      <span class="rate">
        <span></span><span></span><span></span>
      </span>
    </td>
          </tr>
    </tbody>
Title Author Category Status Rate

“CSS code”

body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f4f6fb;
}

h1 {
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  background: #222;
  color: white;
}

/* ===== ROW BACKGROUNDS (ATTRIBUTE SELECTORS) ===== */

tr[class~=“read”] {
background-image: linear-gradient(to right, #e6ffe6, #ffffff);
}

tr[class~=“to-read”] {
background-image: linear-gradient(to right, #fff5cc, #ffffff);
}

tr[class~=“in-progress”] {
background-image: linear-gradient(to right, #e6f0ff, #ffffff);
}

/* ===== SPAN DISPLAY ===== */
span {
  display: inline-block;
}

/* ===== STATUS STYLING ===== */

tr[class~=“to-read”] span[class=“status”] {
border: 2px solid #d4a200;
background-image: linear-gradient(to right, #ffe066, #fff3bf);
}

tr[class~=“read”] span[class=“status”] {
border: 2px solid #2f9e44;
background-image: linear-gradient(to right, #69db7c, #d3f9d8);
}

tr[class~=“in-progress”] span[class=“status”] {
border: 2px solid #1c7ed6;
background-image: linear-gradient(to right, #74c0fc, #d0ebff);
}

/* ===== STATUS + RATE SIZE ===== */
span[class="status"],

span[class^=“rate”] {
height: 28px;
width: 120px;
padding: 4px;
}

/* ===== RATE DOTS ===== */
span[class^="rate"] > span {
  border: 1px solid #333;
  border-radius: 50%;
  margin: 2px;
  height: 14px;
  width: 14px;
  background-color: #ddd;
}

/* ===== RATE FILLS ===== */

span[class*=“one”] span:first-child {
background-image: linear-gradient(to top, #51cf66, #b2f2bb);
}

span[class*=“two”] span:first-child,
span[class*=“two”] span:nth-child(2) {
background-image: linear-gradient(to top, #51cf66, #b2f2bb);
}

span[class*=“three”] span {
background-image: linear-gradient(to top, #51cf66, #b2f2bb);
}

2

It’s hard to know what’s wrong without the instructions. Can you link to the lab?

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 Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for 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.

Thank you.

3

  • Failed:46. You should have an attribute selector to target the first descendant of span elements that have the word one as a part of their class value.

  • Failed:47. You should use an attribute selector to target the first descendant of span elements that have the word one as a part of their class value and set its background-image property to use a linear-gradient.

  • Failed:48. You should have an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value.

  • Failed:49. You should use an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value and set their background-image property to use a linear-gradient.

  • Failed:50. You should have an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value.

  • Failed:51. You should use an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value and set their background-image property to use a linear-gradient.