gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): make book inventory demo responsive for mobile (#61202)

Browse Source
This commit is contained in:
Huyen Nguyen
2025-07-29 17:32:34 +07:00
committed by GitHub
parent f662b64a37
commit 7d64725813
1 changed files with 87 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-book-inventory-app/66a207974c806a19d6607073.md
+87 -81
View File
@@ -45,10 +45,10 @@ You should have only one `h1` element.
assert.equal(document.querySelectorAll('h1')?.length, 1);
```
You should have a `table` element after your `h1` element.
You should have a `table` element.
```js
assert.equal(document.querySelector('table')?.previousElementSibling?.tagName, 'H1')
assert.equal(document.querySelectorAll('table')?.length, 1);
```
Your `table` element should have five columns.
@@ -529,85 +529,87 @@ assert.include(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVa
<body>
<main>
<h1>Book Inventory</h1>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr class="read">
<td>The Three Musketeers</td>
<td>Alexandre Dumas</td>
<td>Historical Novel</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate three">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="to-read">
<td>The Plague</td>
<td>Albert Camus</td>
<td>Philosophical Novel</td>
<td><span class="status">To Read</span></td>
<td>
<span class="rate">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>The Metamorphosis</td>
<td>Franz Kafka</td>
<td>Novella</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate one">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>Dead Souls</td>
<td>Nikolai Gogol</td>
<td>Picaresque</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate two">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="in-progress">
<td>Lord of the Flies</td>
<td>William Golding</td>
<td>Allegorical Novel</td>
<td><span class="status">In Progress</span></td>
<td>
<span class="rate">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>Do Androids Dream of Electric Sheep?</td>
<td>Philip K. Dick</td>
<td>Science Fiction</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate two">
<span></span><span></span><span></span>
</span>
</td>
</tr>
</tbody>
</table>
<div class="table-container">
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
</thead>
<tbody>
<tr class="read">
<td>The Three Musketeers</td>
<td>Alexandre Dumas</td>
<td>Historical Novel</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate three">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="to-read">
<td>The Plague</td>
<td>Albert Camus</td>
<td>Philosophical Novel</td>
<td><span class="status">To Read</span></td>
<td>
<span class="rate">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>The Metamorphosis</td>
<td>Franz Kafka</td>
<td>Novella</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate one">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>Dead Souls</td>
<td>Nikolai Gogol</td>
<td>Picaresque</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate two">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="in-progress">
<td>Lord of the Flies</td>
<td>William Golding</td>
<td>Allegorical Novel</td>
<td><span class="status">In Progress</span></td>
<td>
<span class="rate">
<span></span><span></span><span></span>
</span>
</td>
</tr>
<tr class="read">
<td>Do Androids Dream of Electric Sheep?</td>
<td>Philip K. Dick</td>
<td>Science Fiction</td>
<td><span class="status">Read</span></td>
<td>
<span class="rate two">
<span></span><span></span><span></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
@@ -620,6 +622,10 @@ assert.include(new __helpers.CSSHelp(document).getStyleAny(selectors)?.getPropVa
font-family: Arial, sans-serif;
}
.table-container {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100vw;