Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I am an unable to pass step 30, even though I am replicating what I have done for the ‘sharp’ test.

Also, the final linear gradient test passes, but nothing is showing on my preview screen.

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>
        <tr class="sharp">
            <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        </tr>
        <tr class="half">
            <th class="time">9am</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
             <td class="available-0"></td>
             <td class="available-5"></td>

             <td class="available-1"></td>
        </tr>
        <tr class="sharp">
            <th class="time">10am</th>
            <td class="available-5"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-1"></td>
           
        </tr>
        <tr class="sharp">
            <th class="time">11am</th>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
        </tr>
        <tr class="half">
            <th class="time">12am</th>
            <td class="available-5"></td>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
        </tr>
        <tr class="half">
            <th class="time">1pm</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
        </tr>
    </table>
<div id="legend">
<span>Availability</span>
<div id="legend-gradient"></div>
</div>

</body>

</html>

/* file: styles.css */
*{
  margin:10px;

}

:root{
--color0:#e2fee2;--color1:#c9fdc9;
--color2:#b1fcb1;
--color3:#98fb98;
--color4:#7ffa7f;
--color5:#4ef84e;
--solid-border:2px solid black;
--dashed-border:2px dashed black;
}

table{
  width:100%;
  height:100%;
  margin:2px;
}
.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-gradient{
background-image:linear-gradient(
var(--color0) 0% 20%,
var(--color1) 20% 40%,
var(--color2) 40% 50%,
var(--color3) 50% 60%,
var(--color4) 60% 80%,
var(--color5) 80% 100%
  );
}
.sharp td {
  border-bottom:var(--solid-border);
}

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

#legend{
margin-top:20px;  text-align:center;
}

#legend-gradient{
background:linear-gradient(green, pink);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Challenge Information:

Build an Availability Table - Build an Availability Table

2

hello and welcome to fcc forum :slight_smile:

  • remove that extra space between var and opening bracket

happy coding :slight_smile:

3

this is empty so you don’t see the background color, give it some content or an height