Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Hi, i’m stuck on autotests with these steps:
27. You should target td elements that are children of .sharp elements.
Failed:28. You should use --solid-border to set the bottom-border of td elements that are children of .sharp elements.
Failed:29. You should target td elements that are children of .half elements.
Failed:30. You should use --dashed-border to set the bottom-border of td elements of .half elements.
Failed:35. You should use two color-stops (expressed in percentage).

Your code so far

<!-- file: index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Availability Table</title>
</head>

<body>
    <h1>Ресурс мастеров</h1>
    <table>
        <thead>
  <tr>
    <th aria-hidden="true"></th>
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
     <th>Четверг</th>
     <th>Пятница</th>
  </tr>
</thead>
<tbody>
    <tr class="sharp">
        <th class="time">10:00
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
        </th>
        </tr>
     <tr class="half">
        <th class="time">11:00
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-0"></td>
        </th>
        </tr class="sharp">
    <tr class="sharp">
        <th class="time">12:00
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-0"></td>
        </th>
        </tr>
    <tr class="half">
        <th class="time">13:00
            <td class="available-1"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
        </th>
        </tr>
    <tr class="sharp">
        <th class="time">14:00
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-4"></td>
        </th>
        </tr>
    <tr class="half">
        <th class="time">15:00
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-3"></td>
            <td class="available-0"></td>
        </th>
        </tr>
    <tr class="sharp">
        <th class="time">16:00
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-2"></td>
        </th>
        </tr>
    <tr class="half">
        <th class="time">17:00
            <td class="available-3"></td>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
        </th>
        </tr>
    <tr class="sharp">
        <th class="time">18:00
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-1"></td>
        </th>
        </tr>
    <tr class="half">
        <th class="time">19:00
            <td class="available-3"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
    </tr>
    <tr class="sharp">
        <th class="time">20:00
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
        </th>
        </tr>
</tbody>
</table>
<div id="legend"><span>Availability</span>
<div class="gradient-container">
<span>0: все занято</span>
<div id="legend-gradient"></div>
<span>5: все мастера свободны</span>
</div>
</div>
</body>

</html>

```css
/* file: styles.css */

:root {
  --color0: #cc2900; --color1: #ff8000;
  --color2: #ffc34d;
  --color3: #ffff66;
--color4:#ffffcc; --color5:#ffffff;
--solid-border: 1px solid black;
--dashed-border: 1px dashed black;
}

h1 {
  text-align: center;
  font-family: sans-serif, Arial;
  font-size: 32px;
}

table {
  width: 80vw;
  max-width: 567px;
  height: 70vh;
  table-layout: fixed;
  border-collapse: collapse; 
  background-color: #e8e8e8;
  margin: 0 auto;
}

thead {
  width: 100%;
  height: 10%;
  table-layout: fixed;
  margin: 0 auto;
  font-size: 20px;
}

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

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

tr.sharp > td, tr.half > td {
  border-right: 1px solid black;
  border-left:1px solid black;
  text-align: center;
}

th, td {
  width: 130px; 
}

.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);
}

#legend {
  display: flex;
  align-items: center; 
  flex-direction: column;
  gap: 0.5em; 
  margin-top: 15px;    
}

.gradient-container {
  display: flex;
  align-items: center;
  gap: 1em;
}

#legend-gradient {
margin: 15px auto; 
  border: 1px solid black;
  width: 20vw;
  height: 19px;
  background-image: linear-gradient(90deg, var(--color0) 0%, var(--color0) 16%, var(--color1) 16%, var(--color1) 33%, var(--color2) 33%, var(--color2) 50%, var(--color3) 50%, var(--color3)67%, var(--color4) 67%, var(--color4) 84%, var(--color5) 84%, var(--color5) 100%);
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Can you share your code? Copy and paste it into a comment in this thread.

4

Just added in the post

5

And a link to the lab please? I think you must have deleted it when you added your code.

6

I suupose this is the one

7

Can you please share the line of code that meets this requirement?

8

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

it’s 34-36 rows in my css.
I also tried like:
tr[class="sharp] > td {border-bottom: var(–solid-border);
}

9

I would try to implement this very literally. It only mentions the .sharp class, it doesn’t say anything about tr

10

if you remove the tr part of the selector, does it passes?

11

The instruction is also a bit unclear maybe between a direct child and descendants?

Although it does not say “direct child”

12

i’ve deleted tr anf left like:
.sharp > td {
border-bottom: var(–solid-border);
}

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

it doesn’t pass either

13

I think you are using the correct selector, but the test seems to work with descendant (without the > )

14

oh i got it

it works like decendats without >

1 Like
15

You can investigate the other tests for similar problems

16

I still have this point to pass:
35. You should use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line for your #legend-gradient . Remember to use your --color# variables.

The last selector in my code

17

Can you please share the line of code that meets this requirement?

18

here an example: linear-gradient() - CSS | MDN