Error in all Certificate Project sample CodePens

I have 3rd Party cookies disabled on my Browser, and almost all of Certificate
Project sample CodePens are broken for me.

Eg: https://codepen.io/freeCodeCamp/full/KaNGNR

This is all that I see:

This is caused by trying to access localStorage.setItem at the top of the script.
If I comment out the line: localStorage.setItem('example_project', 'D3: Tree Map');, the pen works fine.

I think that accessing the localStorage is not needed, and that line should be removed.
Alternatively, the line can be moved to the end of the script tag or wrapped in a try/catch block so that even if it fails then the rest of the script can execute properly.

This is an issue that affects all sample freeCodeCamp CodePens, but it is not noticed on projects that do not use JavaScript.

If there is a GitHub repository where I can submit a PR then I will be happy to help.

You can submit an issue.

Done!

I went through the repository, but could not find the sample CodePen code anywhere.

Is there somewhere that I can submit a PR?

No there is not. The Codepen projects are owned by FCC and only core team members have access to them to make changes. Creating the issue will get it on the radar.

Edit: localStorage the code is used to set the correct test to use, and it locks it so you can’t switch tests.

Having to edit all the Codepens to fix this seems like a lot of work considering blocking third-party cookies is known to break sites. It warns you right in the option (Chrome: “Some sites may not work properly.”).

The testable projects are in this repo

1 Like

I had forgotten that Codepen code was actually under version control.

Yes, but that doesn’t mean that we stop trying to make the code work, especially when the fix is so simple, and can probably be done with a regex search and replace.

Then what is the const projectName for?

I shall submit a PR with the fix.

I would hold off on the PR until the issue is reviewed by others and a solution is discussed an agreed upon.

Both lines of code are used.

https://github.com/freeCodeCamp/testable-projects-fcc/blob/master/src/index.js

Here are the line numbers to look at:

L122
L150
L196
L282

Also, just to be clear.

Even if you change all the script files in the projects on Github, all the Codepens has to be manually edited by hand. The pens are not pulled/imported from Github to Codepen.

That is one reason switching to a different platform that lets you import from a Github repo would be nice.

Yes, both lines of code are used in the testing suite, but the projects in the repo DO NOT use localStorage.

I think that the CodePens are not up to date with the repository.