There are four levels in total, you can choose angular, react, etc., to make something like a library book management catalog + address book. The data structure is probably like this:
{ “A”: [ {id: “1”, title: “Abc”, author: { firstName: “John”, lastName: “Anderson” }, year: 1997} ], “B”: …}
Group by the first letter of Lastname, and then sort each group by Lastname. The css is all written, just apply it directly. The requirements of the four levels are as follows:
level 1: requires display of all Book cards, display title, author, and year according to the data of each book.
Level 2: Add a form for adding books above the directory, with four input fields (representing title/author first/lastname/year) and a submit button. It is required to be able to add a bookcard in order.
Level3: It is required to download book cards from an API.
Level4: It is required to add a toggle button. When the switch is on, it can filter according to the year
. It is similar to the picture below, but there is an extra section above, which is the submit section.