Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

i’m not able to solve the last step that is 35 step in html and css , the availability table project

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>
        <thead >
            <tr class="sharp">
                 <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">9 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-5"></td>
            
            </tr>
            
            <tr class="half">
                <th class="time">10 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-5"></td>
            </tr>
            <tr class="half">
                <th class="time">11 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-5"></td>
            </tr>
            <tr>
                <th class="time">12 PM</th>
           <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">1 PM</th>
           <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">2 PM</th>
             <td class="available-0 half"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">3 PM</th>
             <td class="available-0 half"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">4 PM</th>
          <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">5 PM</th>
             <td class="available-0 half"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
        </tbody>
    </table>
    <div id="legend"><span>Availability </span>
    <div id="legend-gradient"></div></div>
    
</body>

</html>

/* file: styles.css */
:root{
  --color0: #ff7e5f;
  --color1: #ff4e5f;
  --color2: red;
  --color3: gray;
  --color4: purple;
  --color5: skyblue;
  --solid-border:  2px solid black;
  --dashed-border:  2px dashed black;
}
* {
  margin: 0;         
  padding: 0;        
  box-sizing: border-box;
  font-family: Arial, sans-serif; 
}

body {
  line-height: 1.6;  
  background-color: #f4f4f4; 
  color: #000;       
}

td{
  border: 2px solid #000;
  width: 60px;
  height: 15px;
}
#legend-gradient {
  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%
  );
}

.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 {
  width: 75%;
  height: 15px;
  background-image: linear-gradient(
     
    var(--color0) 2% 16%,  
    var(--color1) 16% 33%,  
    var(--color2) 33% 49%,  
    var(--color3) 49% 66%,  
    var(--color4) 66% 83%,  
    var(--color5) 83% 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

you have the #legend-gradient selector twice, please unify them and remove the wrong background-image property

1 Like
3

i have remove the background-image one and now 34th 35th both steps are wrong it says
code:

:root{
  --color0: #ff7e5f;
  --color1: #ff4e5f;
  --color2: red;
  --color3: gray;
  --color4: purple;
  --color5: skyblue;
  --solid-border:  2px solid black;
  --dashed-border:  2px dashed black;
}
* {
  margin: 0;         
  padding: 0;        
  box-sizing: border-box;
  font-family: Arial, sans-serif; 
}

body {
  line-height: 1.6;  
  background-color: #f4f4f4; 
  color: #000;       
}

td{
  border: 2px solid #000;
  width: 60px;
  height: 15px;
}


.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 {
  width: 75%;
  height: 15px;
  background: linear-gradient(90deg,
    var(--color0) 2%, var(--color0) 16%,
    var(--color1) 16%, var(--color1) 33%,
    var(--color2) 33%, var(--color2) 49%,
    var(--color3) 49%, var(--color3) 66%,
    var(--color4) 66%, var(--color4) 83%,
    var(--color5) 83%, var(--color5) 100%
  );
}
4

you have kept the wrong one, you need a color, and then two color stops

and you do not have background-image property anymore

1 Like
5

is this correct:

:root{
  --color0: #ff7e5f;
  --color1: #ff4e5f;
  --color2: red;
  --color3: gray;
  --color4: purple;
  --color5: skyblue;
  --solid-border:  2px solid black;
  --dashed-border:  2px dashed black;
}
* {
  margin: 0;         
  padding: 0;        
  box-sizing: border-box;
  font-family: Arial, sans-serif; 
}

body {
  line-height: 1.6;  
  background-color: #f4f4f4; 
  color: #000;       
}

td{
  border: 2px solid #000;
  width: 60px;
  height: 15px;
}


.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 {
  width: 75%;
  height: 15px;
  background-image: linear-gradient(90deg,
    var(--color0) 2%, var(--color0) 16%,
    var(--color1) 16%, var(--color1) 33%,
    var(--color2) 33%, var(--color2) 49%,
    var(--color3) 49%, var(--color3) 66%,
    var(--color4) 66%, var(--color4) 83%,
    var(--color5) 83%, var(--color5) 100%
  );
}
6

no, it’s not correct

each color must appear only once

as I said you kept the wrong property

1 Like
7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
8

like this?

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

no, where is the second color stop for each color? where is the 6th color?

1 Like
10 
removed by mod

“Finally! It worked!” :boom:
I have been struggling with this from one hour .
I’m a non-IT guy.
this was the first time i came across so much difficulty,
thanks you very much.

3 Likes
11

Please do not post solution code. Glad you got it :wave: