Build an Availability Table - Build an Availability Table

Curriculum Help
,
1

Tell us what’s happening:

I’m working on figuring out Q 39 to the end with the aria labels, I’ve worked out where to put the scope=“col” but not the scope=“row”, the next part of the end of the test is about the aria labels, which is another placement struggle as it keeps comming back on and i’m still scratching my brain about these things now. Will carry on working on this until I either solve it or give it a few hours.
hope I make sense, thanks for any rely!

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/151.0.0.0 Safari/537.36 Edg/151.0.0.0

Challenge Information:

Build an Availability Table - Build an Availability Table

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-availability-table/66b36358ed4f261d64840c24.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @bunnyprog,

Your code was too long to be automatically inserted by the help button.

Please update the message, or reply to this one, to include your code, formatted as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

Happy coding

3 
<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">

<caption>Weekly Meeting Availability Schedule</caption>

<tr>

<th scope="col"></th>

<th scope="col">Monday</th>

<th scope="col">Tuesday</th>

<th scope="col">Wednesday</th>

<th scope="col">Thursday</th>   

<th scope="col">Friday</th>

<th scope="col">Saturday</th>

<th scope="col">Sunday</th>

</tr>

<tr class="sharp">

        <th class="time" scope="col">9:00 AM</th>

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

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

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

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

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

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

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

    </tr>

    <tr class="half">

        <th class="time" scope="row">10:00 AM </th>

        <td class="available-1" scope="row" aria-label="1"></td>

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

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

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

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

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

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

    </tr>

    <tr class="sharp">

        <th class="time" scope="row">11:00 AM</th>

        <td class="available-4" aria-label="4" scope="row"></td>

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

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

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

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

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

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

       

    </tr>

    <tr class="half">

        <th class="time" scope="row">12:00 PM</th>

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

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

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

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

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

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

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

    </tr>

    <tr class="sharp">

        <th class="time" scope="row">13:00 PM</th>

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

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

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

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

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

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

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

    </tr>

    <tr class="half">

        <th class="time" scope="row">14:00 PM</th>

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

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

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

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

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

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

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

    </tr>

     <tr class="half">

        <th class="time" scope="row">15:00 PM</th>

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

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

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

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

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

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

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

    </tr>

     <tr class="half">

        <th class="time" scope="row">16:00 PM</th>

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

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

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

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

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

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

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

        

   

        



    </tr>

     <tr class="half">

        <th class="time" scope="row">17:00 PM</th>

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

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

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

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

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

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

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

    </tr>

    <span>Availability</span><br>

    <div class="bar">

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

   

    </div>

</div>
4

Currently the tests are a bit strict, but that should be fixed with the next deployment.

To pass the tests, please replace <th scope="col"></th> with a header cell like this: <th class="time" scope="col">9:00 AM</th>

Happy coding

5

I’m still quiet confused as to how the scope=“row” goes, and the aria abel but I will work on this throught the night as much as I can. @dhess I tried your snippet of code and unfortunatly that did northing…

I will get there, maybe I need to readjust a few CSS things and see what happens.

This hardline is confusing too, I look for all the hints or answers and I drag myself through reading a lot of other people’s answers and basically I’ve done the parts myself that people are struggling with on the forum but I haven’t found a hint or anything to what I need to figure out. proud of it either way! haha that never happens…

thanks for any help or tips.

means a lot.

maybe I got the snippet wrong from dhess?? will look again in a min, most of the time I just need to adjust a snippet or remove a tiny mistake but this time its me chaging and debugging endlessly to the point where this project hasnt changed, I’m just removing all the mistakes over and over again. not so fun times.

6

Please post your updated code if you’d like more help.

Here’s a good example of how to do the hard-line linear gradient:
MDN: Linear Gradient with Multi-Position Color Stops