I created the following rough first attempt (took about 15 minutes) to show how you could display all FCC algorithm solutions of a specific user. To display the Challenges’s code would take a little more work, so I just stuck with the algorithms at this point. I leveraged jQuery, but it could also be written using vanilla JavaScript.
The code below will pull a user’s algorithm solutions based on the username assigned to the fccUser variable. It works by retrieving the user’s profile page html and then extracting the 2nd table element’s contents which contains a series of anchor elements whose text contains the challenge title and whose href attribute contains the actual challenge code. The code iterates through the applicable anchor elements and displays the challenge title and applicable code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FCC Solutions Code Display</title>
<style>
pre,
code {
font-family: monospace, monospace;
}
pre {
background-color: #333;
overflow: auto;
}
pre>code {
display: block;
padding: 0 1rem 1rem 1rem;
word-wrap: normal;
color: white;
}
h2 {
text-decoration: underline;
}
h3 {
margin-bottom: 0;
}
</style>
</head>
<body>
<h1>My FCC Solutions</h1>
<div id="solutions"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script>
const fccUser = 'yourFCCUsername';
$.ajax({
url: `https://www.freecodecamp.org/${fccUser}`,
dataType: '',
method: 'GET',
success: data => {
const challengeGroups = $(data).find('table');
const algorithms = $(challengeGroups[1]).find('a');
$('#solutions').append('<h2>Algorithms</h2>');
$.each(algorithms, displaySolutions);
}
});
const displaySolutions = (_, solution) => {
let challengeTitle = $(solution).text();
if (challengeTitle !== 'View solution') {
let challengeCode = decodeURIComponent($(solution).attr('href').replace(`\/challenges\/${challengeTitle}?solution=`, ``));
$('#solutions').append(`
<h3>${challengeTitle}</h3>
<pre><code>${challengeCode}</code></pre>
`);
}
};
</script>
</body>
</html>