Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Ive done everything possible to correct this step and still fsiled, even askd chatgpt and deepai and still failing. Could someone help me with this

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

<table>
  <thead>
    <tr>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
    </tr>
  </thead>
  <tbody>
    <tr class="sharp">
      <th class="time">08:00</th>
      <td class="available-0"></td>
      <td class="available-1"></td>
      <td class="available-2"></td>
    </tr>
    <tr class="half">
      <th class="time">09:00</th>
      <td class="available-3"></td>
      <td class="available-4"></td>
      <td class="available-5"></td>
    </tr>
    <tr class="sharp">
      <th class="time">10:00</th>
      <td class="available-1"></td>
      <td class="available-2"></td>
      <td class="available-3"></td>
    </tr>
    <tr class="half">
      <th class="time">11:00</th>
      <td class="available-4"></td>
      <td class="available-5"></td>
      <td class="available-0"></td>
    </tr>
    <tr class="sharp">
      <th class="time">12:00</th>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-4"></td>
    </tr>
  </tbody>
</table>

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

</body>
</html>


/* file: styles.css */
:root {
  --color0: #d4f0f0;
  --color1: #a0d8d8;
  --color2: #6cbfcf;
  --color3: #389696;
  --color4: #055f6f;
  --color5: #022f2f;
  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #666;
}

.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 {
  height: 20px;
  width: 100%;
  background-image: linear-gradient(to right, var(--color0) 0%, var(--color0) 16.66%, var(--color1) 16.66%, var(--color1) 33.33%, var(--color2) 33.33%, var(--color2) 50%, var(--color3) 50%, var(--color3) 66.66%, var(--color4) 66.66%, var(--color4) 83.33%, var(--color5) 83.33%, 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/142.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Here’s an example of how to code that linear gradient. Be sure to use integers for the percentages.

Linear Gradient with Multi-Position Color Stops

3

Nothing wrong. Just round them up and use integers for percentages :D. If you have any leftover spaces, use two stops transparent. Hope that helps!

4

tried this and didnt worked:

#legend-gradient {

height: 20px;

width: 100%;

background-image: linear-gradient(

to right,

var(--color0) 0%, var(--color0) 20%,

var(--color1) 20%, var(--color1) 40%,

var(--color2) 40%, var(--color2) 60%,

var(--color3) 60%, var(--color3) 80%,

var(--color4) 80%, var(--color4) 100%,

var(--color5) 100%, var(--color5) 100%

);

}

5

also tried this:

#legend-gradient {

height: 20px;

width: 100%;

background-image: linear-gradient(

to right,

var(--color0) 0%, var(--color0) 16%,

var(--color1) 16%, var(--color1) 33%,

var(--color2) 33%, var(--color2) 50%,

var(--color3) 50%, var(--color3) 66%,

var(--color4) 66%, var(--color4) 83%,

var(--color5) 83%, var(--color5) 100%

);

}

6

Don’t repeat the variables. You only need 2 color stops PER variable, and only use commas after each variable. All the best :smiley:

1 Like
7

It didn’t work because it’s not the same syntax as the example I provided. Try again.

8

Tried this and still failing step 35: My full CSS code: :root {

–color0: #d4f0f0;

–color1: #a0d8d8;

–color2: #6cbfcf;

–color3: #389696;

–color4: #055f6f;

–color5: #022f2f;

–solid-border: 2px solid #333;

–dashed-border: 2px dashed #666;

}

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

height: 20px;

width: 100%;

background-image: linear-gradient(

to right,

var(--color0) 0% 16.66%,

var(--color1) 16.66% 33.33%,

var(--color2) 33.33% 50%,

var(--color3) 50% 66.66%,

var(--color4) 66.66% 83.33%,

var(--color5) 83.33% 100%

);

}

9

Nevermind, just solved it, thank you!!