Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

My test dont work i have 5 col and its says that there is a mistake.
Im doing the color gradient right and it still says there is a mistake

Your code so far

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

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

<body>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wendsday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        </thead>

        
            <tr class='sharp'>
                <th class='time'>8 AM</th>
                <td class='available-0'></td>
                <td class='available-1'></td>
                <td class='available-2'></td>
                <td class='available-3'></td>
                <td class='available-4'></td>
            </tr>
            <tr class='half'>
                <th class='time'>10 AM</th>
                <td class='available-0'></td>
                <td class='available-1'></td>
                <td class='available-2'></td>
                <td class='available-3'></td>
                <td class='available-4'></td>
            </tr>
            <tr class='sharp'>
                <th class='time'>12 PM</th>
                <td class='available-0'></td>
                <td class='available-1'></td>
                <td class='available-2'></td>
                <td class='available-3'></td>
                <td class='available-4'></td>
            </tr>
            <tr class='half'>
                <th class='time'>2 PM</th>
                <td class='available-0'></td>
                <td class='available-1'></td>
                <td class='available-2'></td>
                <td class='available-3'></td>
                <td class='available-4'></td>
            </tr>
            <tr class='sharp'>
                <th class='time'>4 PM</th>
                <td class='available-0'></td>
                <td class='available-1'></td>
                <td class='available-2'></td>
                <td class='available-3'></td>
                <td class='available-4'></td>
            </tr>


        </tbody>
            <div id='legend'>
                <span>Availability</span>
                <div id='legend-gradient'>
                    <tr>
                        <th>availability</th>
                        <td id='legend-gradient'></td>
                    </tr>
                </div>
            </div>



    </table>

</body>

</html>

td{
  border-style: solid;
  width: 90px;
}
:root{
  --color0: #ff3aff;
  --color1: #ff3aa3;
  --color2: #ff3ab3;
  --color3: #ff3ac3;
  --color4: #ff3ad4;
  --color5: #ff3ae4;
  --solid-border: solid;
  --dashed-border: dashed;
}
.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-gradient{
  background-image: linear-gradient(to right,
                var(--color1) 0%,
                var(--color1) 50%,
                var(--color5) 50%,
                var(--color5) 100%);
  position: relative;
  top: 100px;
  left: 250px;
}

span{
  position: relative;
  top: 252px;
  left: 250px;
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

it’s counting all th elements, so it’s seeing more than 5

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.