Skip to content

Sheffield | 26-ITP-jan | Richard Frimpong | Sprint 3 | Codewars API Project#27

Open
Richiealx wants to merge 1 commit intoCodeYourFuture:mainfrom
Richiealx:feature/codewars-api
Open

Sheffield | 26-ITP-jan | Richard Frimpong | Sprint 3 | Codewars API Project#27
Richiealx wants to merge 1 commit intoCodeYourFuture:mainfrom
Richiealx:feature/codewars-api

Conversation

@Richiealx
Copy link
Copy Markdown

Learners, PR Template

Self checklist

  • I have titled my PR correctly
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

What are Web Components?

Web Components are reusable custom HTML elements that encapsulate structure, styling, and behaviour. They allow developers to create modular and reusable UI components that can be used across different parts of an application.

Changelist

  • Updated the existing codewars-badge component to use my Codewars username
  • Extended the badge to display:
    • Rank
    • Score
    • Honor
    • Completed kata
  • Created a new codewars-stats component to display:
    • Total completed kata
    • Total authored kata
    • Leaderboard position
  • Added loading states before data is fetched
  • Added error handling for failed API requests
  • Improved layout and readability of the page

Testing

  • Tested locally using a Python HTTP server
  • Verified both components render correctly
  • Checked browser console for errors (none found)
  • Confirmed API data loads successfully

Reflection

This project helped me understand how web components work in practice and how they can be used to build reusable UI elements. I also improved my understanding of working with APIs, handling asynchronous data, and structuring front-end code in a clean and modular way.

@netlify
Copy link
Copy Markdown

netlify bot commented Apr 14, 2026

Deploy Preview for cyf-codewars-projects ready!

Name Link
🔨 Latest commit 056ae19
🔍 Latest deploy log https://app.netlify.com/projects/cyf-codewars-projects/deploys/69ded01d01f8570008f3f1d4
😎 Deploy Preview https://deploy-preview-27--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