Create a Library Catalog

Your web page should exhibit the following:

$3$ main components:

A list of all books in the catalog

A list of requested books

All book information should be read from the provided BookData.json file.

Each book in the book list should be displayed as a card containing the following information:

Image of book

Title

Author

Publishing year

Publishing language

Description

A "request" button to add this book to the requested books list

When the "request" button is clicked, the book should be placed in the requests section of the page.

Each book in the requested books list should be displayed as a card containing the following information:

Image of book

Title

A "cancel" button to remove this book from the requested books list

React state, event handling, and props must be used to implement the behavior of the requested books list as described above.

$\{$

"catalog": $[$

$\{$

$"$id$"$: $1,$

"title": $"1984",$

"author": "George Orwell",

"description": "A totalitarian government controls everything in an imagined future. When a government worker starts to think for himself, he faces dire consequences.",

"published": $1977,$

"language": "English",

"img": $"$src$/$img$/1984.$jpeg"

$\},$

$\{$

$"$id$"$: $2,$

"title": "American Primitive",

"author": "Mary Oliver",

"description": "Oliver$$s visionary poems explore wildness and wilderness in humans and in nature.",

"published": $1983,$

"language": "English",

"img": $"$src$/$img$/$american$-$primitive.jpeg"

$\},$

$\{$

$"$id$"$: $3,$

"title": "The Color Purple",

"author": "Alice Walker",

"description": "Letters between two sisters, one a missionary in Africa, and the other trapped in an abusive marriage in Georgia, shed light on the lived experience of rural African American women.",

"published": $1982,$

"language": "English",

"img": $"$src$/$img$/$the$-$color$-$purple.jpeg"

$\},$

$\{$

$"$id$"$: $4,$

"title": "The God of Small Things",

"author": "Arundhati Roy",

"description": $"$In $1960$s India, the lives of affluent twins Rahel and Estha are irreversibly changed upon the arrival of their English cousin.",

"published": $1997,$

"language": "English",

"img": $"$src$/$img$/$the$-$god$-$of$-$small$-$things.jpeg"

$\},$

$\{$

$"$id$"$: $5,$

"title": "Our Migrant Souls: A Meditation on Race and the Meanings and Myths of $$Latino$",$

"author": $"$H$$ctor Tobar",

"description": "A new book by the Pulitzer Prize $$ winning writer about the twenty$-$first$-$century Latino experience and identity. In Our Migrant Souls, the Pulitzer Prize$$winning writer H$$ctor Tobar delivers a definitive and personal exploration of what it means to be Latino in the United States right now.",

"published": $2023,$

"language": "English",

"img": $"$src$/$img$/$our$-$migrant$-$souls.jpeg"

$\},$

$\{$

$"$id$"$: $6,$

"title": "The Hitchhiker's Guide to the Galaxy",

"author": "Douglas Adams",

"description": "Arthur Dent and Ford Prefect set off on an interplanetary odyssey after the Earth is demolished to make way for an intergalactic freeway in this offbeat comedy.",

"published": $2023,$

"language": "English",

"img": $"$src$/$img$/$the$-$hitchhikers$-$guide$-$to$-$the$-$galaxy.jpeg"

$\},$

$\{$

$"$id$"$: $7,$

"title": "Into Thin Air: A Personal Account of the Mt$.$ Everest Disaster",

"author": "Jon Krakauer",

"description": "A first$-$hand account of the $1996$ Mount Everest disaster, in which four expedition teams were trapped by a deadly storm.",

"published": $1997,$

"language": "English",

"img": $"$src$/$img$/$into$-$thin$-$air.jpeg"

$\},$

$\{$

$"$id$"$: $8,$

"title": "One Hundred Years of Solitude",

"author": "Gabriel Garc$$a M$$rquez$",$

"description": "This pinnacle of magical realism chronicles $100$ years and seven generations of the Buend$$a family in the mythical South American town of Macondo.",

"published": $1967,$

"language": "Spanish",

"img": $"$src$/$img$/$one$-$hundred$-$years$-$of$-$solitude.jpeg"

$\},$

$\{$

$"$id$"$: $9,$

"title": "Parable of the Sower",

"author": "Octavia E$.$ Butler",

"description": "Set in a bleak near$-$future California, $18-$year$-$old Lauren suffers from hyperempathy$$she feels others' pain as well as her own.",

"published": $1993,$

"language": "English",

"img": $"$src$/$img$/$parable$-$of$-$the$-$sower.jpeg"

$\},$

$\{$

$"$id$"$: $10,$

"title": "Ceremony",

"author": "Leslie Marmon Silko",

"description": "Set on an Indian reservation just after World War II$,$ this story concerns the return home of Tayo, a war$-$weary Laguna Pueblo young man. While other returning soldiers find easy refuge in alcohol and senseless violence, Tayo searches for another kind of comfort and resolution in his heritage, traditions, and the ancient stories of his people.",

"img": $"$src$/$img$/$ceremony$.$jp

$\}]\}$

Please show the HTML$,$ CSS$,$ & Javascript files & be detailed on each