Can HTML create a random book generator?

valentina
May 30, 2023
234 views
0 votes
2 Answers

this is a code i made for a random quote generator and I want to make a similar one but with images this time. I want to put a resource in my page in which it’ll recommend you a book. You will have to click on a button and it will randomly show you a book cover.

For the quote generator I did this:

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',
    'I am not afraid of storms,<br>for I am learning how to sail my ship.<br>—Louisa May Alcott',
    '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',
    'You don’t forget the face of the person who was your last hope.<br>—Suzanne Collins',
    'You look best when you're you.<br>—Lynn Painter',
    '“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',
    '“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',
    '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',
    'Break my heart,<br>break it a thousand times,<br>it was only ever yours to break anyway.<br>—Kiera Cass',
] 
function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

how can I change it the quotes that are in the variable quotes, to be images?

Answers

This can be achieved like below. I have slightly improved the logic to make sure that the same book is not offered twice.

Please let me know if this helps.

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];
}

<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>

convert your array to Array of Objects. so you can also store images in object.
Please let me know if this works 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;
    }

Please signup or login to give your own answer.

Click here to cancel reply.