Construir una tabla de disponibilidad - Construye una Tabla de Disponibilidad

Curriculum Help
1

Cuéntanos qué está pasando:

Las pruebas 38 y 39 se contradicen, no se pueden cumplir las condiciones para que ambas pasen.

Tu código hasta ahora

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Availability Table</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<table>
  <caption>Weekly Meeting Availability Schedule</caption>

  <tr>

    <th scope="col"></th>
    <th scope="col">Monday</th>
    <th scope="col">Tuesday</th>
    <th scope="col">Wednesday</th>
    <th scope="col">Thursday</th>
    <th scope="col">Friday</th>
  </tr>

  <tr class="half">
    <th class="time" scope="row">9 AM</th>
    <td class="available-0" aria-label="0 available"></td>
    <td class="available-1" aria-label="1 available"></td>
    <td class="available-2" aria-label="2 available"></td>
    <td class="available-3" aria-label="3 available"></td>
    <td class="available-5" aria-label="5+ available"></td>
  </tr>

  <tr class="sharp">
    <th class="time" scope="row">10 AM</th>
    <td class="available-3" aria-label="3 available"></td>
    <td class="available-4" aria-label="4 available"></td>
    <td class="available-4" aria-label="4 available"></td>
    <td class="available-5" aria-label="5+ available"></td>
    <td class="available-5" aria-label="5+ available"></td>
  </tr>

  <tr class="half">
    <th class="time" scope="row">11 AM</th>
    <td class="available-2" aria-label="2 available"></td>
    <td class="available-3" aria-label="3 available"></td>
    <td class="available-4" aria-label="4 available"></td>
    <td class="available-5" aria-label="5+ available"></td>
    <td class="available-5" aria-label="5+ available"></td>
  </tr>

  <tr class="sharp">
    <th class="time" scope="row">12 PM</th>
    <td class="available-1" aria-label="1 available"></td>
    <td class="available-2" aria-label="2 available"></td>
    <td class="available-3" aria-label="3 available"></td>
    <td class="available-4" aria-label="4 available"></td>
    <td class="available-5" aria-label="5+ available"></td>
  </tr>

  <tr class="half">
    <th class="time" scope="row">1 PM</th>
    <td class="available-0" aria-label="0 available"></td>
    <td class="available-1" aria-label="1 available"></td>
    <td class="available-2" aria-label="2 available"></td>
    <td class="available-3" aria-label="3 available"></td>
    <td class="available-4" aria-label="4 available"></td>
  </tr>

</table>

<div id="legend">
  <span>Availability</span>
  <div id="legend-gradient"></div>
</div>

</body>
</html>

/* file: styles.css */
:root {
  --color0: #d8f3dc;
  --color1: #b7e4c7;
  --color2: #95d5b2;
  --color3: #52b788;
  --color4: #2d6a4f;
  --color5: #1b4332;

  --solid-border: 2px solid black;
  --dashed-border: 2px dashed black;
}

table {
  border-collapse: collapse;
}

th,
td {
  width: 80px;
  height: 40px;
  text-align: center;
  border: 1px solid #ccc;
}

.time {
  font-weight: bold;
}

.available-0 {
  background-color: var(--color0);
}

.available-1 {
  background-color: var(--color1);
}

.available-2 {
  background-color: var(--color2);
}

.available-3 {
  background-color: var(--color3);
}

.available-4 {
  background-color: var(--color4);
}

.available-5 {
  background-color: var(--color5);
}

.sharp td {
  border-bottom: var(--solid-border);
}

.half td {
  border-bottom: var(--dashed-border);
}

#legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

#legend-gradient {
  width: 220px;
  height: 20px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%, var(--color0) 16%,
    var(--color1) 16%, var(--color1) 33%,
    var(--color2) 33%, var(--color2) 50%,
    var(--color3) 50%, var(--color3) 66%,
    var(--color4) 66%, var(--color4) 83%,
    var(--color5) 83%, var(--color5) 100%
  );
}

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/150.0.0.0 Safari/537.36

Información del desafío:

Construir una tabla de disponibilidad - Construye una Tabla de Disponibilidad

Enlace de GitHub: i18n-curriculum/curriculum/challenges/espanol/blocks/lab-availability-table/66b36358ed4f261d64840c24.md at main · freeCodeCamp/i18n-curriculum · GitHub

2

Welcome to the forum @mayra.bucceri.a

Try replacing:

With:

Happy coding

3

it worked! thank you :slight_smile: