Build an Availability Table

HTML-CSS
1

I know my code is kind of a mess. I forgot to add - -color0, then realised when I saw the errors and added it just to pass the test. I kinda hate working with tables aswell.

I have no idea why I’m not passing the test. My code is correct for those ones. I even added an extra time row(didn’t do anything).

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

    <div id='legend'>
        <span>Availability</span>
        <div id='row'>
            <span>0</span>
        <div id='legend-gradient'></div>
        <span>5</span>
        </div>
    </div>
</body>

</html>



body{
  font-family: Sans-serif;
  background-color: lightseagreen;
  margin-top:10vw;
}
table{
  margin:auto;
border-collapse:collapse;
border: 1px solid black;
background-color:white;
}
th, td{
  height: 20px;
  width:90px;
  border-right: 1px solid black;
}

.no-border{
  border:1px solid white;
  border-bottom: 1px solid black;
  background-color: lightseagreen;
}

:root{
  --color0: seagreen;
  --color1: white;
  --color2: lightgreen;
  --color3:#00FF00;
  --color4: green;
  --color5:darkgreen;
  --solid-border: 1px solid black;
  --dashed-border: 1px 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);
}

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

.time{
  border-right: 1px solid black;
}

#legend{
  display:inline-block;
  text-align:center;
  margin-left:44vw;
  margin-top: 30px;
}
#legend-gradient{
  width:100px;
  height:20px;
  border: 1px solid black;
  margin-top:1vw;
  background: linear-gradient(
    90deg,
    var(--color1),
    var(--color1) 20%,
    var(--color2) 20%,
    var(--color2) 40%,
    var(--color3) 40%,
    var(--color3) 60%,
    var(--color4) 60%,
    var(--color4) 80%,
    var(--color5) 80%,
    var(--color5) 100%
  );
  margin-left: 2vw;margin-right: 2vw;
}

#row{
  display:flex;
  justify-content:space-evenly;
  align-items: flex-end;
}

// running tests

10. You should have at least four th elements with the class of time that contain time values.

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

  2. You should use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line for your #legend-gradient. Remember to use your --color# variables.

// tests completed

2

when you ask for help, please always include the link to the challenge

test 10

this one is not containing a time, is it? maybe that’s the requirement for the .time class

test 34

maybe this is not a background image?

test 35
maybe you are not using --color-0 here?
also see this example for the "two color-stops` thing Gradient with multi-position color-stops

3

I have problem please can someone help?

4

Hi Buddy, Can you clarify the problem please.

Also can you tell us what is the problem do you face ?

Kindly do create another post to disscuss your problem…

5

For test 35 you have to use the shorthand color stops like:

linear-gradient(
  to right, 
  red 0% 50%,
  blue 0& 50%
)
6

Forgot to include the link. My bad.

I added a time for all rows(looks like shit now but meh). Still returns that I should have atleast 4 th with time values.

<!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>
        <tr class="sharp">
            <th class="time no-border"></th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
        </tr>
        <tr class="half">
            <th class="time">9 AM</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>
        </tr>
        <tr class="sharp">
            <th class="time">9 30 AM</th>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
        </tr>
        <tr class="half">
            <th class="time">10 AM</th>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
        </tr>
        <tr class='sharp'>
            <th class=" time">10 30 AM</th>
            <td class="available-5"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
        </tr>
        <tr class='half'>
            <th class="time">11 AM</th>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="sharp">
            <th class="time">11 30 AM</th>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
            <td class="available-5"></td>
        </tr>
        <tr class="half">
            <th class="time">12 PM</th>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>
        </tr>
        <tr class="sharp">
            <th class="time">12 30 PM</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
        </tr>
        <tr class="half">
            <th class="time">1 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>
        </tr>
        <tr class="sharp">
            <th class="time">1 30 PM</th>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
    </table>

    <div id='legend'>
        <span>Availability</span>
        <div id='row'>
            <span>0</span>
        <div id='legend-gradient'></div>
        <span>5</span>
        </div>
    </div>
</body>

</html>

The other one worked. thanks.

7

Make a post with our problem

8

I cannot figure out why this will not pass. I have set the linear gradient correct, I think. Please help me understand why it is not passing. Im going to post all of the code but the selector in question is at the very bottom of the html and the css #legend-gradient.

<!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>
          <th></th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
        </thead>
        <tbody>
        <tr class="sharp first">
            <th class="time">9am</th>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
        </tr>
        <tr class="half">
            <th class="time">10am</th>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
        </tr>
        <tr class="sharp">
            <th class="time">11am</th>
            <td class="available-5"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="half">
            <th class="time">12am</th>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-1"></td>
        </tr>
        <tr class="sharp">
            <th class="time">1pm</th>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-0"></td>
        </tr>
        <tr class="half">
            <th class="time">2pm</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">3pm</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-0"></td>
        </tr>
        <tr class="half">
            <th class="time">4pm</th>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
        </tr>
        <tr class="sharp">
            <th class="time">5pm</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
        </tr>
        </tbody>
        <div id="legend">
            <span>Availability</span>
            <div class="legend-gradient-container">
                0
            <div id="legend-gradient"></div>
            5
            </div>

        </div>
    </table>

</body>

</html>

:root {
  --color0: white;
  --color1: #8A9B6D;
  --color2: #D1A3A3;
  --color3: #F2E3BB;
  --color4: #A8BBA3;
  --color5: #A3C1AD;
  --solid-border: 1px solid;
  --dashed-border: 1px dashed;
}

html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column-reverse;
}

table {
  width: 450px;
  overflow: wrap;
  border-collapse: collapse;
}

td {
  width: 20%;
  margin: 0;
}

#legend {
  margin: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#legend-gradient {
  width: 100px;
  height: 20px;
  border: 1px solid;
  display: flex;
  justify-content: center;
}

.legend-gradient-container {
  display: flex;
  justify-content: space-between;
  width: 150px;
}

.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);
  border-right: 1px solid;
  border-left: 1px solid; 
}

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

.first td {
  border-top: 1px solid;
}

#legend-gradient {
  background: linear-gradient(
     90deg,
    var(--color0) 0%,
    var(--color0) 16.6%,
    var(--color1) 16.6%,
    var(--color1) 32%,
    var(--color2) 32%,
    var(--color2) 48.6%,
    var(--color3) 48.6%,
    var(--color3) 65.2%,
    var(--color4) 65.2%,
    var(--color4) 81.8%,
    var(--color5) 81.8%,
    var(--color5) 100%
  );
}
9

@dustyalan42 please create your own topic, we can’t help two people at the same time

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.

10

this one still has time class but is empty

11

In the linear-gradient every color should appear only once and they percentage twice and please use integers, not float numbers.

12

Hii @faust.levity in order to discuss your problem kindly do share your code and you need to create a new post too

13

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.