Book Inventory App Project

ruelastech7 · January 7, 2025, 8:26pm

Hey, I am working on the Book Inventory App in the Full-Stack Developer Curriculum. I am having a hard time getting the last few criteria met.
The criteria is:

You should use an attribute selector to target the first descendant of span elements that have one as a part of their class value and set its background-image property to use a linear-gradient.
You should use an attribute selector to target the first two descendants of span elements that have two as a part of their class value and set their background-image property to use a linear-gradient.
You should use an attribute selector to target the three span elements that are descendants of span elements that have three as a part of their class value and set their background-image property to use a linear-gradient.

The CSS I am using to try and accomplish this is:

span[class*="one"] span:first-of-type {
  background-image: linear-gradient(white, black);
}

span[class*="two"] span:nth-of-type(-n+2) {
  background-image: linear-gradient(white, black);
}

span[class*="three"] span {
  background-image: linear-gradient(white, black);
}

The display is showing that I am selecting the spans as desired but I am not meeting the criteria which is preventing me from completing the lab. Not sure if there is something I am missing or maybe this is a possible bug?

Teller · January 7, 2025, 9:14pm

Hi @ruelastech7

Please post your html

Happy coding

ruelastech7 · January 8, 2025, 1:24am

Forsure, this is what I have:

<!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>
          Trumpet Of The Swan
        </td>
        <td>E.B White</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>
          Mere Christianity
        </td>
        <td>C.S. Lewis</td>
        <td>Non-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>
          My Sister's Keeper
        </td>
        <td>Jodi Picoult</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>
          The Candy Dish
        </td>
        <td>Kobi Yamada</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>

Teller · January 8, 2025, 2:15am

None of the span elements have a class value of .one

ruelastech7 · January 8, 2025, 2:33am

I understand. It’s not required that they do. Either way, criteria 2. and 3. aren’t being marked complete with the code I have so far.

ruelastech7 · January 8, 2025, 2:34am

The display is showing I am actually selecting the correct spans by showing the linear-gradient effect but the criteria won’t be marked as complete.

ruelastech7 · January 8, 2025, 3:22am

@ILM , @QuincyLarson, is this a possible bug in the Full Stack Dev Cert?

ILM · January 8, 2025, 9:13am

do not ping random people that are not in the discussion please

can you share a link to the project? and your full css?

Dario_DC · January 8, 2025, 9:28am

@ruelastech7 Your code won’t pass as tests don’t expect you to use :first-of-type or :nth-of-type but only :first-child and nth-child.

I will open a PR to fix it.

Edit: I can add that the tests require you to select span elements that have the word one or two as a part of their class value. Meaning that it should be a white-space separated value, and not simply contained in the class value.

ruelastech7 · January 8, 2025, 4:25pm

Thank you @Dario_DC. Changing * to ~ worked for the last two tests, selecting all of the descendants in a span containing “three”. The other two tests aren’t working still, even after changing it to child instead of type.

Here is my updated html and css:

<!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>
          Trumpet Of The Swan
        </td>
        <td>E.B White</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="read">
        <td>
          Mere Christianity
        </td>
        <td>C.S. Lewis</td>
        <td>Non-Fiction</td>
        <td>
          <span class="status">
            Read
          </span>
        </td>
        <td>
          <span class="rate one">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="read">
        <td>
          My Sister's Keeper
        </td>
        <td>Jodi Picoult</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>
          The Candy Dish
        </td>
        <td>Kobi Yamada</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>

tr[class="read"] {
  background-image: linear-gradient(#EBF7E3, #9BD770);
}

tr[class="to-read"] {
  background-image: linear-gradient(#66B032, #375F1B);
}

tr[class="in-progress"] {
  background-image: linear-gradient(#EBF7E3, #1B3409);
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

tr[class="in-progress"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

tr[class="read"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

span[class="status"],
span[class^="rate"] {
  height: 1em;
  width: 1em;
  padding: 5px;
}

span[class^="rate"] > span {
  border: 3px solid red;
  border-radius: 5px;
  margin: 0 auto;
  height: 5px;
  width: 5px;
  background-color: #fff;
}

span[class~="one"] span:first-child {
  background-image: linear-gradient(white, black);
}

span[class~="two"] span:nth-child(-n+2) {
  background-image: linear-gradient(white, black);
}

span[class~="three"] span {
  background-image: linear-gradient(white, black);
}

ruelastech7 · January 8, 2025, 4:27pm

@ILM, The link is here. Thanks.

Dario_DC · January 8, 2025, 4:33pm

You’re right, sorry for the confusion. It expects you to use :nth-child(1) and :nth-child(2). This will be fixed with the next deployment.

ruelastech7 · January 8, 2025, 4:41pm

No worries, it doesn’t seem to be working still. I’ll wait for the update on the next deployment. Thanks for the help so far though.

ILM · January 8, 2025, 4:46pm

what have you written right now? we can make it pass with the current conditions

ruelastech7 · January 8, 2025, 4:51pm

tr[class="read"] {
  background-image: linear-gradient(#EBF7E3, #9BD770);
}

tr[class="to-read"] {
  background-image: linear-gradient(#66B032, #375F1B);
}

tr[class="in-progress"] {
  background-image: linear-gradient(#EBF7E3, #1B3409);
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

tr[class="in-progress"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

tr[class="read"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

span[class="status"],
span[class^="rate"] {
  height: 1em;
  width: 1em;
  padding: 5px;
}

span[class^="rate"] > span {
  border: 3px solid red;
  border-radius: 5px;
  margin: 0 auto;
  height: 5px;
  width: 5px;
  background-color: #fff;
}

span[class~="one"] span:first-child {
  background-image: linear-gradient(white, black);
}

span[class~="two"] span:nth-child(-n+2) {
  background-image: linear-gradient(white, black);
}

span[class~="three"] span {
  background-image: linear-gradient(white, black);
}

ILM · January 8, 2025, 4:54pm

so you did not make the change to use :nth-child(1) and :nth-child(2)? I thought you said that wasn’t working

ruelastech7 · January 8, 2025, 5:02pm

:nth-child(2) won’t work since the test case is looking for the first two descendants, not the second descendant. I have tried for the first two tests: :first-of-type, :first-child and :nth-child(1). For the second set of tests: :nth-of-type(-n+2) and :nth-child(-n+2).

ILM · January 8, 2025, 5:03pm

for the two stars rating the tests right now expect a selector list using both :nth-child(1) and :nth-child(2)

ruelastech7 · January 8, 2025, 5:08pm

My current CSS:

tr[class="read"] {
  background-image: linear-gradient(#EBF7E3, #9BD770);
}

tr[class="to-read"] {
  background-image: linear-gradient(#66B032, #375F1B);
}

tr[class="in-progress"] {
  background-image: linear-gradient(#EBF7E3, #1B3409);
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

tr[class="in-progress"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

tr[class="read"] span[class="status"] {
  border: 3px solid purple;
  background-image: url("#");
}

span[class="status"],
span[class^="rate"] {
  height: 1em;
  width: 1em;
  padding: 5px;
}

span[class^="rate"] > span {
  border: 3px solid red;
  border-radius: 5px;
  margin: 0 auto;
  height: 5px;
  width: 5px;
  background-color: #fff;
}

span[class~="one"] span:nth-child(1) {
  background-image: linear-gradient(white, black);
}

span[class~="two"] span:nth-child(2) {
  background-image: linear-gradient(white, black);
}

span[class~="three"] span {
  background-image: linear-gradient(white, black);
}

Console message:

// running tests
46. You should have an attribute selector to target the first descendant of span elements that have one as a part of their class value.
47. You should use an attribute selector to target the first descendant of span elements that have one as a part of their class value and set its background-image property to use a linear-gradient.
48. You should have an attribute selector to target the first two descendants of span elements that have two as a part of their class value.
49. You should use an attribute selector to target the first two descendants of span elements that have two as a part of their class value and set their background-image property to use a linear-gradient.
// tests completed

ILM · January 8, 2025, 5:12pm

this one, without specifying span in front of :nth-of-child(1)

here you need to make it a selector list that targets both the first and second child. Same here without specifying span (also a limitation of the test)

Topic		Replies	Views
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	2	93	April 15, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	7	448	February 11, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	4	70	May 4, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	4	501	January 27, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	12	902	May 4, 2025

Book Inventory App Project

Related topics