<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Children Book Store</title>

        <meta name="description" content="Welcome to our Children Book Store! Browse and purchase a wide range of books for kids.">

        <meta name="keywords" content="children book store, kids books, children's literature">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

                

                // This will run when the DOM is ready.

                document.addEventListener("DOMContentLoaded", function() {

                    // Fetch books data from API

                    fetchBooksData();

                });



                function fetchBooksData() {

                    // Simulating API call

                    setTimeout(function() {

                        var booksData = [

                            {

                                id: 1,

                                title: "The Very Hungry Caterpillar",

                                author: "Eric Carle",

                                price: 10.99,

                                coverImage: "https://example.com/book1.jpg"

                            },

                            {

                                id: 2,

                                title: "Goodnight Moon",

                                author: "Margaret Wise Brown",

                                price: 8.99,

                                coverImage: "https://example.com/book2.jpg"

                            },

                            {

                                id: 3,

                                title: "Where the Wild Things Are",

                                author: "Maurice Sendak",

                                price: 12.99,

                                coverImage: "https://example.com/book3.jpg"

                            }

                        ];



                        // Render books on the page

                        renderBooks(booksData);

                    }, 1000);

                }



                function renderBooks(books) {

                    var container = document.getElementById("main-container");



                    // Create book cards and append to container

                    for (var i = 0; i < books.length; i++) {

                        var book = books[i];



                        var card = document.createElement("div");

                        card.classList.add("card");



                        var image = document.createElement("img");

                        image.classList.add("card-img-top");

                        image.src = book.coverImage;

                        image.alt = book.title;



                        var cardBody = document.createElement("div");

                        cardBody.classList.add("card-body");



                        var title = document.createElement("h5");

                        title.classList.add("card-title");

                        title.textContent = book.title;



                        var author = document.createElement("p");

                        author.classList.add("card-text");

                        author.textContent = "By " + book.author;



                        var price = document.createElement("p");

                        price.classList.add("card-text");

                        price.textContent = "$" + book.price;



                        var addToCartButton = document.createElement("button");

                        addToCartButton.classList.add("btn", "btn-primary");

                        addToCartButton.textContent = "Add to Cart";



                        cardBody.appendChild(title);

                        cardBody.appendChild(author);

                        cardBody.appendChild(price);

                        cardBody.appendChild(addToCartButton);



                        card.appendChild(image);

                        card.appendChild(cardBody);



                        container.appendChild(card);

                    }

                }



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            body {

                font-family: 'Roboto', sans-serif;

                background-color: #f5f5f5;

            }



            .container {

                max-width: 800px;

                margin: 0 auto;

                padding: 20px;

            }



            .card {

                margin-bottom: 20px;

            }



            .card-img-top {

                max-width: 100%;

            }



            .card-title {

                font-size: 18px;

                font-weight: bold;

                margin-bottom: 5px;

            }



            .card-text {

                margin-bottom: 5px;

            }



            .btn-primary {

                background-color: #ff8080;

                border-color: #ff8080;

            }



            .btn-primary:hover {

                background-color: #e60000;

                border-color: #e60000;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <!-- App HTML Goes Here -->

        </div>

    </body>

</html>