Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

#legend-gradient {
width: 100%;
height: 30px;
background-image: linear-gradient(
to right,
var(–color0) 0%, var(–color0) 16.66%,
var(–color1) 16.66%, var(–color1) 33.32%,
var(–color2) 33.32%, var(–color2) 49.98%,
var(–color3) 49.98%, var(–color3) 66.64%,
var(–color4) 66.64%, var(–color4) 83.3%,
var(–color5) 83.3%, var(–color5) 100%
);
}

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>
      <th></th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
    </tr>
    <tr class="sharp">
      <th class="time">9:00 AM</th>
      <td class="available-2"></td>
      <td class="available-3"></td>
      <td class="available-1"></td>
    </tr>
    <tr class="half">
      <th class="time">10:00 AM</th>
      <td class="available-0"></td>
      <td class="available-4"></td>
      <td class="available-2"></td>
    </tr>
    <tr class="sharp">
      <th class="time">11:00 AM</th>
      <td class="available-5"></td>
      <td class="available-1"></td>
      <td class="available-3"></td>
    </tr>
    <tr class="half">
      <th class="time">12:00 PM</th>
      <td class="available-2"></td>
      <td class="available-0"></td>
      <td class="available-4"></td>
    </tr>
  </table>

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


/* file: styles.css */
:root {
  --color0: #f8f9fa;
  --color1: #d0e1f9;
  --color2: #a6c8ff;
  --color3: #7fb3ff;
  --color4: #4d94ff;
  --color5: #1a75ff;

  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #666;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 2rem;
}

th, td {
  padding: 10px;
  text-align: center;
}

th.time {
  text-align: left;
}

.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 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

#legend span {
  font-weight: bold;
}
#legend-gradient {
  width: 100%;
  height: 30px;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%, var(--color0) 16.66%,
    var(--color1) 16.66%, var(--color1) 33.32%,
    var(--color2) 33.32%, var(--color2) 49.98%,
    var(--color3) 49.98%, var(--color3) 66.64%,
    var(--color4) 66.64%, var(--color4) 83.3%,
    var(--color5) 83.3%, 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/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

You’ve opened over 30 topics, I think you should know how to ask a question by now?

3

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?

If this does not help you solve the problem, please reply with answers to these questions.

4 
 I can't seem to pass step 35. it says "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."
5

Try it without the decimals. You also do not need to include 0% and 100% since they are assumed.

Search for a linear gradient example syntax.

6

Hi @BooBoo212

I count twelve colours.

How many are needed?

Happy coding