settingsAccountsettings
Menusettings

Q: Book Generator (task with DOM and jQuery)

+2 votes

Create a function that accepts a selector, a title, an author and an ISBN and uses them to create the HTML code for a book and inserts it into the selector.

HTML and JavaScript Code - You are given the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Book Generator</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"
            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
            crossorigin="anonymous"></script>
</head>
<body>
<div id="wrapper">

</div>
<script src="book-generator.js"></script>
<script>
    window.onload = function () {
        createBook("#wrapper", "Alice in Wonderland", "Lewis Carroll", 1111);
    }
</script>
</body>
</html>

Your function will receive 4 parameters - a string value representing a selector (for example "#wrapper" or ".root"), a string value representing the title of the book, a string value representing the author of the book and a number representing the ISBN of the book. After the book is created it should be attached to the passed in selector.

The number in the Id of the containing div should be incremented by one for each successive book created (i.e. first book should have id = "book1", second id = "book2" and so on…). The title, author and ISBN should be paragraphs with a class equal to their respective role - class="title" for the title paragraph, class="author" for the author paragraph and class="isbn" for the ISBN paragraph. A book should also contain 2 buttons – [Select] and [Deselect], when the [Select] button is pressed the border of the div element should be set to "2px solid blue". When the [Deselect] button is pressed it should be set to "none".

Example:

book generator jquery task

 

Example of Selected Book:

selected book

You can use what is known as an IIFE (Immediately Invoked Function Expression) to declare and instantly execute a function that will keep the id variable in its scope. This way you will receive the inner function and for it the variable id will be shared between all calls, essentially becoming like a static variable for the function

asked in JavaScript category by user paulcabalit

1 Answer

+1 vote

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <!--<script src="src/jquery-3.2.1.min.js"></script>-->
</head>
<body>
<div id="wrapper">

</div>
<script src="book-generator.js"></script>
<script>
    window.onload = function () {
        createBook("#wrapper", "Alice in Wonderland", "Lewis Carroll", 1111);
    }
</script>

</body>
</html>

JavaScript code with the jQuery:

function createBook(selector, bookTitle, authorName, isbn) {
    let bookGenerator = (function () {
        let id = 1;
        return function (selector, bookTitle, authorName, isbn) {
            let container = $(selector);
            let bookContainer = $("<div>");
            bookContainer.attr("id", `book${id}`);
            bookContainer.css("border", "none");
            $(`<p class="title">${bookTitle}</p>`).appendTo(bookContainer);
            $(`<p class="author">${authorName}</p>`).appendTo(bookContainer);
            $(`<p class="isbn">${isbn}</p>`).appendTo(bookContainer);

            let selectBtn = $("<button>Select</button>");
            let deselectBtn = $("<button>Deselect</button>");

            selectBtn.click(function () {
                bookContainer.css("border", "2px solid blue")
            });

            deselectBtn.on("click", function () {
                bookContainer.css("border", "none");
            });

            selectBtn.appendTo(bookContainer);
            deselectBtn.appendTo(bookContainer);

            bookContainer.appendTo(container);
            id++;
        }
    }());
    bookGenerator(selector, bookTitle, authorName, isbn);
    bookGenerator(selector, bookTitle, authorName, isbn);
    bookGenerator(selector, bookTitle, authorName, isbn);
}

 

answered by user richard8502
...