diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 75a4bfd3f63..236cd6df625 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -1755,7 +1755,12 @@ "In this workshop, you will learn how to work with HTML tables by building a table of final exams." ] }, - "xdvu": { "title": "21", "intro": [] }, + "lab-book-catalog-table": { + "title": "Build a Book Catalog Table", + "intro": [ + "In this lab, you will create table filled with book information." + ] + }, "rsve": { "title": "22", "intro": [] }, "xzam": { "title": "23", "intro": [] }, "isho": { "title": "24", "intro": [] }, diff --git a/client/src/pages/learn/front-end-development/lab-book-catalog-table/index.md b/client/src/pages/learn/front-end-development/lab-book-catalog-table/index.md new file mode 100644 index 00000000000..668f5e6bca6 --- /dev/null +++ b/client/src/pages/learn/front-end-development/lab-book-catalog-table/index.md @@ -0,0 +1,9 @@ +--- +title: Introduction to the Build a Book Catalog Table +block: lab-book-catalog-table +superBlock: front-end-development +--- + +## Introduction to the Build a Book Catalog Table + +In this lab, you will create table filled with book information. diff --git a/curriculum/challenges/_meta/lab-book-catalog-table/meta.json b/curriculum/challenges/_meta/lab-book-catalog-table/meta.json new file mode 100644 index 00000000000..0339c32a501 --- /dev/null +++ b/curriculum/challenges/_meta/lab-book-catalog-table/meta.json @@ -0,0 +1,11 @@ +{ + "name": "Build a Book Catalog Table", + "blockType": "lab", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "dashedName": "lab-book-catalog-table", + "order": 21, + "superBlock": "front-end-development", + "challengeOrder": [{ "id": "66ec4c8e9878d8441956516f", "title": "Build a Book Catalog Table" }], + "helpCategory": "HTML-CSS" +} diff --git a/curriculum/challenges/english/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md b/curriculum/challenges/english/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md new file mode 100644 index 00000000000..410f2bf50b1 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/lab-book-catalog-table/66ec4c8e9878d8441956516f.md @@ -0,0 +1,200 @@ +--- +id: 66ec4c8e9878d8441956516f +title: Build a Book Catalog Table +challengeType: 14 +dashedName: build-a-book-catalog-table +demoType: onClick +--- + +# --description-- + +**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. + +**User Stories:** + +1. You should create a `table` element that lists book information. +1. Your table should have a table head element with one row in it. +1. The row in your table head element should have four table header elements, with the text of `Title`, `Author`, `Genre`, and `Publication Year`, in that order. +1. Your table should have a table body element with at least five rows in it. +1. Each row in your table body should have four table data elements that display the book's Title, Author, Genre, and Publication Year. +1. Your table should have a table footer element with one row in it. +1. The row in your table footer element should have a table data element that spans four columns and has the text `Total Books: [number of books in your table]`. + +# --hints-- + +You should have one `table` element. + +```js +assert.lengthOf(document.querySelectorAll('table'), 1); +``` + +You should have one `thead` element within your `table` element. + +```js +assert.lengthOf(document.querySelectorAll('table thead'), 1); +``` + +You should have one `tr` element within your `thead` element. + +```js +assert.lengthOf(document.querySelectorAll('thead tr'), 1); +``` + +You should have four `th` elements within your `thead` element's row. + +```js +assert.lengthOf(document.querySelectorAll('thead tr th'), 4); +``` + +Your four `th` elements should have the text `Title`, `Author`, `Genre`, and `Publication Year`, in that order. + +```js +const ths = document.querySelectorAll('thead tr th'); +assert.equal(ths[0]?.textContent, 'Title'); +assert.equal(ths[1]?.textContent, 'Author'); +assert.equal(ths[2]?.textContent, 'Genre'); +assert.equal(ths[3]?.textContent, 'Publication Year'); +``` + +You should have one `tbody` element within your `table` element. + +```js +assert.lengthOf(document.querySelectorAll('table tbody'), 1); +``` + +Your `tbody` element should have at least five rows. + +```js +assert.isAtLeast(document.querySelectorAll('tbody tr').length, 5); +``` + +Each row in your `tbody` element should have exactly four `td` elements as children. + +```js +const rows = document.querySelectorAll('tbody tr'); +assert.isAtLeast(rows.length, 1); + +rows.forEach(row => { + assert.lengthOf(row.querySelectorAll('td'), 4); + assert.lengthOf(row.children, 4); +}); +``` + +Each `td` element in your table body should have text with book information. + +```js +const tds = document.querySelectorAll('tbody tr td'); +assert.isAtLeast(tds.length, 1); + +tds.forEach(td => { + assert.isAtLeast(td.textContent.length, 1); +}); +``` + +You should have one `tfoot` element within your `table` element. + +```js +assert.lengthOf(document.querySelectorAll('table tfoot'), 1); +``` + +You should have exactly one `tr` element in your `tfoot` element. + +```js +assert.lengthOf(document.querySelectorAll('tfoot tr'), 1); +``` + +The `td` element in your `tfoot` element's row should have it's `colspan` attribute set to `4`. + +```js +assert.equal(document.querySelector('tfoot tr td')?.colSpan, 4); +``` + +The `td` element in your `tfoot` element's row should have the text `Total Books: [number of books in your table]`. + +```js +const numberOfBooks = document.querySelectorAll('tbody tr')?.length; +assert.equal(document.querySelector('tfoot tr td').textContent, `Total Books: ${numberOfBooks}`); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Book Catalog + + + + + + +``` + +# --solutions-- + +```html + + + + + + Book Catalog + + +

Book Catalog

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TitleAuthorGenrePublication Year
How to Contribute to Open-Source Projects – A Handbook for BeginnersHillary NyakundiOpen Source2023
Learn Linux for Beginners: From Basics to Advanced TechniquesZaira HiraLinux2024
How to Learn to Code and Get a Developer JobQuincy LarsonLearn To Code2024
The Regular Expressions Book – RegEx for JavaScript DevelopersKolade ChrisRegular Expressions2023
The Python Code Example HandbookFarhan Hasin ChowdhuryPython2023
Total Books: 5
+ + +```