This article will guide you on how to create a simple random book recommender using JavaScript. By clicking the button, the page will randomly display different book cover images. Based on the existing random quote generator code, we will transform it into a random book recommender and avoid recommending the same book repeatedly.

HTML structure

First, we need to create an HTML structure to display the book cover and a button that users can click to get new book recommendations.

 <div class="books">
  <h1 class="book-generator">Random book recommendations</h1>
  <div id="bookDisplay">
    <img src="/static/imghw/default1.png" data-src="./js/books.js" class="lazy" id="bookCover"   style="max-width:90%" alt="Book Cover">
  </div>
  <button onclick="newBook()" class="button-book">Recommend a new book</button>
  <script></script>
</div>

In this HTML structure, we create a div container that contains a title h1, an img tag to display the book cover, and a button button. The id of the img tag is set to bookCover, which is used to reference and update the image in JavaScript code. The style attribute is used to set the initial width of the image, and the alt attribute is used to display alternative text when the image cannot be loaded.

JavaScript code

Next, we need to write JavaScript code to implement the logic of random book recommendations.

 var images = [
  'https://m.media-amazon.com/images/I/81jRqrKKObL._AC_UL800_FMwebp_QL65_.jpg',
  'https://m.media-amazon.com/images/I/81JgX8VgZiL._AC_UL800_FMwebp_QL65_.jpg',
  'https://m.media-amazon.com/images/I/71CBWHK035L._AC_UL800_FMwebp_QL65_.jpg',
  'https://m.media-amazon.com/images/I/91pXKpUfGgL._AC_UL800_FMwebp_QL65_.jpg',
];

let lastBook = -1; // this is to prevent offering the same book twice

function newBook() {
    let randomNumber;
    do {
      randomNumber = Math.floor(Math.random() * (images.length));
    } while (randomNumber === lastBook);
    lastBook = randomNumber;
    document.getElementById('bookCover').src = images[randomNumber];
}

This JavaScript code first defines an images array, which contains the URL of the book cover image. Then, a lastBook variable is defined to record the index of the last recommended book to prevent repeated recommendations.

The newBook ??function is where the core logic lies. It first generates a random number randomNumber, and then uses a do...while loop to ensure that the newly generated random number is different from the index of the last recommended book. If the same, random numbers are regenerated until a different index is found. Finally, update the lastBook variable and set the src attribute of the bookCover element to the URL of the new book cover image.

Code explanation

• images array : stores the URL address of the book cover image. You can add or modify these URLs as needed.
• lastBook variable : initialized to -1, indicating that no books have been recommended yet.
• newBook ??function :
  • Use Math.random() and Math.floor() to generate a random integer as the index of the images array.
  • Use a do...while loop to ensure that the generated random number is different from lastBook to prevent repeated recommendations.
  • Update the value of lastBook to the index of the currently recommended book.
  • Update the book cover image by getting the img element using document.getElementById('bookCover') and setting its src attribute to images[randomNumber].

Things to note

• Make sure the books.js file is properly linked into the HTML file.
• You can adjust the size and style of your book cover image as needed.
• This code can be extended, for example by adding information such as the book's title, author, etc.
• For a better user experience, consider showing a loading animation when loading images.
• If you need to dynamically obtain book information from the server, you can use AJAX technology.

Summarize

Through the above steps, we successfully created a simple random book recommender. This recommender can randomly display different book cover images and avoid recommending the same book repeatedly. You can modify and expand it according to your own needs, such as adding more book information, using different image sources, etc. This project can be used as an introductory exercise in learning JavaScript and front-end development, helping you better understand concepts such as DOM manipulation, event handling, and random number generation.

The above is the detailed content of Random book recommender: implemented using JavaScript. For more information, please follow other related articles on the PHP Chinese website!