Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I can’t get the last check for the linear gradient. I have tried every option I can find but none will give the check even though it works.

Your code so far

<!-- file: index.html -->


/* file: styles.css */

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Hi there and welcome to the forum!

For some reason your code is missing, please share your HTML and CSS

How to do:

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 (').

3 
<!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>
    <main>
        <table>
            <thead>
                <tr class="">
                    <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-1"></td>
                    <td class="available-2"></td>
                    <td class="available-0"></td>
                    <td class="available-3"></td>
                </tr>
                <tr class="half">
                    <th class="time">10am</th>
                    <td class="available-4"></td>
                    <td class="available-5"></td>
                    <td class="available-0"></td>
                    <td class="available-1"></td>
                    <td class="available-5"></td>
                </tr>
                <tr class="sharp">
                    <th class="time">11am</th>
                    <td class="available-2"></td>
                    <td class="available-3"></td>
                    <td class="available-4"></td>
                    <td class="available-2"></td>
                    <td class="available-5"></td>
                </tr>
                <tr class="half">
                    <th class="time">12pm</th>
                    <td class="available-3"></td>
                    <td class="available-0"></td>
                    <td class="available-1"></td>
                    <td class="available-2"></td>
                    <td class="available-3"></td>
                </tr>
                <tr class="sharp">
                    <th class="time">1pm</th>
                    <td class="available-4"></td>
                    <td class="available-5"></td>
                    <td class="available-0"></td>
                    <td class="available-4"></td>
                    <td class="available-1"></td>
                </tr>
            </tbody>
        </table>
        <div id="legend">
            <span class="legendbar">Availability</span>
            <div id="legend-gradient"></div>            
        </div>
    </main>
</body>

</html>
4 
{
  --color0: lightgrey;
  --color1: blue;
  --color2: green;
  --color3: yellow;
  --color4: orange;
  --color5: red;
  --solid-border: 1px solid black;
  --dashed-border: 1px dashed black;
}
td, th {
  min-width: 5em;
  max-width: 10vw;
}
.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);
}

table {
  width: 90vw;
  max-width: 800px;
  height: 200px;
  position: relative;
  right: 0;
  border-collapse: collapse;
  margin: 30px auto 30px;
}
span {
  margin-top: 30px;
}
.sharp td {
  border-bottom: var(--solid-border);
}
.half td {
  border-bottom: var(--dashed-border);
}
.legendbar {
  position: relative;
  font-size: 1.5em;
  display: flex;
  justify-content: center;
}
#legend-gradient{
  width: 80vw;
  height: 10vh;
  margin: 10px auto;
  background-image: linear-gradient(90deg,
  var(--color0) 0 16%,
  var(--color1) 16% 33%,
  var(--color2) 33% 50%,
  var(--color3) 50% 67%,
  var(--color4) 67% 84%,
  var(--color5) 84% 100%);
}
5

The actual first line of CSS (missed int the copy and paste)

:root {

6

btw, you can edit a post to make changes to it

you need to use a percentage also for the first number

1 Like
7

That was the problem. Thank you!