Build an Availability Table

HTML-CSS
1

I’ve tried everything but my code can’t seem to pass this

35. 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.

Here’s the code line:

```

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="styles.css" rel="stylesheet"><title>Availability Table</title>

<th></th>

<th class="day">Monday</th>

<th class="day">Tuesday</th>

<th class="day">Wednesday</th>

<th class="day">Thursday</th>

<th class="day">Friday</th>
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM

Availability

0

+5

```:root {

–color0: #f1f5f9;

–color1: #dbeafe;

–color2: #bfdbfe;

–color3: #93c5fd;

–color4: #60a5fa;

–color5: #2563eb;

–solid-border: 1px solid black;

–dashed-border: 1px dashed black;

}

body{

margin: 0;

min-height: 100vh;

display: flex;

gap: 80px;

flex-direction: column;

justify-content: center;

align-items: center;

}

.table-content {

height: 60vw;

width: 70vw;

border: 2px solid black;

border-collapse: collapse;

}

th, td {

border-left: 2px solid 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);

}

.sharp td{

border-bottom: var(–solid-border);

}

.half td{

border-bottom: var(–dashed-border);

}

body{

margin: 0;

min-height: 100vh;

display: flex;

gap: 80px;

flex-direction: column;

justify-content: center;

align-items: center;

}

.table-content {

height: 60vw;

width: 70vw;

border: 2px solid black;

border-collapse: collapse;

}

th, td {

border-left: 2px solid 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);

}

.sharp td{

border-bottom: var(–solid-border);

}

.half td{

border-bottom: var(–dashed-border);

}

#legend-gradient {

border: 1px solid black;

height: 30px;

width: 100%;

background-image: linear-gradient(90deg, var(–color0) 0%, var(–color0) 16%, var(–color1) 16%, var(–color1) 32%, var(–color2) 32%, var(–color2) 48%, var(–color3) 48%, var(–color3) 64%, var(–color4) 64%, var(–color4) 80%, var(–color5) 80%, var(–color5) 100%);

}

#legend{

margin: 50px auto;

width: 30%;

text-align:center;

}

.grad {

display: flex;

gap: 5px;

justify-content: space-evenly;

align-items: center;

}

2

Please post again your code following this guide to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

hi @chaotic.stardust

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like
5

HTML Code here


<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="styles.css" rel="stylesheet"><title>Availability Table</title>

</head>



<body>

<table class="table-content">

<thead class="table-head">

<tr>

<th></th>

<th class="day">Monday</th>

<th class="day">Tuesday</th>

<th class="day">Wednesday</th>

<th class="day">Thursday</th>

<th class="day">Friday</th>

</tr>

</thead>

<tbody>

<tr class="sharp">

<th class="time">9AM</th>

<td class="available-2" ></td>

<td class="available-3" ></td>

<td class="available-4" ></td>

<td class="available-5" ></td>

<td class="available-5" ></td>

</tr>

<tr class="half">

<th class="time">10AM</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>

<tr class="sharp">

<th class="time">11AM</th>

<td class="available-3" ></td>

<td class="available-2" ></td>

<td class="available-1" ></td>

<td class="available-4" ></td>

<td class="available-5" ></td>

</tr>

<tr class="half">

<th class="time">12PM</th>

<td class="available-2" ></td>

<td class="available-3" ></td>

<td class="available-4" ></td>

<td class="available-0" ></td>

<td class="available-5" ></td>

</tr>

<tr class="sharp">

<th class="time">1PM</th>

<td class="available-3" ></td>

<td class="available-3" ></td>

<td class="available-2" ></td>

<td class="available-1" ></td>

<td class="available-4" ></td>

</tr>

<tr class="half">

<th class="time">2PM</th>

<td class="available-2" ></td>

<td class="available-1" ></td>

<td class="available-0" ></td>

<td class="available-3" ></td>

<td class="available-5" ></td>

</tr>

<tr class="sharp">

<th class="time">3PM</th>

<td class="available-4" ></td>

<td class="available-4" ></td>

<td class="available-5" ></td>

<td class="available-3" ></td>

<td class="available-0" ></td>

</tr>

<tr class="half">

<th class="time">4PM</th>

<td class="available-2" ></td>

<td class="available-4" ></td>

<td class="available-0" ></td>

<td class="available-1" ></td>

<td class="available-3" ></td>

</tr>

</tbody>

</table>

<div id="legend">

<span>Availability</span>

<div class="grad">

<span>0</span>

<div id="legend-gradient"></div>

<span>+5</span>

</div>

</div>

</body>

CSS Code here


:root {

  --color0: #f1f5f9;

  --color1: #dbeafe;

  --color2: #bfdbfe;

  --color3: #93c5fd;

  --color4: #60a5fa;

  --color5: #2563eb;

  --solid-border: 1px solid black;

  --dashed-border: 1px dashed black;

}

body{

  margin: 0;

  min-height: 100vh;

   display: flex;

   gap: 80px;

   flex-direction: column;

   justify-content: center;

   align-items: center;

}

.table-content {

  height: 60vw;

  width: 70vw;

  border: 2px solid black;

  border-collapse: collapse;

}

th, td {

  border-left: 2px solid 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);

}

.sharp td{

  border-bottom: var(--solid-border);

}

.half td{

  border-bottom: var(--dashed-border);

}

body{

  margin: 0;

  min-height: 100vh;

   display: flex;

   gap: 80px;

   flex-direction: column;

   justify-content: center;

   align-items: center;

}

.table-content {

  height: 60vw;

  width: 70vw;

  border: 2px solid black;

  border-collapse: collapse;

}

th, td {

  border-left: 2px solid 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);

}

.sharp td{

  border-bottom: var(--solid-border);

}

.half td{

  border-bottom: var(--dashed-border);

}

#legend-gradient {

  border: 1px solid black;

  height: 30px;

  width: 100%;

  background-image: linear-gradient(90deg, var(--color0) 0%, var(--color0) 16%, var(--color1) 16%, var(--color1) 32%, var(--color2) 32%, var(--color2) 48%, var(--color3) 48%, var(--color3) 64%, var(--color4) 64%, var(--color4) 80%, var(--color5) 80%, var(--color5) 100%);

}

#legend{

  margin: 50px auto;

  width: 30%;

  text-align:center;

  

}

  .grad {

    display: flex;

    gap: 5px;

    justify-content: space-evenly;

    align-items: center;

  }
6

Please post again your code following this guide so to make it readable. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

I see you tried to use that method, but the backticks are escaped:

image
image219×149 984 Bytes

if you escape the backticks with the \ then they will not work for formatting

8

HTML Code here:

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="styles.css" rel="stylesheet"><title>Availability Table</title>

<th></th>

<th class="day">Monday</th>

<th class="day">Tuesday</th>

<th class="day">Wednesday</th>

<th class="day">Thursday</th>

<th class="day">Friday</th>
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM

Availability

0

+5

CSS Code here:

:root {

–color0: #f1f5f9;

–color1: #dbeafe;

–color2: #bfdbfe;

–color3: #93c5fd;

–color4: #60a5fa;

–color5: #2563eb;

–solid-border: 1px solid black;

–dashed-border: 1px dashed black;

}

body{

margin: 0;

min-height: 100vh;

display: flex;

gap: 80px;

flex-direction: column;

justify-content: center;

align-items: center;

}

.table-content {

height: 60vw;

width: 70vw;

border: 2px solid black;

border-collapse: collapse;

}

th, td {

border-left: 2px solid 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);

}

.sharp td{

border-bottom: var(–solid-border);

}

.half td{

border-bottom: var(–dashed-border);

}

body{

margin: 0;

min-height: 100vh;

display: flex;

gap: 80px;

flex-direction: column;

justify-content: center;

align-items: center;

}

.table-content {

height: 60vw;

width: 70vw;

border: 2px solid black;

border-collapse: collapse;

}

th, td {

border-left: 2px solid 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);

}

.sharp td{

border-bottom: var(–solid-border);

}

.half td{

border-bottom: var(–dashed-border);

}

#legend-gradient {

border: 1px solid black;

height: 30px;

width: 100%;

background-image: linear-gradient(90deg, var(–color0) 0%, var(–color0) 16%, var(–color1) 16%, var(–color1) 32%, var(–color2) 32%, var(–color2) 48%, var(–color3) 48%, var(–color3) 64%, var(–color4) 64%, var(–color4) 80%, var(–color5) 80%, var(–color5) 100%);

}

#legend{

margin: 50px auto;

width: 30%;

text-align:center;

}

.grad {

display: flex;

gap: 5px;

justify-content: space-evenly;

align-items: center;

}

9

that’s still not formatted properly, please select your code and click the </> button

10 
:root {
  --color0: #f1f5f9;
  --color1: #dbeafe;
  --color2: #bfdbfe;
  --color3: #93c5fd;
  --color4: #60a5fa;
  --color5: #2563eb;
  --solid-border: 1px solid black;
  --dashed-border: 1px dashed black;

}
body{
  margin: 0;
  min-height: 100vh;
   display: flex;
   gap: 80px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.table-content {
  height: 60vw;
  width: 70vw;
  border: 2px solid black;
  border-collapse: collapse;
}
th, td {
  border-left: 2px solid 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);
}
.sharp td{
  border-bottom: var(--solid-border);
}
.half td{
  border-bottom: var(--dashed-border);
}

body{
  margin: 0;
  min-height: 100vh;
   display: flex;
   gap: 80px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.table-content {
  height: 60vw;
  width: 70vw;
  border: 2px solid black;
  border-collapse: collapse;
}
th, td {
  border-left: 2px solid 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);
}
.sharp td{
  border-bottom: var(--solid-border);
}
.half td{
  border-bottom: var(--dashed-border);
}
#legend-gradient {
  border: 1px solid black;
  height: 30px;
  width: 100%;
  background-image: linear-gradient(90deg, var(--color0) 0%, var(--color0) 16%, var(--color1) 16%, var(--color1) 32%, var(--color2) 32%, var(--color2) 48%, var(--color3) 48%, var(--color3) 64%, var(--color4) 64%, var(--color4) 80%, var(--color5) 80%, var(--color5) 100%);
}
#legend{
  margin: 50px auto;
  width: 30%;
  text-align:center;
  
}
  .grad {
    display: flex;
    gap: 5px;
    justify-content: space-evenly;
    align-items: center;
  }
11

this is not the two-color stop syntax requested, look at this example: Gradient with multi-position color-stops

12

I’ve fixed it

Thanks for your help