Failing Random Quote Generator

JavaScript
1

Tell us what’s happening:

My code feels like a mess and I’m losing my mind trying to figure out why it wont show one of my quotes. Someone please tell me what i’m doing wrong.

Your code so far
https://codepen.io/kendallbrookbank/pen/VweOLWP

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Build a Random Quote Machine

Link to the challenge:

2

I tend to avoid jQuery but I can read it to get the gist of it. So, I’m not an expert, but in your ajax request url you have “”. So where is the ajax request requesting data from?

3

Hey Kendall,

good work so far!

You managed to:

  • add a twitter icon
  • add a quote icon
  • add a button for a new quote
  • add a footer with your name
  • add a box for the author
  • add a box for the new quote

I totally understand that you feel like losing your mind, because something doesn’t work as expected.

My suggestions:

I would start with the HTML code, because it is the content of the page:

  1. I would open a new, empty pen
  2. I would go into the old pen and have a look at every single line and write into the old HTML why I added this line, e.g. <!-- I want to see a button to get a new quote --> or <!-- I want to see a box for the name of the author -->
  3. If I’d be sure that I understand all the lines, I would take the line I feel most self-confident about and copy it over into the new pen HTML section
  4. I would do this for every line until something doesn’t work as expected
  5. I would try to understand why it doesn’t work as expected
  6. I would probably find code I don’t understand, that’s why I would not copy it over

Now, after I handled all my HTML code, I would start with the CSS:

  1. I would take the first CSS rule and copy it over and see what happens
  2. If it wouldn’t work as expected, I would read up on it
  3. I would do Step 1 until something doesn’t work as expected
  4. I would try to understand why it doesn’t work as expected

Same steps for JavaScript.

Keep us posted!

1 Like
4

okay so i completely restarted and I feel like I made it simpler now. Also that helped a lot with understanding so thank you… but a quote still wont show up lol

5

Hey Kendall,

great work,
you re-organized your code and we can use the new quote button!

My ideas:

  • currently I have to click the button once to see an initial quote; if you want to do something after the site has loaded, you can search for DOMContentLoaded
  • I think you don’t need the lines <script src="javascipt.js"></script> and <meta name="viewport" content="width=device-width, initial-scale=1">, because codepen already has this built-in
  • you use var randomNumber = Math.floor(Math.random() * quotes.length); in your code; do you understand what this does?
1 Like
6

My goal was to get it to randomly choose a quote when the button is picked so thats why I was using var randomNumber.

7

okay I think I fixed it! I used so that the quote doesn’t just show up when the button is clicked. Thank you for all of your help!

8

Hey Kendall,

awesome, great work!

Let us know if you want some additional feedback.