Front End Development Libraries Projects - Build a Random Quote Machine

JavaScript
1

I am a bit confused about some things:

  1. Because of the codepen setup with three separate (HTML, CSS, JS) editing windows, I am not sure where the instructions for text presentation should be.
  2. My event listeners is working for click, which means clicking anywhere on the page, but is only working on 5 of the 6 elements in terms of onclick (clicking the button). Once I get the button working, I hope I am able to turn of the click.
  3. I am also unable to present the text of the quote and in place have the {this.state.quote} showing.

My code is at https://codepen.io/tony_the_tiger-the-typescripter/pen/jOxrOBW?editors=1111

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

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

Link to the challenge:

2

JSX isn’t HTML, it is JavaScript (well an extension of it). All JSX should be in the JS file.

3

so how do I communicate that I want the text in the quote box if I remove the JSX ({this.state.quote})?

4

The JSX should be in the React code, not the HTML.

In a React single-page app the HTML is pretty much empty and all the page content is added in the React code (in the JS). You really just need one element in the HTML which is the mount point for the React app and a script element for the React code.

I think you might want to go through some more React tutorials if this part of React isn’t clear. Or read the React docs if you just go through them it explains this as well.

As an aside, I would recommend using Stackblitz or CodeSandbox for React.

5

I think I’ll head to CodeAcademy.com and/or YouTube to try to get a different perspective and a better understanding.

6

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