Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Not meeting the 34th and 35th Condition of “Build an Availability Table” test even after setting 2 stop point’s on each colour.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="styles.css"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Availability Table</title>
</head>

<body>
    <div id="legend">
      <div id="legend-gradient">  <span>Availability</span></div>
        </div>
<table class="table">
    <thead>
    <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednessday</th>
        <th>Thrusday</th>
        </tr>
        <thead>
            <tbody>
                <tr class="sharp">
                    <th class="time">7am</th>
                    <td class="available-0">0</td>
                    <td class="available-1">1</td>
                    <td class="available-3">3</td>
                    <td class="available-5">5</td>
                    </tr>
                    <tr class="half">
                        <th class="time">11am</th>
                    <td class="available-2">2</td>
                    <td class="available-4">4</td>
                    <td class="available-0">0</td>
                    <td class="available-1">1</td>
                    </tr>
                    <tr class="sharp">
                        <th class="time">4pm</th>
                    <td class="available-3">3</td>
                    <td class="available-0">0</td>
                    <td class="available-4">4</td>
                    <td class="available-5">5</td>
                    </tr>
                    <tr class="half">
                        <th class="time">7pm</th>
                    <td class="available-2">2</td>
                    <td class="available-1">1</td>
                    <td class="available-3">3</td>
                    <td class="available-0">0</td>
                    </tr>
                    <tr class="sharp">
                        <th class="time">10pm</th>
                    <td class="available-4">4</td>
                    <td class="available-0">0</td>
                    <td class="available-2">2</td>
                    <td class="available-1">1</td>
                    </tr>
                <tbody>
    </table>
</body>

</html>

/* file: styles.css */
.table{margin:auto;}
#legend-gradient{margin:auto;}
:root{
--color0:magenta;
--color1:yellow;
--color2:skyblue;
--color3:khaki;
--color4:red;
--color5:green;
--solid-border:5px solid black;
--dashed-border:3px dashed black;}

.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-gradient{
background-image:linear-gradient(
90deg,
var(--color0) 0% 16%, 
var(--color1) 16% 33%,
var(--color2) 33% 50%, 
var(--color3) 50% 67%, 
var(--color4) 67% 84%,
var(--color5) 84% 100%
);}
.sharp td{border-bottom:var(--solid-border);}
.half td{border-bottom:var(--dashed-border);}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

notice it says background, not background-image

3

“You should set the background image of #legend-gradient to a linear gradient.“

4

you are right sorry, the issue is duplicate selectors. While they work in a real scenario, our testing environment is not able to manage with duplicate selectors

5

but even if I’m changing it into “Background” still 34th and 35th not meeting the condition

6

I also tried doing this since the condition specified that each colour need 2 stop point still didn’t work :smiling_face_with_tear:

#legend-gradient{

background-image:linear-gradient(

90deg,

var(–color0) 0%,

var(–color0) 16%,

var(–color1) 16%,

var(–color1) 33%,

var(–color2) 33%,

var(–color2) 50%,

var(–color3) 50%,

var(–color3) 67%,

var(–color4) 67%,

var(–color4) 84%,

var(–color5) 84%,

var(–color5) 100%

);}

7

the previous version was decisely more correct.

Did you check for duplicate selectors? as I said earlier those are not supported by the tests

8

hint: look at the first few lines of your CSS code

9

same issue, I even had to use AI and still no solution. here is my both html and css “

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Availability Table</title>

<link href="styles.css" rel="stylesheet">

<h1>Team Availability Tracker</h1>

<thead>

  <tr>

    <th>Time</th>

    <th>Monday</th>

    <th>Tuesday</th>

    <th>Wednesday</th>

    <th>Thursday</th>

    <th>Friday</th>

  </tr>

</thead>



<tbody>



  <tr class="sharp">

    <th class="time">08 AM</th>

    <td class="available-0"></td>

    <td class="available-1"></td>

    <td class="available-2"></td>

    <td class="available-3"></td>

    <td class="available-4"></td>

  </tr>



  <tr class="half">

    <th class="time">10 AM</th>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-3"></td>

    <td class="available-2"></td>

    <td class="available-1"></td>

  </tr>



  <tr class="sharp">

    <th class="time">12 PM</th>

    <td class="available-0"></td>

    <td class="available-2"></td>

    <td class="available-4"></td>

    <td class="available-1"></td>

    <td class="available-3"></td>

  </tr>



  <tr class="half">

    <th class="time"> 02 PM</th>

    <td class="available-5"></td>

    <td class="available-3"></td>

    <td class="available-2"></td>

    <td class="available-0"></td>

    <td class="available-4"></td>

  </tr>



  <tr class="half">

    <th class="time"> 04 PM</th>

    <td class="available-1"></td>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-3"></td>

    <td class="available-2"></td>

  </tr>



  <tr class="sharp">

    <th class="time"> 06 PM</th>

    <td class="available-1"></td>

    <td class="available-5"></td>

    <td class="available-4"></td>

    <td class="available-3"></td>

    <td class="available-2"></td>

  </tr>

</tbody>

<span>Availability</span>

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

“ css = “:root {

/* Availability colors */

–color0: #ff0000;

–color1: #ff8000;

–color2: #ffff00;

–color3: #80ff00;

–color4: #00ff80;

–color5: #00ffff;

/* Border styles */

–solid-border: 2px solid black;

–dashed-border: 2px dashed gray;

}

/* Basic page styling */

body {

font-family: Arial, sans-serif;

background-color: #f6f6f6;

margin: 30px;

text-align: center;

}

/* Table styling */

table {

border-collapse: collapse;

width: 80%;

margin: 0 auto 30px;

background-color: #fff;

}

th, td {

border: 1px solid #ccc;

padding: 10px;

text-align: center;

}

/* Time column styling */

th.time {

background-color: #eaeaea;

}

/* Color classes based on availability */

.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); }

/* Row border styles */

.sharp td {

border-bottom: var(–solid-border);

}

.half td {

border-bottom: var(–dashed-border);

}

/* Legend section */

#legend {

display: flex;

flex-direction: column;

align-items: center;

gap: 10px;

}

#legend span {

font-weight: bold;

font-size: 1.2em;

}

#legend-gradient {

width: 320px;

height: 26px;

border-radius: 6px;

border: 2px solid #444;

background-image: linear-gradient(

to right,

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

var(--color1) 16.6%, var(--color1) 33.3%,

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

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

var(--color4) 66.6%, var(--color4) 83.3%,

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

);

}

”

10

hi @zakariaelrhadfi , please create your own topic so we can give you the focus you deserve

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.

11

got it tnx :sparkling_heart: (yea duplicate selectors were the problem)