feat(learn): create a progress indicator map

[a2937]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Closes #50412

It's a revival of this PR. #52686

[Sembauke]

Thanks for working on this @a2937,

We should centre the numbers inside the certifications.

I am not sure if I like the arrows, it might me useful to try a couple of them.

Also, arrows should be white in the dark-theme and black in the light-theme.

[a2937]

The arrows aren't exactly a character. They're an SVG as it was the only way I could make something grow and shrink on the page.

[Sembauke]

Let me know if you need any help @a2937!

[a2937]

Here's the current status.

[a2937]

I actually might need a little help making a new arrow shape, if that's alright. Though I'm fairly sure the colors are adjusted for night mode. Additionally, while centering isn't my strong suit; I hope it's closer this time.

[Sembauke]

Hey @a2937,

Sorry for keeping you waiting so long, I will check it today.

[Sembauke]

Current progress:

[a2937]

Thank you Sembauke. Those arrows look very lovely.

[naomi-lgbt]

Firefox (Ubuntu) does not have the numbers centred.

[a2937]

Yeah unfortunately I can confirm twice here. It's a possibility that it could be possible that absolute units messing things up. Or perhaps relative units aren't lining things up.

WSL 2:

Windows:

[naomi-lgbt]

Better now on the ribbons, but not on the greyed out ones.

[a2937]

Okay we finally seem good now.

[naomi-lgbt]

Out of these three, I've claimed the Machine Learning cert.

There's no visual indication here that I've done so.

[a2937]

Hmmm...what kind of indication should I give that says the camper has claimed the certification?

[naomi-lgbt]

I would hide the ribbon part on unclaimed certs, but leave the circle dark.

[a2937]

I can't hit the "I agree to freeCodeCamp's Academic Honesty Policy." button so I can claim my certifications. But I will send in my update.

I'm also not sure if I added the logic right.

[naomi-lgbt]

Awesome work on all of this!

[ahmaxed]

@a2937, thank you for the hard work here.
I think isCompleted is not being calculated probably.
Could you please take a look into it, and write test for it in a follow up pr?

[a2937]

No problem. I'll look into it and start that follow up PR soon.