Working on a challenge: help needed

francesca.giammichel · May 7, 2021, 9:42pm

hi,
I am working on the Random Quote Machine challenge.
I decided to use Jquery so I remember I had to add the CDN link in the HTML head . And since I had to use twitter icon I had to add bootstrap/fontAwesome link to get the glyphicon.
(by the way, I had a look at other projects and I haven’t seen those link/script added at all!)
Then, in the JS file I started with some simple Jquery manipulation (es hiding the

) but nothing is working and I cannot make it out

ozanbaskan · May 7, 2021, 9:44pm

Are you using codepen?

francesca.giammichel · May 7, 2021, 10:04pm

Hi, i started with codepen, then switched to Atom (i get Better indentation and have some checks on what i write) but i get same problems

On codepen i Trieste also without importing but again the js file does not give me any result in manipulating Html

ozanbaskan · May 7, 2021, 10:11pm

You can share some part of your code and check the console for some hints.

francesca.giammichel · May 8, 2021, 5:10am

sorry, i forgot to link my pen
https://codepen.io/ranran212/pen/qBrEyKg

ozanbaskan · May 8, 2021, 7:41am

You just need to go settings => JS => Add external scripts => search for jquery and add it for codepen, it works for me when I do it.

francesca.giammichel · May 8, 2021, 8:22am

oh, I was not aware about adding external scripts/links in that way.
However, i added Jquery CDN and font awesome for the twitter glyphicon but again no results
In my atom editor I manage to have at least the twitter glyphicon but again, I cannot perform Jquery not even something as simple as (for example) $(‘p’).hide()

ozanbaskan · May 8, 2021, 8:34am

For codepen, you should add the twitter glyphicon from css options.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css

I am not sure for your local work, I am pretty sure you are missing something.

ILM · May 8, 2021, 8:37am

you also don’t need babel as JS preprocessor, set the JS preprocessor to None, you need Babel if you use React

francesca.giammichel · May 8, 2021, 8:37am

i managed to add the glyphicon ( added it in the HTML head via the setting menu. Then I tried to import the cdn jquery (it is the same that you kindly provided) there, but again no results.

is there a way to reset everything?
when i open the console i get lots of warnings ( but not for my code !)

ILM · May 8, 2021, 8:39am

one of the links is cousing that, it seems, try to remove them and add them again one by one, the one malfunctioning will need to be replaces

ILM · May 8, 2021, 8:40am

ah, no sorry

this is an unexpected end of input

that function is never finished

ozanbaskan · May 8, 2021, 8:41am

You can copy your code, delete your pen and start a new one if you want, this time be sure to import everything correctly.

ozanbaskan · May 8, 2021, 8:43am

He/she is actively working on it, the code was fine when I looked at it.

francesca.giammichel · May 8, 2021, 8:44am

yes, i then added the closing for the function but no

hiding as i requested
btw, the cdn for jquery should be imported in the JS setting or in the htmlsetting?
I remember from the course that it sould be in the html head but not sure here, in the code pen
(and in my atom editor i have same problem )

ozanbaskan · May 8, 2021, 8:46am

In codepen you sould import using JS/CSS options, it is recommended way to use it and practically same as head tags.

francesca.giammichel · May 8, 2021, 8:49am

ok, i put it in JS settings
I have the console full of warning about timeout adn event listeners
My console logs instead work as expected
but again no result for Jquery operations…i am really getting mad

francesca.giammichel · May 8, 2021, 8:52am

the console log says that $ is not defined…it this might help

ozanbaskan · May 8, 2021, 8:53am

well It works for me right now,

$(document).ready(function(){
  console.log('deneme')
    $("p").hide();
})

I wrote ‘p’ istead of ‘.p’

francesca.giammichel · May 8, 2021, 8:53am

[Violation] Forced reflow while executing JavaScript took 144ms
VM1673:5 Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval’ ‘nonce-PRzLqfrHsLE=’ cpwebassets.codepen.io *.appcues.com *.buysellads.com *.carbonads.com *.carbonads.net *.filestackapi.com *.firebaseio.com *.stripe.com *.wufoo.com *.speedcurve.com wufoo.com www.google.com”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-S+X8s301GQoAcOI+8hj231fxePS+QG94YC0px7AraoQ=’), or a nonce (‘nonce-…’) is required to enable inline execution.

HTMLElement.appendChild @ VM1673:5
o @ appcues.main.9c284e64e39c3bf85b25a9fedc570e74d3f810c1.js:1
(anonymous) @ appcues.main.9c284e64e39c3bf85b25a9fedc570e74d3f810c1.js:1
n @ appcues.main.9c284e64e39c3bf85b25a9fedc570e74d3f810c1.js:1
(anonymous) @ appcues.main.9c284e64e39c3bf85b25a9fedc570e74d3f810c1.js:1
n @ appcues.main.9c284e64e39c3bf85b25a9fedc570e74d3f810c1.js:1
(anonymous) @ appcues.main.9c284e64e39c3bf85b25a9fedc570e74d3f810c1.js:1
(anonymous) @ appcues.main.9c284e64e39c3bf85b25a9fedc570e74d3f810c1.js:1
VM1673:5 Refused to execute inline script because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval’ ‘nonce-PRzLqfrHsLE=’ cpwebassets.codepen.io *.appcues.com *.buysellads.com *.carbonads.com *.carbonads.net *.filestackapi.com *.firebaseio.com *.stripe.com *.wufoo.com *.speedcurve.com wufoo.com www.google.com”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-S+X8s301GQoAcOI+8hj231fxePS+QG94YC0px7AraoQ=’), or a nonce (‘nonce-…’) is required to enable inline execution.

Topic		Replies	Views
Build a Random Quote Machine (PROBLEM) JavaScript	7	582	March 5, 2022
Random Quote Machine codepen problem JavaScript	12	1978	February 2, 2021
Front end library project	8	703	June 1, 2021
Front End Development Libraries Projects - Build a Random Quote Machine - importing external icons/resources in codepen JavaScript	10	379	May 5, 2024
How do I add jQuery to codepen?	13	12084	January 16, 2021

Working on a challenge: help needed

Related topics