Skip to content

Conversation

HoussamLh
Copy link

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

## Changelist

Changes include:

  • component showing:

    • Username
    • Overall Rank
    • Total Completed Challenges
    • Honor
    • JavaScript Rank
  • component showing top 3 languages and their ranks

  • Fixed issue with username containing spaces by using encodeURIComponent

  • Fixed undefined totalScore by using totalCompleted challenges

  • Web components are reusable custom HTML elements that allow us to modularly display Codewars data.

  • This keeps the code clean and easy to maintain.

  • Tested in browser: components display correctly and fetch data from the API.

## Questions

This PR adds two web components to display Codewars data for my account "Houssam LH".

  1. Is there a better way to display multiple language scores dynamically if more languages are added in the future?
  2. Should we add styling/colors/icons to make the badge look more visually appealing?
  3. Are there any best practices for handling API errors gracefully inside web components?

- Added <codewars-badge> and <codewars-top-languages> components with fetch from API.
- Fix username encoding to handle spaces in Codewars username.
- Update badge component to display totalCompleted instead of undefined totalScore.
Copy link

netlify bot commented Aug 20, 2025

Deploy Preview for cyf-codewars-projects ready!

Name Link
🔨 Latest commit fdc5be5
🔍 Latest deploy log https://app.netlify.com/projects/cyf-codewars-projects/deploys/68a5d79359996e000847b7ec
😎 Deploy Preview https://deploy-preview-24--cyf-codewars-projects.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant