Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I am having a huge challenge in understanding the requirements/user stories for me to pass this project and it starts from no. 19 to the end that’s around 50+.

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>
<!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 class="title">
    <th>Title</th>
    <th>Author</th>
    <th>Category</th>
    <th>Status</th>
    <th>Rate</th>
  </tr>

  <tr class="read">
    <td>The Three Musketeers</td>
    <td>Alexandre Dumas</td>
    <td>Historical Novel</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 Plague</td>
    <td>Albert Camus</td>
    <td>Philosophical Novel</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 Metamorphosis</td>
    <td>Franz Kafka</td>
    <td>Novella</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>Dead Souls</td>
    <td>Nikolai Gogol</td>
    <td>Picaresque</td>
    <td><span class="status">Read</span></td>
    <td>
      <span class="rate two">
        <span></span>
        <span></span>
        <span></span>
      </span>
    </td>
  </tr>

  
  <tr class="in-progress">
    <td>Lord of the Flies</td>
    <td>William Golding</td>
    <td>Allegorical Novel</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>Do Androids Dreams of Electric Sheep?</td>
    <td>Philip K. Dick</td>
    <td>Science Fiction</td>
    <td><span class="status">Read</span></td>
    <td>
      <span class="rate two">
        <span></span>
        <span></span>
        <span></span>
      </span>
    </td>
  </tr>
</table>
</body>

</html>

/* file: styles.css */
html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Arial;
  text-align: center;
}

h1{
  text-align: left;
}

table{
  width: 100%;
  margin: 10px auto;
  border-collapse: collapse;
  font-size: 0.85rem;  
}

tr{
  margin-right: 15px;
  padding-right: 15px;
}

table tr.title{
height: 2rem;
font-size: 1.2rem;
margin-bottom: 0;
}

tr[class="read"]{
  background-image: linear-gradient(rgba(169, 239, 176, 0.3), #3EFF8B);
}

tr[class="to-read"]{
  background-image: linear-gradient(rgba(234, 236, 234, 0.3), #DFE2E0);
  }

tr[class="in-progress"]{
  background-image: linear-gradient(rgba(255, 230, 214, 0.3), #FFD9C2);
}

span {
  display: inline-block;
}

tr.to-read span[class="status"] {
  border: 2px solid #E25050;
  border-radius: 30px;
  background-image: linear-gradient(#E25050, rgba(241, 167, 167, 0.9), #E25050);
}

tr.read span[class="status"] {
  border: 1px solid #8FC93A;
  border-radius: 30px;
  background-image: linear-gradient(#C0E08F, rgba(210, 233, 175, 0.3), #C0E08F);
}

tr.in-progress span[class="status"] {
  border: 1px solid #4E3E04;
  border-radius: 30px;
  background-image: linear-gradient(#F9C610, rgba(252, 227, 136, 0.95), #F9C610);
}

span[class="status"],
span[class^="rate"] {
  height: 1rem;
  width: 6rem;
  padding: .2rem;
}

span[class^="rate"] span{
  border: 1px solid #232F24;
  border-radius: 100%;
  margin: .3em;
  height: 15px;
  width: 15px;
  background-color: #FCFCFC;
}

span[class~="one"] span:nth-of-type(1) {
  background-image: linear-gradient(#F9C610, rgba(252, 227, 136, 0.95), #F9C610);
}

span[class~="two"] span:nth-of-type(1), 
span[class~="two"] span:nth-of-type(2) {
  background-image: linear-gradient(#F9C610, rgba(252, 227, 136, 0.95), #F9C610);
}

span[class~="three"] span:first-child, 
span[class~="three"] span:nth-of-type(2),
span[class~="three"] span:nth-of-type(3) {
  background-image: linear-gradient(#F9C610, rgba(252, 227, 136, 0.95), #F9C610);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Here is the text of user story number 19

  1. You should have an attribute selector to target rows that have the class of read.

What are you struggling with for this specific one?

3

I think I did it, but the machine says otherwise

5

you have duplicated this part of the code, remove duplicated code

1 Like
6

it seems you have duplicate DOCTYPE and html lines here.
Can you remove the duplicate ones that follow the body tag?

Also you have a duplicate head section and an extra body opening tag:

Try to clean this up and see if that helps.

1 Like
7

Thanks to you all that brought my attention to the duplicate element tags and boilerplate…it helped to some extent… I had to go through the user stories one after the other and try other attribute selectors in different ways and I got all resolved.
Forward we go!!!

1 Like