How it works?
1. HTML Structure
<input id="cwUsername" placeholder="Enter Codewars username">
<button onclick="getCWUser()">Search</button>
<div id="cwUserInfo"></div>
User enters Codewars username in the input field.
When the button is clicked it runs the JavaScript function getCWUser().
The user information will appear inside the cwUserInfo div.
2. JavaScript Code
function getCWUser(){
const username = document.getElementById("cwUsername").value
fetch(`https://www.codewars.com/api/v1/users/${username}`)
.then(response => response.json())
.then(data => {
document.getElementById("cwUserInfo").innerHTML = `
<h2>${data.username}</h2>
<p>Honor: ${data.honor}</p>
<p>Rank: ${data.ranks.overall.name}</p>
<p>Completed Challenges: ${data.codeChallenges.totalCompleted}</p>
`
})
}
JavaScript takes the username from the input field.
Then it sends a request to the Codewars API using fetch().
The API returns user data in JSON format such as honor, rank and completed challenges.
JavaScript then displays that information on the webpage.
3. API Request
https://www.codewars.com/api/v1/users/{user}
This is the Codewars API endpoint.
When we replace USERNAME with a real Codewars username the API returns information about that user.
API For CodeWars
{
"username": "some_user",
"name": "Some Person",
"honor": 544,
"clan": "some clan",
"leaderboardPosition": 134,
"skills": [
"ruby",
"c#",
".net",
"javascript",
"coffeescript",
"nodejs",
"rails"
],
"ranks": {
"overall": {
"rank": -3,
"name": "3 kyu",
"color": "blue",
"score": 2116
},
"languages": {
"javascript": {
"rank": -3,
"name": "3 kyu",
"color": "blue",
"score": 1819
},
"ruby": {
"rank": -4,
"name": "4 kyu",
"color": "blue",
"score": 1005
},
"coffeescript": {
"rank": -4,
"name": "4 kyu",
"color": "blue",
"score": 870
}
}
},
"codeChallenges": {
"totalAuthored": 3,
"totalCompleted": 230
}
}