Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I’m stuck in step 35. I’ve written the codes correctly yet it can’t pass.

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">
    <title>Availability Table</title>
    <link rel="stylesheet" href="styles.css">
</head>

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

        <tbody>
            <tr class="sharp">
            <th class="time">8am</th>
<td class="available-5">--</td>
<td class="available-2">--</td>
<td class="available-4">--</td>
<td class="available-4">--</td>
<td class="available-1">--</td>
<td class="available-2">--</td>
            </tr>

            <tr class="half">
            <th class="time">9am</th>
         <td class="available-5">--</td>
<td class="available-3">--</td>
<td class="available-2">--</td>
<td class="available-0">--</td>
<td class="available-1">--</td>
<td class="available-2">--</td>
            </tr>

            <tr class="sharp">
            <th class="time">10am</th>
          <td class="available-0">--</td>
<td class="available-5">--</td>
<td class="available-3">--</td>
<td class="available-1">--</td>
<td class="available-0">--</td>
<td class="available-4">--</td>
</tr>

<tr class="half">
    <th class="time">11am</th>
   <td class="available-2">--</td>
<td class="available-3">--</td>
<td class="available-2">--</td>
<td class="available-5">--</td>
<td class="available-0">--</td>
<td class="available-1">--</td>
    </tr>

    <tr class="sharp">
        <th class="time">12pm</th>
       <td class="available-0">--</td>
<td class="available-1">--</td>
<td class="available-0">--</td>
<td class="available-4">--</td>
<td class="available-5">--</td>
<td class="available-2">--</td>
        </tr>
    </table>

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

</html>


/* file: styles.css */
:root {
  --color0: #ccdd12;
  --color1: #cc652a;
  --color2: #ac56da;
  --color3: #eb15df;
  --color4: #57cdca;
  --color5: #4fffff;
  --solid-border: 2px solid black;
  --dashed-border: 2px dashed black;
}

.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 {
  width: 100%;
  height: 20px;
  background-image: linear-gradient(to right,
var(--color0)0% 17%,
var(--color1)17% 34%,
var(--color2)34% 51%,
var(--color3)51% 68%,
var(--color4)68% 85%,
var(--color5)85% 100%);
}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_6_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Mobile/15E148 Safari/604.1

Challenge Information:

Build an Availability Table - Build an Availability Table

2

What is test 35?

What specific lines of your code do you think satisfy that test?

3

Below is what I am expected to do. I already have the codes, yet it couldn’t pass. Step 35 is the last step in building an availability table.

“You should give the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5. Each color value should have two color stops (expressed as percentages) to make the transition between colors a hard line.”

4

You didn’t say - What specific part of your code do you think satisfies that test?

5

You have a slight syntax issue. Please look closely at this example:

6

Below is the specific part of my code that couldn’t pass:

#legend-gradient {

width: 100%;

height: 20px;

background-image: linear-gradient(to right,

var(–color0)0% 17%,

var(–color1)17% 34%,

var(–color2)34% 51%,

var(–color3)51% 68%,

var(–color4)68% 85%,

var(–color5)85% 100%);

}

7

make sure you have the right spacing