Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

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

<!-- 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">
            date
           <th class="time">9:00 AM</th>
           <th class="time">10:00 AM</th>
           <th class="time">11:00 AM</th>
           <th class="time">12:00 AM</th>
        </tr>
        <tr class="sharp">
           <th ></th>
           <th></th>
           <th></th>
        </tr>
        <tr class="half">
            <td class="available-0">0</td>
            <td class="available-1"></td>
            <td class="available-2">56</td>
        </tr>
        <tr class="half">
            <td class="available-3"></td>
            <td class="available-4">3</td>
            <td class="available-5"></td>
        </tr>
        <tr class="half">
            <td class="available-0">0</td>
            <td class="available-1"></td>
            <td class="available-2"></td>
        </tr>
    </table>
    
    <div id="legend">
       <span>
           Availability
       </span>
       <div class="legend">
       </div>
       <div id="legend-gradient"></div>
    </div>

</body>

</html>

/* file: styles.css */
:root {
  --color0: #ff0000;
  --color1: #ffa500;
  --color2: #ffff00;
  --color3: #008000;
  --color4: #0000ff;
  --color5: #4b0082;
  --solid-border: 2px solid #000;
  --dashed-border: 2px dashed #ff5733;
}

.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 {
  background-color: #f2f2f2;
  border-bottom: var(--solid-border);
}

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

#legend-gradient {
  width: 100px;
  height: 30px;
  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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

Hi @jtatchida and welcome to our community!

To pass the failing test in this challenge, you’ll need to give the colour stops in the following format:

EXAMPLE:

// like this
var(--firstcolor) 1% 2%,
var(--secondcolor) 2% 3%

// not like this
var(--firstcolor) 1%, var(--firstcolor) 2%,
var(--secondcolor) 2%, var(--secondcolor) 3%

Also, round the values to the nearest integer (i.e. 67% not 66.66%).

1 Like
4

thank you so much that was driving me crazy