I’ve been making the 25 + 5 clock project but my app is not rendering on codepen.
Here’s the link to pen: codepan
I’d appreciate any help.
Thank you,
@tailwind base;
@tailwind components;
@tailwind utilities;
I don’t know that CP can use tailwind.
import React, {useState, useEffect, useRef} from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { HiPlus, HiMinus } from 'https://cdn.skypack.dev/react-icons@4.1.0/hi2';
import { HiOutlinePause, HiOutlinePlay } from 'https://cdn.skypack.dev/react-icons@4.1.0/hi2';
import { BiReset } from 'https://cdn.skypack.dev/react-icons@4.1.0/bi';
That’s not normally how you import in CP - you use the Settings → JS to set up the files you want to import and then you can just access the modules in the JS code.
1 Like
We can use tailwind in CP. I’ve used it in my calculator app.
That’s not normally how you import in CP
I’ve now made the changes and imported from settings but still the app is not rendering.
Start with the simplest app you can render and slowly add things to it until you find what the issue is. Or you can comment stuff out until it starts to work.
Be sure to read the browser console for errors.
Honesty, just don’t use Codepen for this. Use StackBlitz or CodeSandbox.
FCC suggests using CodePen for all of the frontend projects:
You can build your project by using this CodePen template and clicking
Saveto create your own pen. Or you can use this CDN link to run the tests in any environment you like:https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
I completed all of the frontend projects using CodePen, without any issues.
I don’t know what’s wrong with the OP’s pen but I’ll see if I can figure out why it’s not rendering.
It is not a recommendation, just a suggestion. If possible, we wouldn’t suggest anything to avoid promoting any specific sites. That sentence is also literally from before Stackblitz or CodeSandbox even existed and just hasn’t been updated (and likely won’t be).
Codepen is not at all good for frontend frameworks and libraries. It completely lacks a proper development environment (files/folder, proper shell/console, direct access to npm, and proper dependencies support). Using Codepen for this type of project is only going to make the process less than ideal.
Again, my recommendation stands. Literally, every doc site for frontend frameworks and libraries will have live examples running on Stackblitz or CodeSandbox. They are pretty much the de facto online environments for this type of code.
@urfrenznimubro I’m sure it is something stupid with Codepen and the dependencies and how they are brought in and used that wouldn’t be an issue on the before-mentioned sites. I will however say, you have other syntax issues as well, such as using React hooks that are not getting imported (or used off of the global object). As already pointed out use the browser console and look at the errors.
When you can, do it the way you did it before with the packages and not the scripts in the settings. The scripts in the settings are an older way of doing it and often are more appropriate for plain HTML/CSS/JS pages. As far as I know, they are the equivalent of linking to the scripts in the HTML.
Thanks for the reply. I’m now testing the project locally (from vscode and browser).
I’d probably share link to github site or somthing like that to share the complete project.
I understand this. Perhaps FCC should update their suggestions to more suitable alternatives then, if CodePen really isn’t the best way to go these days? I’ve been working through the whole curriculum now for a while and use the suggested resources because I don’t know any better.
There’s a problem with your imports. I removed this and it rendered fine:
import { HiOutlinePause, HiOutlinePlay, HiPlus, HiMinus } from 'https://cdn.skypack.dev/react-icons@4.1.0/hi2';
import { BiReset } from 'https://cdn.skypack.dev/react-icons@4.1.0/bi';
I was getting a 404 error from the skypack CDN.
I wouldn’t mind a link to a news article that went over some of the different options.
Personally, I’d suggest doing all the projects locally using Git and GitHub and deploying them to a site like Netlify or Vercel. That is really the best option and is closest to how you would do it professionally.
I totally get what you’re saying though I’m largely unfamiliar with your suggestions.
My issue is that - as a novice coder who is working through the curriculum top to bottom - when I got to the Frontend Libraries certification I was still very much flying blind, having only just got half a grip on the basics of Javascript. I knew very little about GitHub or any of these other platforms/environments you suggest. There’s such a vast ocean of stuff that it’s pretty daunting, so using something like CodePen felt just about manageable at that point. It’s a very steep learning curve for someone who didn’t even know what an HTML tag was when they first stumbled upon FCC not so long ago. Learning about npm, dependencies and whatnot was waay too much for my tiny brain when I was also struggling to get my head around the basics of React and Redux.
Having said that, I created five React projects for the Frontend certification and learned a lot in the process, but then looked at the OP’s code here for the same project which I had created and couldn’t make head nor tail of it, because it was written in a completely different format to that which I was taught in the curriculum. I was taught to create React components by extending React.Component, creating parent and child components this way and methods which I would then bind in the constructor, using states in a completely different way etc.
Now, I’ve completed a further three certifications and I feel like I have a basic understanding of how to use Replit to create simple full-stack apps. I still have no idea of how GitHub really works or Netlify or Vercel or any of the others you mentioned because I have my hands full just covering the curriculum as is.
For the responsive web design part of the curriculum, it isn’t really expected of you and you can use Codepen for the projects without it imposing any major limitations as they are such simple pages. I would however still suggest not using Codepen if you can.
When you get to the frontend libraries part of the curriculum that is just the harsh reality of this field of study and work. Yes, it can be confusing and a lot to learn but it is unavoidable if you want to do it professionally.
The freeCodeCamp React curriculum is just badly out of date. There isn’t really anything we can do about it. But at this point, it should be seen as a legacy curriculum.
As for teaching a proper workflow, that unfortunately isn’t really possible as part of the curriculum scope. We do have plenty of news articles and Youtube tutorials about the subject. It is also expected that the camper learns on their own as needed.
Don’t get me wrong, I agree it is a lot to learn and can be both confusing, frustrating, and a daunting task. Just take it bit by bit, day by day, and try not to stress too much about it.
Edit: By the way, I highly suggest using the open-source nature of the freeCodeCamp platform to learn about some of the workflows. We have contribution documentation and some very friendly developers. The freeCodeCamp GitHub repo is a great place to take your first steps into Git and GitHub and do open source contributions.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.