Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Hi, I can’t get 35 to pass. I don’t know what’s wrong.

Your code so far

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



:root {
            --color0: #f8d7da;
            --color1: #f5c6cb;
            --color2: #f1b0b7;
            --color3: #ec8fa0;
            --color4: #e66b83;
            --color5: #d9534f;
            --solid-border: 2px solid black;
            --dashed-border: 2px dashed gray;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
        }
        th, td {
            padding: 10px;
            border: 1px solid black;
        }
        .time {
            background-color: #ddd;
        }
        .sharp td {
            border-bottom: var(--solid-border);
        }
        .half td {
            border-bottom: var(--dashed-border);
        }
        .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 {
            margin-top: 20px;
        }
        #legend span {
            font-weight: bold;
        }
        #legend-gradient {
            width: 100%;
            height: 20px;
            background-image: linear-gradient(90deg, 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%);}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2
  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.
3

HI, have u found a solution to 35 yet?

4

No, but I haven’t really been working on it.

5

I believe you need start and stop percentages. Similar to: var(--color1) start% stop%

6

that’s correct. Repeating the color will make the test not pass

7 
#legend-gradient {
    width: 100%;
    height: 20px;
    background-image: linear-gradient(90deg,
    var(--color0) 0% 20%,
    var(--color1) 20% 40%,
    var(--color2) 40% 60%,
    var(--color3) 60% 80%,
    var(--color4) 80% 100%
    );
}

I now have this, however it still didn’t pass.

8

how many --color# variables have you declared? are you using them all?

1 Like
9

I can see how having 5 days, but 6 availabilities could be confusing. Remember, the legend should be a list of all possible availabilities. So 0 to 5 (i.e. a total of 6).

1 Like
10

hello, could you explain more?

12

hi @NoorMohammad
It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

2 Likes
13

no, it’s not working

14

Please open your own thread

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like