Skip to content

Commit ad667c6

Browse files
Dario-DCDario-DC
authored
fix(curriculum): descriptions and tests in final exams table workshop (freeCodeCamp#57959)
1 parent c441efd commit ad667c6

File tree

13 files changed

+71
-86
lines changed

13 files changed

+71
-86
lines changed

‎client/i18n/locales/english/intro.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1907,7 +1907,7 @@
19071907
"workshop-final-exams-table": {
19081908
"title": "Build a Final Exams Table",
19091909
"intro": [
1910-
"In this workshop, you will learn how to work with HTML tables by building a table of final exams."
1910+
"In this workshop, you will practice working with HTML tables by building a table of final exams."
19111911
]
19121912
},
19131913
"lab-book-catalog-table": {

‎client/src/pages/learn/full-stack-developer/workshop-final-exams-table/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ superBlock: full-stack-developer
66

77
## Introduction to the Build a Final Exams Table
88

9-
This is a test for the new project-based curriculum.
9+
In this workshop, you will practice working with HTML tables by building a table of final exams.

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a98f42c7c06903e5f8dd07.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ demoType: onLoad
88

99
# --description--
1010

11-
In this workshop, you will learn how to work with HTML tables by building a final exam table for a group of students.
11+
In this workshop, you will practice working with HTML tables by building a final exam table for a group of students.
1212

1313
To begin the project, add the `<!DOCTYPE html>`, and an `html` element with a `lang` attribute of `en`.
1414

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b333487b9c14998539a5.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ assert.match(code, /<\/head>[.\n\s]*<body>/im)
107107
<html lang="en">
108108
--fcc-editable-region--
109109
<head>
110-
110+
111111
</head>
112112
--fcc-editable-region--
113113
</html>

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b48a211a73155621d0df.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Your `table` element should be inside your `body` element.
2929

3030
```js
3131
const tableEl = document.querySelector('table');
32-
assert.strictEqual(tableEl.parentElement.tagName, 'BODY');
32+
assert.strictEqual(tableEl?.parentElement?.tagName, 'BODY');
3333
```
3434
3535
# --seed--
@@ -44,9 +44,9 @@ assert.strictEqual(tableEl.parentElement.tagName, 'BODY');
4444
<meta charset="UTF-8" />
4545
</head>
4646
<body>
47-
--fcc-editable-region--
48-
49-
--fcc-editable-region--
47+
--fcc-editable-region--
48+
49+
--fcc-editable-region--
5050
</body>
5151
</html>
5252
```

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9b8f14b963916a3baa732.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ dashedName: step-4
77

88
# --description--
99

10-
To add a caption to a `table`, you can use the table <dfn>caption</dfn> element.
10+
To add a caption to a `table`, you can use the <dfn>table caption</dfn> element.
1111

1212
Here is an example using the `caption` element:
1313

@@ -61,7 +61,7 @@ assert.strictEqual(captionEl.innerText, 'Calculus Final Exam Grades');
6161
<body>
6262
--fcc-editable-region--
6363
<table>
64-
64+
6565
</table>
6666
--fcc-editable-region--
6767
</body>

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bb8578459a175432e7d0.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ dashedName: step-5
99

1010
For the first section of the table, you will want to group the header content which represents the column labels for the student's first name, last name, and final exam grade.
1111

12-
The `table head` element, `<thead>`, is used to group the header content in a table.
12+
The <dfn>table head</dfn> element, `thead`, is used to group the header content in a table.
1313

1414
Here is an example using the `thead` element:
1515

@@ -21,7 +21,7 @@ Here is an example using the `thead` element:
2121
</table>
2222
```
2323

24-
Below your `caption` element, add a `table head` element.
24+
Below your `caption` element, add a table head element.
2525

2626
# --hints--
2727

@@ -41,7 +41,7 @@ Your `thead` element should be inside your `table` element.
4141

4242
```js
4343
const theadEl = document.querySelector('thead');
44-
assert.strictEqual(theadEl.parentElement.tagName, 'TABLE');
44+
assert.strictEqual(theadEl?.parentElement?.tagName, 'TABLE');
4545
```
4646
4747
# --seed--
@@ -60,9 +60,9 @@ assert.strictEqual(theadEl.parentElement.tagName, 'TABLE');
6060
<caption>
6161
Calculus Final Exam Grades
6262
</caption>
63-
--fcc-editable-region--
64-
65-
--fcc-editable-region--
63+
--fcc-editable-region--
64+
65+
--fcc-editable-region--
6666
</table>
6767
</body>
6868
</html>

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9bcf00f13a418368a272e.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ dashedName: step-6
77

88
# --description--
99

10-
The `table head` element consists of a `table row` element, `<tr>`, which contains the `table header` cell elements, `<th>`.
10+
The table head element consists of a <dfn>table row</dfn> element, `tr`, which contains the <dfn>table header cell</dfn> elements, `th`.
1111

1212
Here is an example using the `tr` and `th` elements for a sports table:
1313

@@ -48,28 +48,28 @@ Your `tr` element should be inside your `thead` element.
4848

4949
```js
5050
const trEl = document.querySelector('tr');
51-
assert.strictEqual(trEl.parentElement.tagName, 'THEAD');
51+
assert.strictEqual(trEl?.parentElement?.tagName, 'THEAD');
5252
```
5353
5454
Your first `th` element should have the text of `Last Name`.
5555
5656
```js
5757
const thEl = document.querySelectorAll('th')[0];
58-
assert.strictEqual(thEl.textContent, 'Last Name');
58+
assert.strictEqual(thEl?.textContent, 'Last Name');
5959
```
6060
6161
Your second `th` element should have the text of `First Name`.
6262
6363
```js
6464
const thEl = document.querySelectorAll('th')[1];
65-
assert.strictEqual(thEl.textContent, 'First Name');
65+
assert.strictEqual(thEl?.textContent, 'First Name');
6666
```
6767
6868
Your third `th` element should have the text of `Grade`.
6969
7070
```js
7171
const thEl = document.querySelectorAll('th')[2];
72-
assert.strictEqual(thEl.textContent, 'Grade');
72+
assert.strictEqual(thEl?.textContent, 'Grade');
7373
```
7474
7575
All of your `th` elements should be inside your `tr` element.

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c006e4f58819396605b3.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ dashedName: step-7
77

88
# --description--
99

10-
Now that you have completed the head section, it is time to add the `table body`. The `table body` will represent all of the student names and their grades.
10+
Now that you have completed the head section, it is time to add the <dfn>table body</dfn>, `tbody`. The table body will represent all of the student names and their grades.
1111

12-
Add a `table body` element to your table.
12+
Add a table body element to your table.
1313

1414
# --hints--
1515

@@ -55,10 +55,9 @@ assert.match(code, /<tbody>[\s\S]*<\/tbody>/i);
5555
<th>Grade</th>
5656
</tr>
5757
</thead>
58-
59-
--fcc-editable-region--
60-
61-
--fcc-editable-region--
58+
--fcc-editable-region--
59+
60+
--fcc-editable-region--
6261
</table>
6362
</body>
6463
</html>

‎curriculum/challenges/english/25-front-end-development/workshop-final-exams-table/66a9c14e3b34c719e34bae20.md‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ dashedName: step-8
77

88
# --description--
99

10-
To add student data to the table, you will need to use the `table row` and <dfn>table data</dfn> elements.
10+
To add student data to the table, you will need to use the table row and table data elements.
1111

12-
The `table data` element, `<td>`, is used to create a cell in the table.
12+
The <dfn>table data</dfn> element, `td`, is used to create a cell in the table.
1313

1414
Here is an example of using the `td` element for a sports players table:
1515

@@ -21,29 +21,17 @@ Here is an example of using the `td` element for a sports players table:
2121
</tr>
2222
```
2323

24-
Inside your `table body` element, add a `table row` element, `<tr>`, with three `table data` elements, `<td>`.
24+
Inside your table body element, add a table row element, `tr`, with three table data elements, `td`.
2525

26-
The first `table data` element should contain the last name of `Davis`.
26+
The first table data element should contain the last name of `Davis`.
2727

28-
The second `table data` element should contain the first name of `Alex`.
28+
The second table data element should contain the first name of `Alex`.
2929

30-
The third `table data` element should contain the grade of `54`.
30+
The third table data element should contain the grade of `54`.
3131

3232
# --hints--
3333

34-
You should have an opening `tr` tag.
35-
36-
```js
37-
assert.match(code, /<tr>/i);
38-
```
39-
40-
You should have a closing `tr` tag.
41-
42-
```js
43-
assert.match(code, /<\/tr>/i);
44-
```
45-
46-
Your `tr` element should be inside your `tbody` element.
34+
You should have a `tr` element inside your `tbody` element.
4735

4836
```js
4937
assert.isNotNull(document.querySelector('tbody tr'));
@@ -52,19 +40,19 @@ assert.isNotNull(document.querySelector('tbody tr'));
5240
You should have a `td` element with the text `Davis` inside the `tr` element.
5341

5442
```js
55-
assert.strictEqual(document.querySelector('tbody tr td').textContent, 'Davis');
43+
assert.strictEqual(document.querySelector('tbody tr td')?.textContent, 'Davis');
5644
```
5745
5846
You should have a `td` element with the text `Alex` inside the `tr` element.
5947
6048
```js
61-
assert.strictEqual(document.querySelectorAll('tbody tr td')[1].textContent, 'Alex');
49+
assert.strictEqual(document.querySelectorAll('tbody tr td')[1]?.textContent, 'Alex');
6250
```
6351
6452
You should have a `td` element with the text `54` inside the `tr` element.
6553
6654
```js
67-
assert.strictEqual(document.querySelectorAll('tbody tr td')[2].textContent, '54');
55+
assert.strictEqual(document.querySelectorAll('tbody tr td')[2]?.textContent, '54');
6856
```
6957
7058
You should have all three of the `td` elements inside the `tr` element.
@@ -99,9 +87,9 @@ assert.match(code, /<tr>[\s\S]*<td>[\s\S]*<\/td>[\s\S]*<td>[\s\S]*<\/td>[\s\S]*<
9987
</thead>
10088

10189
<tbody>
102-
--fcc-editable-region--
103-
104-
--fcc-editable-region--
90+
--fcc-editable-region--
91+
92+
--fcc-editable-region--
10593
</tbody>
10694
</table>
10795
</body>

0 commit comments

Comments
 (0)