Build a Random Quote Machine - Dog Quotes

Tell us what’s happening:
I’ve modified this assignment to a Random Dog Quoting Machine. I have a variable array below, and a number generator function. Then, I return my dogQuote. Not working.

To start, I just want to get this to work. I tried running it in CodePen.io. I get the follwing error:
index.js: Unexpected token, expected , (20:22)

Not sure what to do.

Your code so far

// Dog Quoting Machine

var arr1 = [ // create a const/var array with multiple dogs and dog-properties
	{
		"id": "1",
		"dogName": "Lassie",
		"dogQuote": "That Timmy couldn't do Anything without me!",
		"dogType": "Collie",
		"Movie": "Lassie",
	},
	{
		"id": "2",
		"dogName": "Rin-Tin-Tin",
		"dogQuote": "Life at the Fort was Not Always Easy",
		"dogType": "German Shepherd",
		"Movie": "The Adventures of Rin-Tin-Tin",
	},
	{
		"id": "3",
		"dogName": Sargeant Preston",
		"dogQuote": "I would rather be going to Southern California than the Yukon."
		"dogType": "German Shepherd/Wolf",
		"Movie": "Sargeant Preston of the Yukon",
	},
	{
		"id": "4",
		"dogName": "dogName4",
		"dogQuote": "dogQuote4",
		"dogType": "dogType4",
		"Movie": "Movie4",
	},



];


function quoteRandomizer(min,max){ //use a quote Randomizer to select a dog in the array.

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var randNum = quoteRandomizer (0,4); // draw your lucky dog-Winner!
return arr1[randNum][dogQuote]; // return lucky dog-Winner's quote!

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

Your codepen link leads to its homepage. Can you give us link to your pen?

I made some minor syntax modifications. (e.g. 2-3 missing commas, and return variable placed into a function)
I am now getting a blank screen on the bottom.

When you are working purely on Javascript and doesn’t use any html/css, I suggest you use other online editors not codepen. I suggest https://repl.it.

And you are getting an error this line because dogQuote is not defined.
return arr1[randNum][dogQuote];

Why? dogQuote is defined literally in your object so you need to access via dot notation instead of brackets.

If you still want to use bracket notation, you can do this.

let dogQuote = "dogQuote";

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

Note: Backticks are not single quotes.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

What is a simple rule of thumb to remember when to use brackets vs dot notation?

Repl.it - thumbs up!!!

After running it about 5-6 times, I get this error (I changed to dot notation per your recommendation):

TypeError: Cannot read property ‘dogQuote’ of undefined
at returnDogQuote:44:23
at eval:49:1
at eval
at new Promise

Use dot notation when you are directly working with data in objects. Most of times, this is sufficient.

Use bracket notation when you are dynamically assigning or retrieving values in objects.

I want to put Dog Quoting Machine on my website here:
http://garychan.atwebpages.com/dogQuotingMachine.html

with a box that looks similar to this Random Quote Machine sample -

How do I get this javascript code to my HTML webpage?

You can reference some FCC lessons - would appreciate it!

You should do front-end library certifications. It teaches all about manipulating DOM (rendered html) with Javascript… even better React.

I’m working on React. I’m about 30% through. Will I need to re-write all my code to make it work?

Can I use the ReactDOM.render function to output my results?

On Profile Lookup Challenge (link below), I noticed they used the syntax:
return contacts[x][prop];

But prop is a passed variable, not a property directly from array. Thank you for clarification!

Challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/profile-lookup

Get a Hint:
https://guide.freecodecamp.org/certifications/javascript-algorithms-and-data-structures/basic-javascript/profile-lookup

Nope simple projects like this don’t need frameworks. That’s overkill. Go head and use what you have in there already. Interacts with DOM need something called event listeners.

Take a look at this. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Also google other sources.

Good luck!

So an Event Listener detects mouse clicks and other user events. I imagine its like mouse over a link where the link turns from blue to red.

How does this help me port my current code?

You can use event listener to generate a new quote if you click on a button to get a new quote.

How do I connect this to my code? I don’t understand the mozilla documentation well enough to understand the link. Is there a better example?

That’s why I mentioned google other resources. Try this,

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

You will learn much faster and better if you research on your own :slight_smile:

See code reference below.
Learning from this video: https://www.youtube.com/watch?v=2NLgQMs2hOw
Placed code reference below into: https://repl.it.

Note: I chose React in Repl.it. >> Received following output:

Syntax error: Unexpected token (1:1)

Another option is: HTML, CSS, Javascript in Repl.it. I pasted code in. >> Received no output.

Code Reference:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=divide-width, initial-scale=1">
	<title>Simple Demo</title>
	<script src="../js/react.min.js"></script>
	<script src="../js/react-dom.min.js"></script>
	<script src="../js/browser.min.js"></script>
</head>
<body>

	<div id="example"></div>

	<script type="text/babel">
		ReactDOM.render(<h1>Bucky</h1>, document.getElementBYId('example'));

	<script>

</body>
</html>

Don’t use repl to render views with html and css.

Repl just gives you console for your Javascript, it doesn’t interpret any html or css.

Go back to codepen for this. Make sure you insert react and reactDOM as JS dependencies.