Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1 
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Build a Book Inventory App</title>

<link rel="stylesheet" href="style.css">

<h1>

    Book Inventory

</h1>



<table>



    <!-- == Table Head== -->

    <thead>

        <tr>

            <th>Title</th>

            <th>Author</th>

            <th>Category</th>

            <th>Status</th>

            <th>Rate</th>

        </tr>

    </thead>



    <!-- == Table Body == -->

    <tbody>



        <!-- == first Table row== -->

        <tr class="read">

            <td>Things Fall Apart</td>

            <td>Chinua Achebe</td>

            <td>Historical Fiction</td>

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

            <td>



                <span class="rate three"> 

                    <span></span>

                    <span></span>

                    <span></span>

                </span>



            </td>

        </tr>



        <!-- == second Table row == --> 



        <tr class="to-read">

            <td>Half of a Yellow Sun</td>

            <td>Chimamanda Ngozi Adichie</td>

            <td>Historical Fiction</td>

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

            <td>



                <span class="rate three">

                    <span></span>

                    <span></span>

                    <span></span>

                </span>



            </td>

        </tr>

        

        <!-- == third Table row == -->



        <tr class="in-progress">

            <td>The Secret Lives of Baba Segi's Wivess</td>

            <td>Lola Shoneyin</td>

            <td>Family Drama</td>

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

            <td>



                <span class="rate three"> 

                    <span></span>

                    <span></span>

                    <span></span>

                </span>



            </td>

        </tr>



        <!-- == forth Table row == -->



        <tr class="to-read">

            <td>My Sister, the Serial Killer</td>

            <td>Oyinkan Braithwaite</td>

            <td>Dark Comedy / Thriller</td>

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

            <td>



                <span class="rate three"> 

                    <span></span>

                    <span></span>

                    <span></span>

                </span>



            </td>

        </tr>



        <!-- == first Table row == -->



        <tr class="read">

            <td>Purple Hibiscus</td>

            <td>Chimamanda Ngozi Adichie</td>

            <td>Coming-of-Age</td>

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

            <td>



                <span class="rate three"> 

                    <span></span>

                    <span></span>

                    <span></span>

                </span>



            </td>

        </tr>



    </tbody>

</table>

/* cleared browser default style */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}



tr[class="read"] {
  background-image: linear-gradient(to top right, #33ccff 0%, #0099ff 100%);
}

tr[class="to-read"] {
  background-image: linear-gradient(to top right, #663300 0%, #cccc00 100%);
}

tr[class="in-progress"] {
  background-image: linear-gradient(to top right, #996633 0%, #cc33ff 100%);
}

span {
  display: inline-block;
  text-align: center;
}

tr[class="to-read"] [class="status"] {
  border: 2px solid #27b055;
  background-image: linear-gradient(to top right, #ccffff 0%, #ffffcc 100%);
}

tr[class="read"] [class="status"] {
  border: 2px solid #e2df11;
  background-image: linear-gradient(to top right, #996633 0%, #ccffff 100%);
}

tr[class="in-progress"] [class="status"] {
  border: 2px solid #1eec28;
  background-image: linear-gradient(to top right, #0099ff 0%, #ffff00 100%);
}

span [class="status"],
span[class^="rate"] {
  height: 24px;
  width: fit-content;
  padding: 6px 10px;
}

span[class^="rate"]>span {
  border: 2px solid #e4238d;
  border-radius: 8px;
  margin: 4px;
  height: 24px;
  width: fit-content;
  background-color: hwb(0 0% 100%);
}
2

can you share all your code? it’s difficult to debug with just a snippet

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 (').

3

I just updated my Post

You should see the full HTML and CSS code

4

please edit your post and format your code properly, it can’t be read correctly

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 (').

5

'“

I keep failing this step. kindly assist

“‘

  • 26. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read.

  • Failed:27. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read and set their border property.

  • Failed:28. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read and set their background-image property.

“‘

below is my `html code`

title author status rate 
    <!-- == first Table row== -->

    <tr class="read">

      <td>Things Fall Apart</td>

      <td>Chinua Achebe</td>

      <td>Historical Fiction</td>

      <td class="status"><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>Half of a Yellow Sun</td>

      <td>Chimamanda Ngozi Adichie</td>

      <td>Historical Fiction</td>

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

      <td>

        <span class="rate three">

          <span></span>

          <span></span>

          <span></span>

        </span>

      </td>

    </tr>

    <tr class="in-progress">

      <td>The Secret Lives of Baba Segi's Wivess</td>

      <td>Lola Shoneyin</td>

      <td>Family Drama</td>

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

      <td>

        <span class="rate three">

          <span></span>

          <span></span>

          <span></span>

        </span>

      </td>

    </tr>

    <tr class="to-read">

      <td>My Sister, the Serial Killer</td>

      <td>Oyinkan Braithwaite</td>

      <td>Dark Comedy / Thriller</td>

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

      <td>

        <span class="rate three">

          <span></span>

          <span></span>

          <span></span>

        </span>

      </td>

    </tr>

    <tr class="read">

      <td>Purple Hibiscus</td>

      <td>Chimamanda Ngozi Adichie</td>

      <td>Coming-of-Age</td>

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

      <td>

        <span class="rate three">

          <span></span>

          <span></span>

          <span></span>

        </span>

      </td>

    </tr>

  </tbody>

‘‘“

find my ` CSS code`

/* cleared browser default style */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

line-height: 1.15;

-webkit-text-size-adjust: 100%;

}

body {

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, sans-serif;

}

tr[class=“read”] {

background-image: linear-gradient(to top right, #33ccff 0%, #0099ff 100%);

}

tr[class=“to-read”] {

background-image: linear-gradient(to top right, #663300 0%, #cccc00 100%);

}

tr[class=“in-progress”] {

background-image: linear-gradient(to top right, #996633 0%, #cc33ff 100%);

}

span {

display: inline-block;

text-align: center;

}

tr[class=“to-read”] [class=“status”] {

border: 2px solid #27b055;

background-image: linear-gradient(to top right, #ccffff 0%, #ffffcc 100%);

}

tr[class=“read”] [class=“status”] {

border: 2px solid #e2df11;

background-image: linear-gradient(to top right, #996633 0%, #ccffff 100%);

}

tr[class=“in-progress”] [class=“status”] {

border: 2px solid #1eec28;

background-image: linear-gradient(to top right, #0099ff 0%, #ffff00 100%);

}

span [class=“status”],

span[class^=“rate”] {

height: 24px;

width: fit-content;

padding: 6px 10px;

}

span[class^=“rate”]>span {

border: 2px solid #e4238d;

border-radius: 8px;

margin: 4px;

height: 24px;

width: fit-content;

background-color: hwb(0 0% 100%);

}

“‘

6

please use backticks, this is a backtick `
I can’t read your code and so I can’t help you if it’s not formatted

7

Thanks mate. I was able to figure what the issue was with my code