ContextQMD
Back to Freecodecamp

Step 7

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

latest2.5 KB
Original Source

--description--

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

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

  • Last Name: Doe
  • First Name: Samantha
  • Grade: 92

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

  • Last Name: Rodriguez
  • First Name: Marcus
  • Grade: 88

--hints--

You should have a second tr inside your tbody element.

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

You should have a td element with the text Doe inside the second tr element.

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

You should have a td element with the text Samantha inside the second tr element.

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

You should have a td element with the text 92 inside the second tr element.

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

You should have a third tr inside your tbody element.

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

You should have a td element with the text Rodriguez inside the third tr element.

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

You should have a td element with the text Marcus inside the third tr element.

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

You should have a td element with the text 88 inside the third tr element.

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

--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>
        
--fcc-editable-region--
        
--fcc-editable-region--
      </tbody>
    </table>
  </body>
</html>