Construir una Aplicación de Inventario de Libros - Construye una Aplicación de Inventario de Libros

Español HTML-CSS
1

Cuéntanos qué está pasando:

He estado intentando compeltar esta prueba, pero del test del 48 al 51 nunca aprueba, y ya he probado de mcuhas maneras y muchos enfoques pero ninguno hace que pasen esos 4 test, ya llevo unas horas probando y no lo he conseguido

Tu código hasta el momento

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

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

<body>

  <h1>Book Inventory</h1>

  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
      </tr>
    </thead>

    <tbody>

      <tr class="read">
        <td>1984</td>
        <td>George Orwell</td>
        <td>Dystopian</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>

      <tr class="to-read">
        <td>Dune</td>
        <td>Frank Herbert</td>
        <td>Sci-Fi</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>The Hobbit</td>
        <td>J.R.R. Tolkien</td>
        <td>Fantasy</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>
      </tr>

      <tr class="read">
        <td>Brave New World</td>
        <td>Aldous Huxley</td>
        <td>Dystopian</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>Foundation</td>
        <td>Isaac Asimov</td>
        <td>Sci-Fi</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>Harry Potter</td>
        <td>J.K. Rowling</td>
        <td>Fantasy</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>

      <tr class="read">
        <td>Fahrenheit 451</td>
        <td>Ray Bradbury</td>
        <td>Dystopian</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>
      </tr>

    </tbody>
  </table>

</body>

</html>

/* file: styles.css */
:root {
    --bg-page: #f4f6f8;
    --bg-table: #ffffff;

    --row-read-start: #d4fc79;
    --row-read-end: #96e6a1;

    --row-to-read-start: #fbc2eb;
    --row-to-read-end: #a6c1ee;

    --row-progress-start: #ffecd2;
    --row-progress-end: #fcb69f;

    --status-read-start: #a8e063;
    --status-read-end: #56ab2f;

    --status-toread-start: #c471ed;
    --status-toread-end: #f64f59;

    --status-progress-start: #f7971e;
    --status-progress-end: #ffd200;

    --border-light: #ddd;
    --border-dark: #333;

    --text-main: #111;
}

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

body {
    font-family: Arial, sans-serif;
    font-size: 1em;
    padding: 2rem;
    background: var(--bg-page);
    color: var(--text-main);
}

h1 {
    font-size: 2em;
    margin-bottom: 1rem;
}

tr[class="read"] {
    background-image: linear-gradient(90deg,
            var(--row-read-start),
            var(--row-read-end));
}

tr[class="to-read"] {
    background-image: linear-gradient(90deg,
            var(--row-to-read-start),
            var(--row-to-read-end));
}

tr[class="in-progress"] {
    background-image: linear-gradient(90deg,
            var(--row-progress-start),
            var(--row-progress-end));
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-table);
    border-radius: 0.625rem;
    overflow: hidden;
}

th,
td {
    padding: 0.75rem;
    border: 1px solid var(--border-light);
    font-size: 1em;
}

tr {
    transition: transform 0.25s ease, filter 0.25s ease;
}

tr:hover {
    transform: scale(1.01);
    filter: brightness(1.05);
}

tr:active {
    transform: scale(0.99);
}

span {
    display: inline-block;
}

tr[class="read"] span[class="status"] {
    border: 1px solid var(--status-read-end);
    background-image: linear-gradient(90deg,
            var(--status-read-start),
            var(--status-read-end));
}

tr[class="to-read"] span[class="status"] {
    border: 1px solid var(--status-toread-end);
    background-image: linear-gradient(90deg,
            var(--status-toread-start),
            var(--status-toread-end));
}

tr[class="in-progress"] span[class="status"] {
    border: 1px solid var(--status-progress-end);
    background-image: linear-gradient(90deg,
            var(--status-progress-start),
            var(--status-progress-end));
}

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

span[class^="rate"] {
    display: flex;
    justify-content: center;
    gap: 0.125rem;
}

span[class^="rate"]>span {
    border: 1px solid gray;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 10px;
    background-color: whitesmoke;
}

span[class~="one"] span {
    background-image: linear-gradient(to top, rgb(255, 214, 7), rgb(255, 227, 90));
}

span[class~="two"] span {
    background-image: linear-gradient(to top, rgb(255, 214, 7), rgb(255, 227, 90));
}

span[class~="three"] span {
    background-image: linear-gradient(to top, rgb(255, 214, 7), rgb(255, 227, 90));
}

@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    th,
    td {
        padding: 0.5rem;
        font-size: 0.9em;
    }

    span[class="status"] {
        font-size: 0.75em;
    }
}

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Información del Desafío:

Construir una Aplicación de Inventario de Libros - Construye una Aplicación de Inventario de Libros

2

Hi @teranmatas12,

Your selectors are not specifically targeting the first and second span elements. Consider using pseudo classes for that:

Pseudo-classes - CSS | MDN

Happy coding!

3

Usé las pseudo-classes, pero ahora me dice que estos tests no pasan: 48. Debes tener un selector de atributo para dirigir el primer descendiente de elementos span que tienen la palabra one como parte de su valor class.

  • Falló:49. Debes utilizar un selector de atributo para dirigir el primer descendiente de elementos span que tienen la palabra one como parte de su valor class y establecer su propiedad background-image para usar un linear-gradient.

  • Falló:50. Debes tener un selector de atributo para dirigir los dos primeros descendientes de elementos span que tienen la palabra two como parte de su valor class.

  • Falló:51. Debes utilizar un selector de atributo para dirigir los dos primeros descendientes de elementos span que tienen la palabra two como parte de su valor class y establecer su propiedad background-image para usar un linear-gradient.

  • Falló:52. Debes tener un selector de atributo para dirigir los elementos span que son descendientes de elementos span que tienen la palabra three como parte de su valor class.

  • Falló:53. Debes utilizar un selector de atributo para dirigir los elementos span que son descendientes de elementos span que tienen la palabra three como parte de su valor class y establecer su propiedad background-image para usar un linear-gradient.

    Y est es todo el código del CSS:

:root {
    --bg-page: #f4f6f8;
    --bg-table: #ffffff;

    --row-read-start: #d4fc79;
    --row-read-end: #96e6a1;

    --row-to-read-start: #fbc2eb;
    --row-to-read-end: #a6c1ee;

    --row-progress-start: #ffecd2;
    --row-progress-end: #fcb69f;

    --status-read-start: #a8e063;
    --status-read-end: #56ab2f;

    --status-toread-start: #c471ed;
    --status-toread-end: #f64f59;

    --status-progress-start: #f7971e;
    --status-progress-end: #ffd200;

    --border-light: #ddd;
    --border-dark: #333;

    --text-main: #111;
}

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

body {
    font-family: Arial, sans-serif;
    font-size: 1em;
    padding: 2rem;
    background: var(--bg-page);
    color: var(--text-main);
}

h1 {
    font-size: 2em;
    margin-bottom: 1rem;
}

tr[class="read"] {
    background-image: linear-gradient(90deg,
            var(--row-read-start),
            var(--row-read-end));
}

tr[class="to-read"] {
    background-image: linear-gradient(90deg,
            var(--row-to-read-start),
            var(--row-to-read-end));
}

tr[class="in-progress"] {
    background-image: linear-gradient(90deg,
            var(--row-progress-start),
            var(--row-progress-end));
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-table);
    border-radius: 0.625rem;
    overflow: hidden;
}

th,
td {
    padding: 0.75rem;
    border: 1px solid var(--border-light);
    font-size: 1em;
}

tr {
    transition: transform 0.25s ease, filter 0.25s ease;
}

tr:hover {
    transform: scale(1.01);
    filter: brightness(1.05);
}

tr:active {
    transform: scale(0.99);
}

span {
    display: inline-block;
}

tr[class="read"] span[class="status"] {
    border: 1px solid var(--status-read-end);
    background-image: linear-gradient(90deg,
            var(--status-read-start),
            var(--status-read-end));
}

tr[class="to-read"] span[class="status"] {
    border: 1px solid var(--status-toread-end);
    background-image: linear-gradient(90deg,
            var(--status-toread-start),
            var(--status-toread-end));
}

tr[class="in-progress"] span[class="status"] {
    border: 1px solid var(--status-progress-end);
    background-image: linear-gradient(90deg,
            var(--status-progress-start),
            var(--status-progress-end));
}

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

span[class^="rate"] {
    display: flex;
    justify-content: center;
    gap: 0.125rem;
}

span[class^="rate"]>span {
    border: 1px solid gray;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 10px;
    background-color: whitesmoke;
}

span[class*="one"] span:first-child {
    background-image: linear-gradient(to top, rgb(255, 214, 7), rgb(255, 227, 90));
}

span[class*="two"] span:nth-child(1),
span[class*="two"] span:nth-child(2) {
    background-image: linear-gradient(to top, rgb(255, 214, 7), rgb(255, 227, 90));
}

span[class*="three"] span {
    background-image: linear-gradient(to top, rgb(255, 214, 7), rgb(255, 227, 90));
}

@media (max-width: 768px) {
    body {
        padding: 1rem;
    }

    th,
    td {
        padding: 0.5rem;
        font-size: 0.9em;
    }

    span[class="status"] {
        font-size: 0.75em;
    }
}