Build a Quote Machine

Hi!

I recently made the quote machine on codepen and completed it. Then I decided I wanted to start working off stackblitz just because it’s closer to experiencing a real world editor.

However, when I transfer the code over, I’m getting a couple problems:

  1. I can’t get fontawesome to work. icons just won’t show up… I know it’s something to do with importing the dependency? But I’m not sure what to import. Or maybe I should use a CDN … But I can’t seem to get it to work, it tried a few things now.

  2. I get an error when I try and generate a new quote… I’ve pasted the URL below to the stackblitz editor… You’ll see that the number of clicks required before you get the error is different every time… But after 1-10 clicks you almost always get the error, it says

Error in /~/index.js (62:38)
Cannot convert undefined or null to object

And there’s nothing on that line but a closing curly bracer…
Also, this error never appeared on codepen…

It looks like you’ve got an off-by-one error when generating the random number for your index:

Math.floor(Math.random() * this.state.quotes.length) + 1;

1 Like

What the heck. That was most definitely the issue.
So weird it wasn’t making an error in code pen.

Now just to figure out this pesky fontawesome

You’d need to update your link element with the correct URL for the Font Awesome library.

Here’s one from CDN.js:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1 Like

Thank you! I just found a working CDN literally moments prior to you posting it… I had tried other CDN’s but they didn’t work. So I thought it was an issue with Stackblitz, but apparently the ones I pasted were just not in use anymore.

I’ll try and figure out the npm stuff in a bit, when I’m not such a n00b

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