I am currently trying to build a small app where the user clicks on a mood (HAPPY in this case) and it brings up bible scriptures based on that mood. I’ve attempted to build a carousel where a button is clicked and shows different text each time infinitely with a fade in and out.
When the ‘Show me another’ button is clicked, it doesn’t change to the next HTML figure element in the array. It just fades.
Have looked through the forum, MDN docs etc and cannot find a solution. I’m stumped.
I realise this might not be of any interest to you, but React would be perfect for this kind of functionality. Mainly, managing each element would be much easier.
Otherwise, you might be interested in having a look at the implementation of the Random Quote Machine. Give that a search on this forum, and you can peruse a bunch of people’s CodePen’s for inspiration.
Thanks so much for your reply. Unfortunately I have to build using vanilla JavaScript as I am trying to become more proficient. But I am going to bookmark those links and will definitely visit them when I need to.
Actually, out of curiosity, is it advisable to learn React at this point? I’m still putting my JavaScript fundamental skills into practice but as you said, React would make a task like this much more efficient.
Unfortunately, I cannot give you a definitive answer, based on what I know. It depends on you - your willingness to learn, general time-frame to put towards learning, and what you are interested in doing.
Personally, I had a blast learning React, and use it very frequently. Learning it definitely improved my JavaScript, but it opened a can of worms, in the beginning, which I am only now just getting through.
Back to your project…I suggest you have something like this work-flow:
In your HTML, only have 1 or 2 sections for holding/displaying your quotes (and other info).
In your JS, have an array of quotes (maybe an object, especially since you need to provide the passage and book/verse).
Have a function call on the push of the New Verse button that changes the innerHTML of the element you want to a random quote.
If you want the animations, use setTimeout() (among other things) to delay the change of the innerHTML, and change the styles as you already have.
Personally, I would have 2 functions in my JS to do the above.
Connected to the button that includes the style changes, and the call to setTimeout.
The function you will call in the setTimeout to change the innerHTML.
I still highly recommend you take a look at people’s implementation of the Random Quote Machine. It has a similar workflow/logic.
Note that the “carousel” works only once, and this is because even though each figure in your HTML has its own “happy button”, you actually reference only one such “happy button” in your JS.
I suggest having only 1 such button, this way it’ll be easier to handle its events.
Thanks for your reply Sky. I must say I’m liking this forum already. Very welcoming.
I have taken your advice and only created one section for the quotes. I have also created an object with the verse information.
My issue now is having the different verse information show. I have played around with the index etc but to no avail. I know there’s something I’m missing but I can’t put my finger on it. My head hurts I’m sure as I keep practicing, tasks like these will become easier. Any help would be appreciated. Thank you.
Just a tip: An object of objects does not make much sense. It is more common to see an array of objects. It makes it easier to work with.
Something like this:
const happyVerses = [{title: "...", verse: "..."},{...},{...}];
// Now you could get a random verse like this:
const randomVerse = happyVerses[Math.floor(Math.random()*happyVerses.length)];
let newTitle = randomVerse.title;
let newVerse = randomVerse.verse;
If any of those methods are new to you, you should look them up, as they are quite common.
I’m sure as I keep practicing, tasks like these will become easier. Any help would be appreciated. Thank you.