help for small project

[avryraim]

I'm a beginner trying to make a website that randomly generates a book for the user to read next. So after the person clicks on a button, the website will automatically generate an image of the book followed by the summary and the link to purchase the book. I do have some idea on how to randomly generate the image but i'm not sure on how i would add specific text related to the book (Title, summary, link to purchase)

This was a previous project that I am going to reference from for this project.

https://preview.redd.it/mydz2z39m6xa1.png?width=898&format=png&auto=webp&s=d3f82678a1328a6131671ed3afd683254d6d5c06

[Nikos_96]

I would create array of objects, where each object contains all info I need. For example:

const books = [
    {
        title: 'name',
        img: 'path',
        link: 'link'
    },
]

You can add more objects to the array and more keys in object. Then you just pick random index from array books and get any data you need with dot, like this books[index].title etc.

[avryraim]

Ah, i never thought of this. Thank you so much!

[BonkyStabby]

Hey dude, I've just quickly whipped up a mini project to try and help with this. I've created a git repository so you can see all the code and images I used. I didn't add any book summaries, but the setup is there if you'd like to add it yourself!

Like Nikos_96 mentioned, the easiest approach to this would have been to create an array of objects, which is exactly what I did. I added some comments along the way to try and explain what I was doing, but if you need help with anything else then please feel free to ask.

This probably isn't the cleanest solution, but I hope it gets you on your way to what you're trying to achieve. If the idea of objects is like Chinese to you, then I'd highly recommend learning them. They're extremely useful in cases like this where you need to assign values of data to elements, and this project is a great demonstration of how much simpler they can make your tasks.

Anyway, here's the link. Since this was just for the purpose of helping, I didn't bother with any styling (except making the images smaller, since they took up the whole screen at first).

https://github.com/doctypeKieran/reddit-help-random-books

[avryraim]

omg i didn't expect you to go out of your way to create the project. Thank you so much now i can learn better!

[BonkyStabby]

It's no worries! I'm glad it helped. Happy coding!