Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Hi there!
I am not passing the last number after many attempts. I am not sure why I am failing it though everything seems correct to me. I’ll post code so one can take a look at. it required to set the background image to linear-gradient() having two (2).color stops using variable we created in the root. that is exactly what I did ,yet it kept failing.

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>
    <th></th>
   <th>Monday</th> 
   <th>Tuesday</th> 
   <th>Wednesday</th> 
   <th>Thursday</th> 
   <th>Friday</th> 
  
   <tr class='sharp'>
       <th class='time'>9:00 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='sharp'>
       <th class='time'>10:00 AM</th> 
       <td class='available-3'></td>
       <td class='available-2'></td>
       <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-4'></td> 
   </tr>
   <tr class='half'>
        <th class='time'>11:00 AM</th>  
       <td class='available-3'></td>
        <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-4'></td>
       <td class='available-4'></td>
   </tr>
   <tr class='sharp'>
    <th class='time'>12:00 PM</th> 
    <td class='available-0'></td>
       <td class='available-2'></td>
       <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-5'></td>
      
   </tr>
   <tr class='half'>
       <th class='time'>1:00 PM </th>
        <td class='available-2'></td>
       <td class='available-3'></td>
       <td class='available-0'></td>
       <td class='available-4'></td>
       <td class='available-4'></td>
       
   </tr>
   <tr class='sharp'>
       <th class='time'>2:00 PM</th>
        <td class='available-3'></td>
       <td class='available-2'></td>
       <td class='available-4'></td>
        <td class='available-3'></td>
       <td class='available-3'></td>
      
   </tr>
   <tr class='half'>
       <th class='time'>3:00 PM</th>
        <td class='available-1'></td>
       <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-2'></td>
       <td class='available-2'></td>
       
   </tr>
   <tr class='sharp'>
       <th class='time'>4:00 PM</th>
        <td class='available-4'></td>
       <td class='available-2'></td>
       <td class='available-1'></td>
       <td class='available-0'></td>
       <td class='available-3'></td>
       
   </tr>
   <tr class='half'>
       <th class='time'>5:00 PM</th>
        <td class='available-4'></td>
       <td class='available-0'></td>
       <td class='available-4'></td>
       <td class='available-2'></td>
       <td class='available-3'></td>
     
   </tr>

</table>
<div id='legend'> 
    <span>Availability</span> 
    <div class='legend-bar'>
    <span>0</span>
 <div 
 id='legend-gradient'>
         <span></span>
    </div>
    <span>5+</span>
</div>
</div>
</body>

</html>

/* file: styles.css */

#legend {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 0;
  color: red;
  margin-top:10px;
}
 
.legend-bar{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 300px;
}
  
#legend-gradient{
 border: var(--solid-border);
 margin: 0 10px;
  width: 90%;
  background-image: linear-gradient(90deg, var(--color0) 0% 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

2

please share all your css so we can debug

check that in the linear gradient syntax you have all the spaces in the right places

3

Hi,

Have you defined the color variables like --color0, --color1 and etc?

Because they are missing in your shared code.

4

Tell us what’s happening:

Hi there!
I am not passing the last number after many attempts. I am not sure why I am failing it though everything seems correct to me. I’ll post code so one can take a look at. it required to set the background image to linear-gradient() having two (2).color stops using variable we created in the root. that is exactly what I did ,yet it kept failing.

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>
    <th></th>
   <th>Monday</th> 
   <th>Tuesday</th> 
   <th>Wednesday</th> 
   <th>Thursday</th> 
   <th>Friday</th> 
  
   <tr class='sharp'>
       <th class='time'>9:00 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='sharp'>
       <th class='time'>10:00 AM</th> 
       <td class='available-3'></td>
       <td class='available-2'></td>
       <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-4'></td> 
   </tr>
   <tr class='half'>
        <th class='time'>11:00 AM</th>  
       <td class='available-3'></td>
        <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-4'></td>
       <td class='available-4'></td>
   </tr>
   <tr class='sharp'>
    <th class='time'>12:00 PM</th> 
    <td class='available-0'></td>
       <td class='available-2'></td>
       <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-5'></td>
      
   </tr>
   <tr class='half'>
       <th class='time'>1:00 PM </th>
        <td class='available-2'></td>
       <td class='available-3'></td>
       <td class='available-0'></td>
       <td class='available-4'></td>
       <td class='available-4'></td>
       
   </tr>
   <tr class='sharp'>
       <th class='time'>2:00 PM</th>
        <td class='available-3'></td>
       <td class='available-2'></td>
       <td class='available-4'></td>
        <td class='available-3'></td>
       <td class='available-3'></td>
      
   </tr>
   <tr class='half'>
       <th class='time'>3:00 PM</th>
        <td class='available-1'></td>
       <td class='available-3'></td>
       <td class='available-4'></td>
       <td class='available-2'></td>
       <td class='available-2'></td>
       
   </tr>
   <tr class='sharp'>
       <th class='time'>4:00 PM</th>
        <td class='available-4'></td>
       <td class='available-2'></td>
       <td class='available-1'></td>
       <td class='available-0'></td>
       <td class='available-3'></td>
       
   </tr>
   <tr class='half'>
       <th class='time'>5:00 PM</th>
        <td class='available-4'></td>
       <td class='available-0'></td>
       <td class='available-4'></td>
       <td class='available-2'></td>
       <td class='available-3'></td>
     
   </tr>

</table>
<div id='legend'> 
    <span>Availability</span> 
    <div class='legend-bar'>
    <span>0</span>
 <div 
 id='legend-gradient'>
         <span></span>
    </div>
    <span>5+</span>
</div>
</div>
</body>

</html>

/* file: styles.css */

:root{
  --color0: #FAFAFA;
  --color1:#CDFECD;
  --color2:#9BFC9B;
  --color3:#51FA51;
  --color4:#02C703;
  --color5: #027D04;
  --solid-border:2px solid black; ;
  --dashed-border: 2px dashed black;
}

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


tr{
  border: 1px solid red;
  width: 20px;
  height: 20px;
}

#legend {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 0;
  color: red;
  margin-top:10px;
}
 
.legend-bar{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 300px;
}
  
#legend-gradient{
 border: var(--solid-border);
 margin: 0 10px;
  width: 90%;
  background-image: linear-gradient(90deg, var(--color0) 0% 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

5

Hi,
I posted the whole css . Thanks

6

Try adding a space after the color.

7

you do not have all the needed spaces

8

you are completly right. that was the issue . thanks for your help