Front End Development Libraries Projects - Build a Random Quote Machine

Tell us what’s happening:
I don’t know what is wrong in the code, but I cannot figure out 2 things:
1- in CSS the grid layout, even though I set the grid-template-areas correctly and linked all the elements, it still doesn’t follow what I wrote. I imagined some form of conflicts, but inspect mode in Firefox doesn’t show me anything suspicious.

2- Even though, I don’t know why the challenges are passed in codepen, when I click the button, the app doesn’t update with new quotes, leaving me wondering what is wrong with the code. I used jquery, as I found it simplier. Should I have used React?

Has everyone an explanation of such ironical behaviours?
In any case, if you find other things worth pointing out, I am all ears!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0

Challenge: Front End Development Libraries Projects - Build a Random Quote Machine

Link to the challenge:

When you click the button the only thing that happens is that getRandomQuote is called:

function getRandomQuote() 
{
  return quotes[Math.floor(Math.random()*quotes.length)]
}

This function returns an object. That’s it. Nothing else. I think you probably need to do something to display the information in that object on the page.

I think you have to escape the numbers when using numbers for areas. I’m guessing because it accepts syntax like 1 / 2 / 2 / 4

https://drafts.csswg.org/css-grid/#grid-template-areas-property

Note: These rules can produce cell names that do not match the <ident> syntax, such as "1st 2nd 3rd", which requires escaping when referencing those areas by name in other properties, like grid-row: \31st; to reference the area named 1st.


I would suggest using more descriptive names anyway.

function getRandomQuote()
{ let newRand;
randQuo[Math.floor(Math.random()*quotes.length)] = newRand;
return newRand;

};
$(document).ready(function()
{
$(‘#new-quote’).click(function(){
$(this).text(getRandomQuote);});
$(‘#text’).html(quotes.quote)

$(‘#author’).html(quotes.author)

});

I’ve updated javascript with what I thought should do, and still nothing. What am i missing here?
I thought that store the newly random quote in a newRandom quote and then call the function when connecting to the dom would do the trick, but it is still lifeless!

Thanks a lot for that! I didn’t honestly think about the double meaning of numbers, used both as strings and as numbers!
Now it function properly!

I’m looking at your current code in your codepen. If this is not up to date, please make sure that it is whenever you ask us to look at your code.

$("#new-quote").click(function () {
    $("#new-quote").getRandomQuote().text();
});

You are trying to call getRandomQuote as a jquery method. That is not going to work. getRandomQuote is a standalone function you defined so that’s how you would call it. It returns an object. So you need to save that object in a temp variable and them use the information in that object to update the quote and author on the page. Look at how you did that when the page first loads:

$('#text').html(quotes.quote)
$('#author').html(quotes.author)

You see how you are attempting to put the text directly in each element using the html method. You also need to do this when you click the New Quote button.

By the way, the above code has issues. The variable quotes is an array, so you need to access it using array syntax. You can’t access it using dot notation.

1 Like

Thanks for your support!
At the end, I just had to put randQuo.length between brackets!!!
May I ask a couple of things regarding the syntax?
in the solution for the exercise, I noticed that in the function go the call for the random quote is called twice. May I ask why?

for reference: function go() {
// Triggers genRandQuote when New Quote button is clicked
$(“#new-quote”).click(function() {
genRandQuote();
});

$(“#tweet-quote”).click(function() {

});

// Generate a random quote when window is loaded initially
genRandQuote();
}

2- As I have tried to tinker a bit, I noticed how the function does not work if the two “.html” methods are not inside the getRandomQuote function. is that because newRand is a local declared variable? so placing them outside the function would lose the scope?

3- Finally, I wonder how the code work without issues on Codepen, but when I load the html from VSCode to mozilla it does not! I probably lost two hours today trying to come up with a solution for the problem, just to realise that in Codepen it actually works!
Usually I used that setup (write in VSC then load the page to Firefox) for my previous static works, but here with javascript, it remains static. Do you have any suggestions for that? Should I use Codepen for my future javascript projects? Actually, it seems strange to me…

here it is twice in the same function go. At first it is invoked when clicking the button, but for the second calling, after tweet-quote, I don’t know. In my view it is not related to tweet-quote since the function is closed.

I know, and that’s why I was wondering on the meaning of this second call I found in the solutions.

ok, I got it! Thanks
Are you able to redirect me to find the answers for the other two questions of mine?
2- As I have tried to tinker a bit, I noticed how the function does not work if the two “.html” methods are not inside the getRandomQuote function. is that because newRand is a local declared variable? so placing them outside the function would lose the scope?

3- Finally, I wonder how the code work without issues on Codepen, but when I load the html from VSCode to mozilla it does not! I probably lost two hours today trying to come up with a solution for the problem, just to realise that in Codepen it actually works!
Usually I used that setup (write in VSC then load the page to Firefox) for my previous static works, but here with javascript, it remains static. Do you have any suggestions for that? Should I use Codepen for my future javascript projects? Actually, it seems strange to me…

Thanks again for your support!

You have this in the Codepen

<link rel="scripts" href="./scripts.js">

You want a script element instead.

<script src="scripts.js"></script>

Also, you should be mindful of when the script code is loaded when doing DOM manipulation. The elements on the page need to be available to the script. If you query for elements before the page has loaded it will fail.

You can just put the script element after the page content, so right before the closing </body> tag, but there are other ways of dealing with it. The jQuery $(document).ready() waits for the DOM (it is like wrapping the code in a DOMContentLoaded event) but you can also use the defer attribute on the script element, or make it a module type="module".

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

1 Like

Thank you as well! Now it works! I’ll be more mindful in the future regarding where to put scripts.

Thanks again for clarifying all my doubts. Hope next project will have less issues of this kind! I learned a lot through the forum and I’m glad of that!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.