Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Yassine Qoraiche
Yassine Qoraiche
3,237 Points

The treehouse achievements circle with CSS

Hello,

I'm wondering how I can create the treehouse achievements circle (i don't know what's the exact name of it) with CSS or Javascript

Thanks

1 Answer

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

I know somewhere in the forum archives someone posted a project they did that creates this graphic and also lists achievements. If I find it I'll come back and post it, but I thought I'd at least let you know it's there so you might look for it yourself.

In the meantime, here's a post about a different Treehouse Achievement Widget. It's not the "circle" one but you might find it interesting.

Yassine Qoraiche
Yassine Qoraiche
3,237 Points

Thank you

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

Hey I found it. It's from nearly 5 years ago! Treehouse Badges Website Widget. There's actually several different projects if you look through the answers. The "circle" one is posted on codepen.

It also has 24 upvotes .. the most I've ever seen.

Now I need to find the last answer I gave about it, because I posted an update for it that adds the colors for all the new categories.

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

OK, I also found my update. Just add this to the codepen starting at line 119:

  colors['C#'] = '#9e4d83'; // added here down 17.09.22.sp
  colors['Databases'] = '#eb7728';
  colors['Game Development'] = '#20898c';
  colors['Data Analysis'] = '#645a7e';
  colors['Security'] = '#C66C5D';
  colors['Go'] = '#375eab';
  colors['APIs'] = '#993c50';
  colors['Virtual Reality'] = '#95D26C';
  colors['Quality Assurance'] = '#80438E';