Build an Availability Table - Build an Availability Table

Curriculum Help
,
1

Tell us what’s happening:

I have a problem with the test 11, I have asked to artificial intelligence but it cannot fix it. If someone knows how I can solve that, I am so glad for that.

Your code so far

<!-- 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" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
  <main>
    <div id="tab-container">
      <header>
        <h1>Availability Weekly Calendar</h1>
        <p class="description">Tracking your week based on your current availability, the best app for tracking and organizing your time</p>
      </header>
      
      <table>
        <thead>
          <tr>
            <th></th>
            <th class="main-title">Monday</th>
            <th class="main-title">Tuesday</th>
            <th class="main-title">Wednesday</th>
            <th class="main-title">Thursday</th>
            <th class="main-title">Friday</th>
            <th class="main-title">Saturday</th>
            <th class="main-title">Sunday</th>
          </tr>
        </thead>
        <tbody>
          <tr class="row-4am time-row sharp">
            <th class="time">4 AM</th>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
          </tr>
          <tr class="row-5am time-row half">
            <th class="time">5 AM</th>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
          </tr>
          <tr class="row-6am time-row sharp">
            <th class="time">6 AM</th>
            <td class="available-4"></td>
            <td class="available-5"></td>
            <td class="available-5"></td>
            <td class="available-0"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-2"></td>
          </tr>
          <tr class="row-7am time-row half">
            <th class="time">7 AM</th>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
            <td class="available-3"></td>
            <td class="available-0"></td>
          </tr>
          <tr class="row-8am time-row sharp">
            <th class="time">8 AM</th>
            <td class="available-2"></td>
            <td class="available-2"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
          </tr>
          <tr class="row-9am time-row half">
            <th class="time">9 AM</th>
            <td class="available-2"></td>
            <td class="available-5"></td>
            <td class="available-2"></td>
            <td class="available-5"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-4"></td>
          </tr>
          <tr class="row-10am time-row sharp">
            <th class="time">10 AM</th>
            <td class="available-5"></td>
            <td class="available-5"></td>
            <td class="available-5"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
          </tr>
          <tr class="row-11am time-row half">
            <th class="time">11 AM</th>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-5"></td>
            <td class="available-1"></td>
            <td class="available-1"></td>
          </tr>
          <tr class="row-12pm time-row sharp">
            <th class="time">12 PM</th>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
            <td class="available-0"></td>
            <td class="available-0"></td>
          </tr>
          <tr class="row-1pm time-row half">
            <th class="time">1 PM</th>
            <td class="available-2"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
          </tr>
          <tr class="row-2pm time-row sharp">
            <th class="time">2 PM</th>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
          </tr>
          <tr class="row-3pm time-row half">
            <th class="time">3 PM</th>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-0"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="row-4pm time-row sharp">
            <th class="time">4 PM</th>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
          </tr>
          <tr class="row-5pm time-row half">
            <th class="time">5 PM</th>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
          </tr>
          <tr class="row-6pm time-row sharp">
            <th class="time">6 PM</th>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="row-7pm time-row half">
            <th class="time">7 PM</th>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="row-8pm time-row sharp">
            <th class="time">8 PM</th>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="row-9pm time-row half">
            <th class="time">9 PM</th>
            <td class="available-0"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-1"></td>
            <td class="available-0"></td>
          </tr>
        </tbody>
      </table>
      
      <div id="legend">
        <span class="letter">Availability</span>
        <span class="num">0 </span>
        <div id="legend-gradient"></div>
        <span class="num"> 5</span>
      </div>
        
      <div id="footer">
        <p class="foot">Operated under the discretion of FranceCop S.A.S. — Est. 1918</p>
      </div>
    </div>
  </main>
</body>
</html>

/* file: styles.css */
:root {
  --color0: #3d2a1d;
  --color1: #2d3121;
  --color2: #1c2e2e;
  --color3: #192a35;
  --color4: #251d3a;
  --color5: #1c2a22;
  --solid-border: 1px solid rgba(223, 186, 115, 0.25);
  --dashed-border: 1px dashed rgba(223, 186, 115, 0.15);
}

* {
  box-sizing: border-box;
  margin: 0; 
  padding: 0;
}

body {
  background-color: #11141a;
  color: #f4f5f6;
  font-family: 'Cinzel', 'Didot', 'Playfair Display', serif;
  margin: 0;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

#tab-container {
  background-color: #161b22;
  border: var(--solid-border);
  border-radius: 12px;
  padding: 30px;
  max-width: 1200px;
  width: 100%;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 
              0 0 50px rgba(223, 186, 115, 0.15);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px auto;
  font-family: 'Montserrat', 'Inter', sans-serif;
}

table tr {
  transition: background-color 0.3s ease;
}

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

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

table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
  cursor: pointer;
}

h1 {
  font-family: 'Cinzel', 'Didot', 'Playfair Display', serif;
  color: #dfba73;
  font-size: 2.2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 5px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.main-title {
  font-family: 'Cinzel', 'Didot', 'Playfair Display', serif;
  color: #dfba73;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 16px;
  border-bottom: 2px solid #dfba73;
  text-align: center;
}

.time {
  font-family: 'Cinzel', 'Didot', sans-serif;
  color: #dfba73;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  padding: 14px 20px;
  text-align: left;
  width: 120px;
  background-color: #161b22 !important;
}

.description {
  font-family: 'Montserrat', 'Inter', sans-serif;
  color: #8b949e;
  font-size: 1rem;
  margin: 25px auto;
  letter-spacing: 1px;
  text-align: center;
}

.available-0 { background-color: var(--color0); color: #ffd1b3; }
.available-1 { background-color: var(--color1); color: #f2f5c4; }
.available-2 { background-color: var(--color2); color: #b3f0f0; }
.available-3 { background-color: var(--color3); color: #cce6ff; }
.available-4 { background-color: var(--color4); color: #e6ccff; }
.available-5 { background-color: var(--color5); color: #ccffdd; }

#legend {
  font-family: 'Montserrat', 'Inter', sans-serif;
  color: #8b949e;
  font-size: 1.25rem;
  letter-spacing: 1px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.letter {
  display: block;
}

/* Added height so the gradient is visible, and fixed the percentages to whole, even numbers */
#legend-gradient {
  background-image: linear-gradient(90deg, 
    var(--color0) 0%, var(--color0) 17%, 
    var(--color1) 17%, var(--color1) 34%, 
    var(--color2) 34%, var(--color2) 51%, 
    var(--color3) 51%, var(--color3) 68%, 
    var(--color4) 68%, var(--color4) 85%, 
    var(--color5) 85%, var(--color5) 100%
  );
  width: 40%;
  height: 24px;
  border-radius: 4px;
  border: var(--solid-border);
}

#footer {
  font-family: 'Montserrat', 'Inter', sans-serif;
  color: #8b949e;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 35px;
  line-height: 1.5;
  text-transform: uppercase;
  border-top: 2px solid rgba(212,175,55,0.4);
  padding-top: 30px;
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

GitHub Link: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-availability-table/66b36358ed4f261d64840c24.md

2

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

Welcome to the forum @fernando.cortes.suar

five rows

I don’t think you need to include the week end.

Happy coding