Build an Availability Table - Build an Availability Table

Programming HTML-CSS
1

Tell us what’s happening:

I don’t know to correct step 34 and 35. Might have a typo or misundestord something. :smiley: Thank you for anyone’s help.

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>
    <th>Thursday</th>
    <th>Friday</th></tr>
    <tr class="sharp"><th class="time">8:00 AM</th>
     <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-5"></td></tr>
    <tr class="half"><th class="time">10:00AM</th>
     <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-5"></td></tr></tr>
    <tr class="sharp">
            <th class="time">1: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="half">
            <th class="time">2: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>

/* file: styles.css */
:root {--color0: #eee;
--color1: rgba(125, 250, 250);
--color2: rgba(79, 197, 247);
--color3: turquoise;
--color4: lightgreen;
--color5: rgb(0, 125, 0);
--solid-border: 2px solid black;
--dashed-border: 2px dashed grey;}

.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 {background-image: linear-gradient(var(--color0) 0%, var(--color0) 5%), var(--color1) 5%, var(--color0) 10%, var(--color2) 15%, var(--color2) 20%, var(--color3) 25%, var(--color3) 30%, var(--color4) 25%, var(--color4) 35%, var(--color5) 35%, var(--color5) 100%);}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Challenge Information:

Build an Availability Table - Build an Availability Table

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-availability-table/66b36358ed4f261d64840c24.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

double check your parentheses

looking at them I would say that the linear gradient is just this: linear-gradient(var(--color0) 0%, var(--color0) 5%)

3

did that and still didn’t work

4

what did you do? post your updated code

5

part of the code that doesn’t work

#legend-gradient {background-image: linear-gradient(var(--color0) 0%, var(--color0) 5%, var(--color1) 5%, var(--color0) 10%, var(--color2) 15%, var(--color2) 20%, var(--color3) 20%, var(--color3) 30%, var(--color4) 30%, var(--color4) 40%, var(--color5) 40%, var(--color5) 100%);}
6

do you have sharp lines between the colors?

7

what do you mean, I don’t know why but it won’t show up for me.

8

give the element an height so you see the gradient then

9

I still can’t see it, update code below the image.

freecodecamp screenshoot for bugquestionmark
freecodecamp screenshoot for bugquestionmark1908×1026 150 KB

#legend-gradient {
width: 100%; 
height: 20px;
background-image: linear-gradient:(var(--color0) 10%, var(--color0) 20%, var(--color1) 20%, var(--color1) 30%, var(--color2) 20%, var(--color2) 40%, var(--color3) 40%, var(--color3) 50%, var(--color4) 50%, var(--color4) 60%, var(--color5) 60%, var(--color5) 100%);}
10

^ could try if I see it on my phone… but could because I don’t have table css element or something else.

11

you still have a syntax error with linear-gradient so the element is still invisible, look at the red squiggly lines

12

I can’t find the error.

13

is linear-gradient a property name? what is the thing that has the red underline?

14

that was silly but step 35 still doesn’t past.

#legend-gradient {
width: 50%; 
height: 20px;
background-image: linear-gradient(var(--color0) 10%, var(--color0) 20%, var(--color1) 20%, var(--color1) 30%, var(--color2) 20%, var(--color2) 40%, var(--color3) 40%, var(--color3) 50%, var(--color4) 50%, var(--color4) 60%, var(--color5) 60%, var(--color5) 100%);}

I don’t understand what they mean by full number. for me those are full numbers.

15

found it no repeating colors. :slight_smile:

16

Try as follows

code removed by moderator

17

hi @diegocarbagon

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.