Summary for free code camp challenges

Summary for free code camp challenges
0

#1

Is there a summary page on free code camp where I can revise all the challenges that I have completed? I know about this page: “https://www.freecodecamp.org/adroitmachine”( the page where all the completed challenges are listed). But I don’t like the functionality of that. I mean I don’t want to click on individual challenges to view their solution. I need something like a summary page where all the challenges are summarized. A summary page like that could help anyone who wants to brush up what they have learned.

regards,
your fellow camper


#2

You might want to check out https://guide.freecodecamp.org/


#3

Can you draw out or give more details on exactly what kind of information you want on this summary page? What exactly do you mean by “summarized”?


#4

@kevcomedia: thanks for sharing the link.
@RandellDawson: What I want is are the solutions to all the challenges I have completed on freecode camp( all on one page), unlike this link: “https://www.freecodecamp.org/adroitmachine" where I have to click for solutions one by one.


#5

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>

#6

@RandellDawson: Thanks a lot for the effort you have put in to writing the code. But I don’t quite know how to put your code to work. I’m’ still new to javascript this is why I had requested freecodecamp’s community developers to devise a solution for summarizing a solution page in the first place. Could you elaborate more on how to use your code for finding solutions?

with warm regards,
your fellow camper


#7

If I’m reading Randell’s code correctly you should be able to just copy the text, save as an HTML file on your local machine and just open it by double clicking on the file in your browser.

However, first you want to make sure to replace the const fccUser = ’ ’ spot with your user name in the quotes for this to work. Otherwise it doesn’t appear any additional credentials are required.

Randell can correct me though if I’m wrong.


#8

@abalducci - You are correct. You can assign any FCC username to the fccUser variable and it will display that user’s algorithm solutions.


#9

So you were just wanting FCC to make a change to the way the solutions are accessed/displayed? In that case, we do appreciate your suggestion. Now that I have created this code, I may attempt to expand it and make a suggestion to those in control of the curriculum content of an alternate way to view the solutions. I have some other ideas which would involve a collapsed solution and once click, the solution would appear below the title. This way, the page is less cluttered with all of the solutions showing up at the same time, but still avoiding having to open a new window to see the solution quickly.


#10

@RandellDawson: that is wonderful. Thanks for taking the initiative. I’m closing this thread now. I will be waiting for summary page to arrive. Thanks a lot!!!


#11

It could be a long wait, as that is not a major priority of mine right now.