Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I have tried every formula to satisfy the last test case number 35 but it still refuses.
I have tried entering the 2 color stops as separate percentages and even joining both with no avail. What might the problem be???

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>
<div>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        </thead>
        <tbody>
            <tr class="first half">
                <th class="time">8AM</th>
                <td class="available-3"></td>
                <td class="available-5"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="second sharp">
                <th class="time">9AM</th>
                <td class="available-5"></td>
                <td class="available-5"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-3"></td>
                </tr>
                <tr class="third half">
                    <th class="time">10AM</th>
                    <td class="available-5"></td>
                    <td class="available-5"></td>
                    <td class="available-4"></td>
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                </tr>
                <tr class="forth sharp">
                    <th class="time">11AM</th>
                    <td class="available-4"></td>
                    <td class="available-4"></td>
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                    <td class="available-1"></td>
                </tr>
                <tr class="fifth half">
                    <th class="time">12PM</th>
                    <td class="available-4"></td>
                    <td class="available-4"></td>
                    <td class="available-4"></td>
                    <td class="available-5"></td>
                    <td class="available-3"></td>
                </tr>
                <tr class="sixth sharp">
                <th class="time">1PM</th>
                <td class="available-1"></td>
                <td class="available-1"></td>
                <td class="available-1"></td>
                <td class="available-1"></td>
                <td class="available-1"></td>
                </tr>
                <tr class="seventh half">
                    <th class="time">2PM</th>
                    <td class="available-5"></td>
                    <td class="available-5"></td>
                    <td class="available-5"></td>
                    <td class="available-5"></td>
                    <td class="available-4"></td>
                </tr>
                <tr class="eigth sharp">
                    <th class="time">3PM</th>
                    <td class="available-4"></td>
                    <td class="available-4"></td>
                    <td class="available-3"></td>
                    <td class="available-1"></td>
                    <td class="available-1"></td>
                    </tr>
                    <tr class="nineth half">
                        <th class="time">4PM</th>
                        <td class="available-2"></td>
                        <td class="available-3"></td>
                        <td class="available-1"></td>
                        <td class="available-0"></td>
                        <td class="available-0"></td>
                        </tr>
            </tbody>
        </table>
    </div>
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
    </div>
</body>

</html>


/* file: styles.css */*{
  box-sizing:border-box;
}
:root{
  --color0:rgb(255, 255, 255);
  --color1:rgb(243, 183, 183);
  --color2:rgb(248, 141, 141);
  --color3:rgb(245, 99, 99);
  --color4:rgb(252, 50, 50);
  --color5:rgb(255, 0, 0);
  --solid-border:1% solid #000;
  --dashed-border:1% dashed #000;
}
thead{
  font:1.5em;
  font-weight:bold;
  color:chocolate;
}
table{
  margin:auto;
}
.time{
  color:brown;
  font:1.5em;
}
#legend{
  font-size:1.5em;
  color:rgb(30, 114, 30);
  margin:auto;
  display:flex;
  justify-content:center;
}
#legend-gradient{
  width:150px;
  height:1.2em;
  background-image:linear-gradient(90deg, var(--color0) 1%, 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) 82%, var(--color5)82%, var(--color5) 100%);
}
.available-1{
  background-color:var(--color1);
}
.available-0{
  background-color:var(--color0);
}
.available-2{
  background-color:var(--color2);
}
.available-3{
  background-color:var(--color3);
}
.available-4{
  background-color:var(--color4);
}
.available-5{
  background-color:var(--color5);
}
.data{
  width:90px;
  height:40px;
}

.sharp td{
  border-top:var(--solid-border);
  border-left:var(--solid-border);
  border-right:var(--solid-border);
  border-bottom:var(--solid-border);
}
.half td{
  border-top:var(--solid-border);
  border-left:var(--solid-border);
  border-right:var(--solid-border);
  border-bottom:var(--dashed-border);
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

3

I have found out the test 38 looks for 6 color appearence (you have 12, two times for each color) inside the linear-gradient(), wich means you have to use a shorthand method.
Wich does the same what you did, but with fewer code.

Example: var(--colorName) start% end%,

On a side note:
I noticed you have no borders:

--solid-border: 1% solid #000;
--dashed-border: 1% dashed #000;

Try to use other value like pixel.

1 Like
Build an Availability Table - Build an Availability Table
4

what about 11, i have gone through the code dozens of times.

5

Having more than one class in your <tr> elements somehow makes test 11. fail, even you made that task correctly.

Only do what test 7. and 8. looking for. You don´t even use your extra classes in your CSS file, like .first or .second.