Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

i am stuck with step 35…tried every possible ways but still it’s not working out!

Your code so far

<!-- file: index.html -->
<!-- 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>
      <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
      </tr>
      <tr class="sharp">
        <th class="time">9am</th>
        <td class="available-0"></td>
        <td class="available-1"></td>
        <td class="available-2"></td>
      </tr>
      <tr class="half">
        <th class="time">10am</th>
        <td class="available-3"></td>
        <td class="available-4"></td>
        <td class="available-5"></td>
      </tr>
      <tr class="sharp">
        <th class="time">11am</th>
        <td class="available-1"></td>
        <td class="available-2"></td>
        <td class="available-3"></td>
      </tr>
      <tr class="half">
        <th class="time">12pm</th>
        <td class="available-4"></td>
        <td class="available-5"></td>
        <td class="available-0"></td>
      </tr>
    </table>

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

  



/* file: styles.css */
/* file: styles.css */
:root {
  --color0: rgb(250, 250, 250);
  --color1: rgb(200, 250, 200);
  --color2: rgb(150, 250, 150);
  --color3: rgb(100, 250, 100);
  --color4: rgb(50, 250, 50);
  --color5: rgb(0, 250, 0);
  --solid-border: 1px solid black;
  --dashed-border: 1px dashed black;
}

body {
  background-color: yellow;
}

table {
  margin: 0 auto;
}

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

#legend {
  text-align: center;
}
#legend-gradient {
  height: 20px;
  width: 100%;
  background-image: linear-gradient(
    
    var(--color0) 0%, var(--color0) 16.66%,
    var(--color1) 16.66%, var(--color1) 33.32%,
    var(--color2) 33.32%, var(--color2) 49.98%,
    var(--color3) 49.98%, var(--color3) 66.64%,
    var(--color4) 66.64%, var(--color4) 83.3%,
    var(--color5) 83.3%, var(--color5) 100%
  );
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table
https://www.freecodecamp.org/learn/full-stack-developer/lab-availability-table/build-an-availability-table

2

have you tried using whole numbers and the proper syntax for Gradient with multi-position color-stops

3

I have had the exact same thing happen to me, the hard stops are fully visible once displayed in the viewport but it doesn’t grade the content correctly - assuming there’s some type of specificity or bug that is disallowing it from being verified

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"/>
    <title>Availability Table</title>
</head>
<body>
    <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="sharp">
                <th class="time">9AM</th>
                <td class="available-0"></td>
                <td class="available-0"></td>
                <td class="available-0"></td>
                <td class="available-0"></td>
                <td class="available-0"></td>
            </tr>
            <tr class="half">
                <th class="time">10AM</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="sharp">
                <th class="time">11AM</th>
                <td class="available-2"></td>
                <td class="available-2"></td>
                <td class="available-2"></td>
                <td class="available-2"></td>
                <td class="available-2"></td>
            </tr>
            <tr  class="half">
                <th class="time">12PM</th>
                <td class="available-3"></td>
                <td class="available-3"></td>
                <td class="available-3"></td>
                <td class="available-3"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="sharp">
                <th class="time">1PM</th>
                <td class="available-4"></td>
                <td class="available-4"></td>
                <td class="available-4"></td>
                <td class="available-4"></td>
                <td class="available-4"></td>
            </tr>
            <tr class="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-5"></td>
            </tr>
            <tr class="sharp">
                <th class="time">3PM</th>
                <td class="available-1"></td>
                <td class="available-5"></td>
                <td class="available-0"></td>
                <td class="available-4"></td>
                <td class="available-3"></td>
            </tr>
        </tbody>
    </table>
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
    </div>
</body>

</html>

Here’s the accompanying CSS:

:root {
  --color0: rgb(230, 255, 230);
  --color1: rgb(190, 255, 190);
  --color2: rgb(150, 255, 150);
  --color3: rgb(0, 255, 0);
  --color4: rgb(0, 200, 0);
  --color5: rgb(0, 180, 0);
  --solid-border: solid 2px rgb(34, 79, 25);
  --dashed-border: dashed 2px rgb(34, 79, 25);
}

html { box-sizing: border-box; }

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

#legend-gradient {
  width: 100%;
  height: 30px;
  background-image: linear-gradient(
    90deg, 
    var(--color0) 0%, 
    var(--color0) 16%, 
    var(--color1) 16%, 
    var(--color1) 33%, 
    var(--color2) 33%, 
    var(--color2) 50%, 
    var(--color3) 50%, 
    var(--color3) 66%, 
    var(--color4) 66%, 
    var(--color4) 83%, 
    var(--color5) 83%, 
    var(--color5) 100%
    );
}
4

hi @pitchfordayz please create your own topic, we are unable to help you in someone else’s topic

5

yes still not passing !

6

please post your code that uses the multi color stop syntax

7

#legend-gradient {

height: 30px;

background-image: linear-gradient(

var(--color0) 0%,   var(--color0) 16.6%,

var(--color1) 16.6%, var(--color1) 33.2%,

var(--color2) 33.2%, var(--color2) 49.8%,

var(--color3) 49.8%, var(--color3) 66.4%,

var(--color4) 66.4%, var(--color4) 83%,

var(--color5) 83%,  var(--color5) 100%

);

8

that does not use the multistop syntax, also you need to use whole numbers. Please see again Gradient with multi-position color-stops