Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

  1. 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.

Your code so far

I am unable to meet this test case with the following CSS:

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

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

“to right” is not a valid value for direction, you should put a percentage or remove it depending on what is requested

3

I removed it and still doesn’t satisfy. I put 90deg and still doesn’t work.

Here is my full 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>
  <div class="container">
    <div class="table">
  <table>
    <caption>
      Availability
    </caption>

      <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
      </tr>
      <tr>
        <th class="time">6 AM</th>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="sharp">
        <th class="time">7 AM</th>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="sharp">
        <th class="time">8 AM</th>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-2"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="half">
        <th class="time">9 AM</th>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-2"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="half">
        <th class="time">10 AM</th>
        <td class="available-4"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-3"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-0"></td>
      </tr>

      <tr>
        <th class="time">11 AM</th>
        <td class="available-4"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
      </tr>

      <tr>
        <th class="time">12 PM</th>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-5"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
      </tr>

      <tr>
        <th class="time">1 PM</th>
        <td class="available-4"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
      </tr>

      <tr>
        <th class="time">2 PM</th>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>

      <tr>
        <th class="time">3 PM</th>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>
  </table>
  </div>

  <div id="legend">
    <span>Availability</span>
    <div class="bar">
      <span>0</span>
      <div id="legend-gradient">
        <span></span>
      </div>
      <span>5+</span>
    </div>
 </div>
  </div>
</body>

</html>

and CSS:

:root {
  --color0: #d3d3d3;
  --color1: #fe271225;
  --color2: #fe271245;
  --color3: #fe271265;
  --color4: #fe271285;
  --color5: #fe2712;
  --solid-border: 1px solid #66b032;
  --dashed-border: 1px dashed #66b032;
}

html {
  font-size: 16px;
  padding: 10px;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-between;
  height: 100vh;
}

.table {
  margin: 0 auto;
}

caption {
  font-size: 1.5rem;
  font-weight: bolder;
}

.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 {
  margin: 50px auto;
  width: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.bar {
  display: flex;
  justify-content: space-evenly;
}

#legend-gradient{
  width: 75%;
  height: 15px;
  background-image: linear-gradient(90deg, var(--color0) 16%, var(--color1) 16% 33%, var(--color2) 33% 49%, var(--color3) 49% 66%, var(--color4)66% 83%, var(--color5) 83%);
}
4

you need to add a space here
then I think you also need to write 0% and 100% explicitly so that all colors have two percentages

1 Like
5

Awesome thank you! It was the space and the missing start and stop for the initial and final value.