ContextQMD
Back to Freecodecamp

Step 8

curriculum/challenges/english/blocks/workshop-final-exams-table/66a9ca099e3ecb1be10a2696.md

latest2.8 KB
Original Source

--description--

Now it is time to add two more students to the table.

Following the same pattern as the previous steps, add a fourth student table row. Use the following data for the table data elements:

  • Last Name: Thompson
  • First Name: Jane
  • Grade: 77

For the fifth student table row, use the following data for the table data elements:

  • Last Name: Williams
  • First Name: Natalie
  • Grade: 83

--hints--

You should have a fourth tr inside your tbody element.

js
assert.isNotNull(document.querySelector('tbody tr:nth-of-type(4)'));

You should have a td element with the text Thompson inside the fourth tr element.

js
assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:first-child')?.textContent.trim(), 'Thompson');

You should have a td element with the text Jane inside the fourth tr element.

js
assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:nth-of-type(2)')?.textContent.trim(), 'Jane');

You should have a td element with the text 77 inside the fourth tr element.

js
assert.strictEqual(document.querySelector('tbody tr:nth-of-type(4) td:nth-of-type(3)')?.textContent.trim(), '77');

You should have a fifth tr inside your tbody element.

js
assert.strictEqual(document.querySelectorAll('tbody tr').length, 5);

You should have a td element with the text Williams inside the fifth tr element.

js
assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:first-child')?.textContent.trim(), 'Williams');

You should have a td element with the text Natalie inside the fifth tr element.

js
assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:nth-of-type(2)')?.textContent.trim(), 'Natalie');

You should have a td element with the text 83 inside the fifth tr element.

js
assert.strictEqual(document.querySelector('tbody tr:nth-of-type(5) td:nth-of-type(3)')?.textContent.trim(), '83');

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Calculus Final Exams Table</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <table>
      <caption>
        Calculus Final Exam Grades
      </caption>

      <thead>     
        <tr>
          <th>Last Name</th>
          <th>First Name</th>
          <th>Grade</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Davis</td>
          <td>Alex</td>
          <td>54</td>
        </tr>

        <tr>
          <td>Doe</td>
          <td>Samantha</td>
          <td>92</td>
        </tr>

        <tr>
          <td>Rodriguez</td>
          <td>Marcus</td>
          <td>88</td>
        </tr>
        
--fcc-editable-region--
        
--fcc-editable-region--
      </tbody>
    </table>
  </body>
</html>