How can I observe console.log () output when usinc codepen.
there is console tab at the left down corner
Right now I am getting the following error: “Uncaught SyntaxError: Unexpected token ‘=’
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-1251218a-3437-4b2a-db6c-4e324986c5ff:30”
However, that link is not in my code. My HTML is as follows:
<HTML lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FCC : Random Quote Machine</title>
<link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/fullpage/fullpage-1580f96ce81ff0a427cf57dda2748ce646c38efc201ae5942a29958cffa6856d.css">
<link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/global/global-13b6426431ed0f511a5f146fedda1389eb9eabcb17a1aee8bde0db5f7aa8b923.css">
<link rel="stylesheet" media="screen" href="https://cpwebassets.codepen.io/assets/packs/css/everypage-bc120a53.css">
<link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/page/page-f19203c8fe65f7537f749457302a72522949afc3526cf238841f52afebabd5fa.css">
<link rel="stylesheet" media="all" href="https://cpwebassets.codepen.io/assets/editor/editor-9ec1239896c38e8af5e2c952d80a98c0bc83d9d805bf69d553a20e8689051f73.css">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
/> <!--add font-awesome-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script><!-- Bootstrap for Codepen-->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script><!--Hamburger bar popout test module-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
</head>
<body>
<div id="quote-box">
<p id="text">
Quotes will go here.
</p>
<p id="author">
Author's name
</p>
<!-- <div class="row">
<div class="col-xs-1"> This bootstrap coding not working in codepen-->
<div class="buttons">
<a class="button" id="tweet-quote" title="Tweet this quote!" target="_blank" href="https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=%22Life%20is%20not%20measured%20by%20the%20number%20of%20breaths%20we%20take%2C%20but%20by%20the%20moments%20that%20take%20our%20breath%20away.%22%20Maya%20Angelou">
<i class="fa fa-twitter"></i>
</a>
<!-- </div>
<div class="col-xs-1"> This bootstrap coding not working in codepen-->
<a class="button" id="tumblr-quote" title="Post this quote on tumblr!" target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=quote&tags=quotes,freecodecamp&caption=Maya%20Angelou&content=Life%20is%20not%20measured%20by%20the%20number%20of%20breaths%20we%20take%2C%20but%20by%20the%20moments%20that%20take%20our%20breath%20away.&canonicalUrl=https%3A%2F%2Fwww.tumblr.com%2Fbuttons&shareSource=tumblr_share_button">
<i class="fa fa-tumblr"></i>
</a>
<!-- </div>
<div class="col-xs-8">
</div>
<div class="col-xs-2"> This bootstrap coding not working in codepen-->
<button class="button" id="new-quote" onClick={this.newQuote}>New quote</button>
<!-- </div>
</div> This bootstrap coding not working in codepen-->
</div>
<img id="tweet-quote"></img>
</div>
<div class="footer">by <a href="https://codepen.io/hezag/">hezag</a></div>
</body>
</HTML>
I am not sure where in fCC you are trying this. Can you post a link to the exercise?
I am in Front End Development Libraries Projects - Build a Random Quote Machine. I am trying to use the console to debug my program.
And please fill me in because I’m still a bit clueless, according to the exercise one way to work on this project is to use the provided codepen template, but in this case you are working on your local machine? (the errors are from the test suite?)
I think I am working in the codepen template in Google Chrome/Windows 11.
Can you post a link to your codepen?
Well it is currently a mess since this is my first time with three wndows (HTML, CSS, JS), but it is https://codepen.io/tony_the_tiger-the-typescripter/pen/jOxrOBW
I took a quick look and ran the fCC test suite. You’re doing pretty good so far. You have only 2 failed test cases.
Which one of these did you need help with?
I really only have about 6 of 12. I don’t know why it is passing me on 6-9.
that is not what I see, are you sure you are running the correct test suite?
(you have to select the one for your challenge first)
I see 10 of 12, but it is giving me credit for 4 things that are not working. It is not actually displaying quotes or authors correctly. Right now, I am trying to figure out how to get the color randomization incorporated.
Earlier you said you saw an error?
I’m trying to understand where you are and what you need help with but so far, I’m still unsure what you’re asking.
Since I am trying to get the color randomization working, I am working in the JS window. I want to use the console.log() feature to see where things are going awry. However, when I use the console button on the bottom, I am getting the following error:
“Uncaught SyntaxError: Unexpected token ‘=’
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-f602911d-9644-e1ad-7e15-706a4004e4da:30”
Everytime I run it the error changes a little bit. The part up to “Uncaught SyntaxError: Unexpected token ‘=’
at https://cdpn.io/cpe/boomboom/pen.js?key=pen.js”
is the same in each console update, but after that the numbers and letters seem random. This error is not informative to me.
Try clicking on the “Analyze Javascript” menu option.
It will complain about your function.
And it seems that your = sign is the problem (in the function definition).
What were you trying to do with the equals there?
well of course. You are using function keyword and at the same time you are using arrow function syntax. Try to use just one of two possible syntaxes
It sees function keyword first, and after that it sees = this.
It is super confused by
function randomColor = (colors) => {
oh wow, I just duplicated the post above.
nah, you were helpful. Keep going. my js is super-rusty.
I have been able to get it to say my JS has no errors now, but I still can’t see a console.log() and I am not able to click to change colors
you have typo in this one
consloe.log(colors);
Uncaught ReferenceError: consloe is not defined
this log:
console.log(randomColor);
you are logging out function without parenthesis - may be the issue, if you wanna log out call of this function