Book Roulette: Your Next Random Read

Question

Book Roulette: Your Next Random Read

I created a code for a random quote generator and now I want to create something similar, but with images this time. I am looking to add a feature on my page where it can recommend a book by displaying its cover image when a button is clicked.

For the previous quote generator, I used the following code:

HTML:

<div class="quotes">
                <h1 class="quote-generator">Simple Quote Generator</h1>
                <div id="quoteDisplay"></div>
                <button onclick="newQuote()" class="button-quote">New Quote</button>
                <script src="./js/quotes.js"></script>
            </div>

JavaScript

var quotes = [
    'One must always be careful of books,<br>and what is inside them,<br>for words have the power to change us.<br>—Cassandra Clare',
    'Only the very weak-minded refuse to be<br>influenced by literature and poetry.<br>—Cassandra Clare',
    // more quotes here
] 
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

Now, I am wondering how I can modify the quotes in the variable "quotes" to display as images instead?

javascript html css

Answer 1

Answer №1

Here is a way to achieve this functionality with some enhancements that prevent the same book from being offered twice.

If you have any questions, feel free to ask.

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; // Ensure no repeated books are offered

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

<div class="quotes">
  <h1 class="quote-generator">Simple Book Generator</h1>
  <div id="quoteDisplay">
    <img id="bookCover" style='width: 100px' src=''>
  </div>
  <button onclick="newBook()" class="button-quote">New Book</button>
  <script src="./js/quotes.js"></script>
</div>

Answer 2

Here is a way to achieve this functionality with some enhancements that prevent the same book from being offered twice.

If you have any questions, feel free to ask.

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; // Ensure no repeated books are offered

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

<div class="quotes">
  <h1 class="quote-generator">Simple Book Generator</h1>
  <div id="quoteDisplay">
    <img id="bookCover" style='width: 100px' src=''>
  </div>
  <button onclick="newBook()" class="button-quote">New Book</button>
  <script src="./js/quotes.js"></script>
</div>

Answer 3

Answer №2

Transform your array into an Array of Objects to easily store images within each object. Let me know if this method is effective for you.

<div class="quotes">
    <h1 class="quote-generator">Simple Quote Generator</h1>
    <div >
        <img src=""/>
        <p id="quoteDisplay"></p>
    </div>
    <button onclick="newQuote()" class="button-quote">New Quote</button>        
</div>


    
    let quotes = [
                    {
                        data: `Only the very weak-minded refuse to be<br>influenced by literature and poetry.<br>—Cassandra Clare`,
                        img: '1.jpg'
                    },
                    {data:`I am not afraid of storms,<br>for I am learning how to sail my ship.<br>—Louisa May Alcott`,
                        img: '2.jpg'
                    },
                    {data:`Nice things don\'t happen in storybooks.<br>Or when they do happen, something bad happens next.<br>Because otherwise the story would be boring, and no one would read it.<br>—Holly Black`,
                        img: '3.jpg'
                    {data:`You don\’t forget the face of the person who was your last hope.<br>—Suzanne Collins`,
                        img: '4.jpg'
                    {data:`You look best when you\'re you.<br>—Lynn Painter`,
                        img: '5.jpg'
                    {data:`“Everything\’s a game, Avery Grambs.<br>The only thing we get to decide in this life<br>is if we play to win.<br>—Jennifer Lynn Barnes`,
                       img: '6.jpg'
                    {data: `“Why do I have to tell a story?” I asked.<br>“Because if you don\’t tell the story,<br>someone else will tell it for you.”<br>—Jennifer Lynn Barnes`,
                        img: '7.jpg'
                    {data: `I mean, there\’s a reason all books end right after the couple gets together.<br>No one wants to keep reading long enough to see the happily ever after turn into an unhappily ever after. Right?<br>—Alex Light`,
                        img: '8.jpg'
                    {data: `Break my heart,<br>break it a thousand times,<br>it was only ever yours to break anyway.<br>—Kiera Cass`,
                        img: '9.jpg'
                    }
];


    function newQuote(){
        let randomNumber =  Math.floor(Math.random()*9);
        const target = document.getElementById('quoteDisplay');
        target.innerHTML = quotes[randomNumber].data;
        document.getElementsByTagName('img')[0].src= quotes[randomNumber].img;
    }

Answer 4

Transform your array into an Array of Objects to easily store images within each object. Let me know if this method is effective for you.

<div class="quotes">
    <h1 class="quote-generator">Simple Quote Generator</h1>
    <div >
        <img src=""/>
        <p id="quoteDisplay"></p>
    </div>
    <button onclick="newQuote()" class="button-quote">New Quote</button>        
</div>


    
    let quotes = [
                    {
                        data: `Only the very weak-minded refuse to be<br>influenced by literature and poetry.<br>—Cassandra Clare`,
                        img: '1.jpg'
                    },
                    {data:`I am not afraid of storms,<br>for I am learning how to sail my ship.<br>—Louisa May Alcott`,
                        img: '2.jpg'
                    },
                    {data:`Nice things don\'t happen in storybooks.<br>Or when they do happen, something bad happens next.<br>Because otherwise the story would be boring, and no one would read it.<br>—Holly Black`,
                        img: '3.jpg'
                    {data:`You don\’t forget the face of the person who was your last hope.<br>—Suzanne Collins`,
                        img: '4.jpg'
                    {data:`You look best when you\'re you.<br>—Lynn Painter`,
                        img: '5.jpg'
                    {data:`“Everything\’s a game, Avery Grambs.<br>The only thing we get to decide in this life<br>is if we play to win.<br>—Jennifer Lynn Barnes`,
                       img: '6.jpg'
                    {data: `“Why do I have to tell a story?” I asked.<br>“Because if you don\’t tell the story,<br>someone else will tell it for you.”<br>—Jennifer Lynn Barnes`,
                        img: '7.jpg'
                    {data: `I mean, there\’s a reason all books end right after the couple gets together.<br>No one wants to keep reading long enough to see the happily ever after turn into an unhappily ever after. Right?<br>—Alex Light`,
                        img: '8.jpg'
                    {data: `Break my heart,<br>break it a thousand times,<br>it was only ever yours to break anyway.<br>—Kiera Cass`,
                        img: '9.jpg'
                    }
];


    function newQuote(){
        let randomNumber =  Math.floor(Math.random()*9);
        const target = document.getElementById('quoteDisplay');
        target.innerHTML = quotes[randomNumber].data;
        document.getElementsByTagName('img')[0].src= quotes[randomNumber].img;
    }

Book Roulette: Your Next Random Read

Answer №1

Answer №2

Similar questions

Minor Chrome compatibility problems with CSS alignment

Automatically switch to dark mode at specified times: A simple guide

Instructions for activating and deactivating a numerical input field with a checkbox

What is the best way to execute a sequence of consecutive actions in a protractor test?

Adding to the beginning of a list in JQuery mobile

Stylish border radius for Bootstrap progress bars

Interactive image grid with adjustable description field per image upon selection

You should be providing a string value as expected. It seems that you may have overlooked exporting your component from the correct file it was defined in, or perhaps there is confusion with default and named

Nuxt.js is throwing a TypeError because it is unable to access the 'minify' property since it is undefined

Should I avoid declaring global app variables in Angular?

A solution for accessing computed properties within a v-for loop

Customize Bootstrap 4 borders within a row

What is the best way to properly redirect a page using a router link in Vue.js 2?

Combining two input text strings

The collapsible menu does not toggle when I tap on the icon

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Unable to refresh the fullcalendar section following an ajax post click

Is it necessary to implement clustering for each route in an Express.js application?

How can you utilize positioning and margins with Flexboxes?

What is the best way to create a mobile design in Dreamweaver while utilizing the same css file as my Desktop code?