Code pen issues

hi
i am having weird issues with code pen .

1). When i was working on the front end projects using react . first it used to display the code in both full mode and editors mode. then it was only displaying in editors mode and the full mode used to complain about an error msg that shows
“Uncaught SyntaxError: Unexpected token <”
i contacted the support and they admitted that this is a weird problem and we will try to fix it

2). Than when i was on d3 . i had the similar problem but this time it was displaying the code in full mode only not in editors mode. i didn’t reach out for support this time as my last issue did not get resolve

3). Now 2 to 3 days back each of my react and d3 code pen stopped working for a day. after ward the d3 projects started working in both full mode and editors mode . however reactjs projects stopped working on either i am attaching a pic of my codepen dash board to show you that it was working before thats how code pen was able to take a snapshot few of my project .

.
below are the links to
drumpad
dqleqr
pomodoro
calculator

i am reaching out because this time . i reached out again the response was shocking that we cannot help you write your code . so i would really appreciate if you could take a look the code so if i do contact them again i have someone to support me or if there is any problem on my end i can fix (though i doubt it because all the codes are running locally as well).
below is another proof that my codes were working .
http://forum.freecodecamp.org/t/request-for-pomodoro-clock-review-and-help/240131/9
yoelvis was constantly reviewing my code and trying to help.

2 Likes

Hi @nataliyah123

I have seen your javascript calculator (react) and I saw another project superficially and they do not render for a simple reason. :man_facepalming:

Two things:

  1. You must type the CDN’s links carefully. You have //unpkg.com/react/umd/react.development.js but you must to be https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js (for example, that’s provided by codepen) or get in the official react page. You must fix //unpkg.com/react-dom/umd/react-dom.development.js too.
  2. You must use a transpiler to javascript read the JSX elements.

Babel is a JavaScript compiler

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

So, in codepen is very easy to enable Babel `to transpile’ the JSX elements.

image

Your renderized app:

Please, apply all those changes, and let us know if it works.

thanks @yoelvis. can you now take a look at it i made the changes

It is complaining about the cdnjs link. can you please share all the link you have used to reproduce my code. for convenience i am adding the errors i am getting

Try those CDN’s:
https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js

image

It works for me.

Source: https://reactjs.org/docs/add-react-to-a-website.html

ok the calculator is working but not the pomodoro
pomodor

Review this:
image

I get Uncaught ReferenceError: require is not defined at pen.js:226

Configure at the pen and not locally.

is there a way to go back to code we had before in codepen. i made those changes a day back and copied from the local code

leave it i will try find where the url for the alarm is

You cannot revert the pen. That I think.
Try fix your code. Upload prism-2.mp3 o replace other audio file.
Fix the accurateInterval variable.

Do not give up!

An audio file here

thanks @yoelvis . its working now . and yes i had tried using http: in the setting long time ago as far as i can remember but it didn’t work back then, but the one url i was using worked . i think they fixed something because as i told my d3 were also misbehaving but now it is working properly . big thanks again.