Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

i cant pass 35th test even after trying two % stops

Your code so far

Availability Table 
    <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
    </tr>
    <tr class="sharp">
        <th class="time">10:00 Am</th>
        <td class="available-5"></td>
        <td class="available-0"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-3"></td>
    </tr>
    <tr class="half">
        <th class="time">11:00 Am</th>
        <td class="available-4"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-0"></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-0"></td>
        <td class="available-0"></td>
        <td class="available-2"></td>
        <td class="available-5"></td>
    </tr>
    <tr class="half">
        <th class="time">1:00 Pm</th>
        <td class="available-5"></td>
        <td class="available-3"></td>
        <td class="available-1"></td>
        <td class="available-4"></td>
        <td class="available-0"></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-4"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
    </tr>
    
    </tbody>
</table>

<div id="legend">
<p><span>Availability</span></p>
<div id="legend-gradient"></div>
</div>
</div>
```html 

```css
/* file: styles.css */
:root{
  --color0:#eaffea;
  --color1:#bbffbb;
  --color2:#bbffbb;
  --color3:#a9ffa9;
  --color4:rgb(0,255,0);
  --color5:green;
  --solid-border:2px solid black;
  --dashed-border:2px dashed black;
}
body{
  background-color:#00f9a0;
  display:flex;
  justify-content:center;
}
.table-container{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.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);
}
.table{
  border-collapse:collapse;
  table-layout: fixed;
  width:300px;
  margin-top:30vh;
}
th,td{
  text-align:center;
  height:20px;
  width:80px;
}
.sharp td,.half td{
  border-left:var(--solid-border);
  border-right:var(--solid-border);
  border-top:var(--solid-border);
}
#legend{
  width:25vw;
  height:15vh;
  margin:200px auto 0 auto;
}
#legend-gradient{
  width:50%;
  height:20%;
    background-image:linear-gradient( 90deg,var(--color0) 0% 16.67%,var(--color1) 16.67% 33.33%,var(--color2) 33.33% 50%,var(--color3) 50% 66.67%,var(--color4) 66.67% 83.33%,var(--color5) 83.33% 100%);
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Someone else posted a similar question before. You can try searching it up on the forum to see what was the solution. But I think the solution was to use a number like 16 and not 16.33 (that is , maybe try using a whole number and not a decimal)

1 Like