Please review my Random Quotes Machine

[Marco16168]

Stellar Quotes Machine - CodeSandbox

So, I did the first of the Front End Libraries project using React, and this taught me a couple of things…firstly, I need to review my JS first to really understand what is going on under the hood and being able to use React for more complex applications. Doing this project wasn’t difficult per se , but it became so when I started to do things that were a breeze with just HTML and CSS (the text animation was a nightmare, and I probably couldn’t do it if it wasn’t for a guy that told me how to do that on Stackoverflow).

Secondly, I now feel the urge to remake this project using only vanilla JS and DOM manipulation. I understand I would have a better grasp of the bigger picture then, am I right?

A few points about my code. I followed the project’s instructions, but I don’t think that my tweet button is quite right: it passes the test, but it just opens a blank page with the address of the sandbox and /twitter.com/intent/tweet attached to it. I am probably missing something.

The other thing is I know that sometimes clicking the ‘new quote’ button lets you see the new text for a moment: that’s because the animation starts right after the quote has been fetched from quotesArray. I will fix it when I figure how to do that.

Thanks for your time and your welcomed criticism.

[jwilkins.oboe]

Hi @Marco16168 !

I think your page looks good.

As you start to build out bigger projects you should consider creating separate child components and then importing them into your app.js file.

Just a thought to help keep things clean in your main app.js file

@Marco16168

Secondly, I now feel the urge to remake this project using only vanilla JS and DOM manipulation. I understand I would have a better grasp of the bigger picture then, am I right?

You will have 4 more chances with this certification to practice react.
So I would personally move on.

If you really want to remake it with vanilla javascript then you can but you will have plenty of react practice in the other projects.

Hope that helps!

[litlmassive]

Hi, nice work!

@Marco16168

I followed the project’s instructions, but I don’t think that my tweet button is quite right: it passes the test, but it just opens a blank page with the address of the sandbox and /twitter.com/intent/tweet attached to it. I am probably missing something.

In mine I made the href for my tweet button:

let hrefTweet =
      'https://twitter.com/intent/tweet?text="' +
      currentQuoteText +
      '" - ' +
     currentQuoteAuthor +
      '.';

I think the https:// is important for letting it know that the link is external to current site? Anyway, the above works for me and populates the new tweet with the quote and author. Hope it helps!

[Marco16168]

@jwilkins.oboe

As you start to build out bigger projects you should consider creating separate child components and then importing them into your app.js file.

Yeah, at the beginning it looked like a very simple app (and it is), only things grow fast, so designing it using separate files from the start is a good practice for sure.

@jwilkins.oboe

If you really want to remake it with vanilla javascript then you can but you will have plenty of react practice in the other projects.

It’s just that as I was going through the React and react-spring documentation, I wasn’t able to really understand all the example code…so yeah, maybe re-doing this with vanilla JS isn’t going to be that useful, but I’m taking another JS course on Udemy to fill my gaps. I’m already finding it helpful.

@litlmassive

I think the https:// is important for letting it know that the link is external to current site? Anyway, the above works for me and populates the new tweet with the quote and author. Hope it helps!

Looks like that was it! It works now, thank you.