Build a Markdown to HTML converter: Proper way to display?

JavaScript
1

Tell us what’s happening:

I’ve finally got all of my “should return” tests to pass*, but none of the “should display” tests are passing. I’ve looked at some other folks’ examples in the forum and they all do functionally the same thing I am. What’s up?

*Several of the instructions are poorly worded. They state that we should convert if the markdown character(s) are preceded by a space, but some of the tests make clear that we should NOT convert in that case, but instead if they’re preceded by a newline.

Your code so far

/* file: script.js */
const inputField = document.getElementById("markdown-input");
addEventListener("input", convertMarkdown);

function convertMarkdown() {
  const input = inputField.value;
  const output = input
    .replace(/(?:^|\n)### (.+)/g, "<h3>$1</h3>")
    .replace(/(?:^|\n)## (.+)/g, "<h2>$1</h2>")
    .replace(/(?:^|\n)# (.+)/g, "<h1>$1</h1>")
    .replace(/(\*\*|__)(.+)\1/g, "<strong>$2</strong>")
    .replace(/(\*|_)(.+)\1/g, "<em>$2</em>")
    .replace(/!\[(.+?)\]\((.+)\)/g, "<img alt=\"$1\" src=\"$2\">")
    .replace(/\[(.+?)\]\((.+)\)/g, "<a href=\"$2\">$1</a>")
    .replace(/(?:^|\n)> (.+)/g, "<blockquote>$1</blockquote>");

  document.getElementById("html-output").textContent = output;
  document.getElementById("preview").innerHTML = output;
  return output;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

Build a Markdown to HTML Converter - Build a Markdown to HTML Converter

2

Do you mean this sentence?

# characters should either be placed at the beginning of the line or be preceded by space characters.

Yeah, that looks wrong. Also for the > character.

The other markdown formatting requested instead can be both preceded by a new line or spaces.

Would you be willing to create a github issue for this?

1 Like
3

Yes, instructions #3 and #8. I was able to pass the “should return” parts of those tests with guidance from the test-fail messages, but I still have my fundamental problem.

Yes, I’ll create an issue. I’ve been wanting/needing to learn Git anyway. Here’s hoping that Git becomes part of the curriculum.

4

Issue created for the unclear instruction. But I’m still having trouble passing the “should display” tests.

5

can you please share your html too?

6

It’s unchanged from what’s provided by the exercise, other than the addition of a <script> tag.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown to HTML Converter</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Markdown to HTML Converter</h1>
    <div id="container">
        <div class="container">
            <h2>Markdown Input:</h2>
            <textarea id="markdown-input" placeholder="Enter your markdown here..."></textarea>
        </div>
        <div class="container">
            <h2>Raw HTML Output:</h2>
            <div id="html-output"></div>
        </div>
        <div class="container">
            <h2>HTML Preview:</h2>
            <div id="preview"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>
7

Boy, it would be nice if I were clever enough to go through the dev-tools and try to find the code to see what’s actually being tested for. But boy, am I ever not.

8

freeCodeCamp/curriculum/challenges/english/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md at main · freeCodeCamp/freeCodeCamp · GitHub This is what is being tested

Uh, what is this doing? what is the event added to?

9

/doh, of course it’s a simple error on my part. That one fix made all of the tests pass.

Thanks for pointing me to the tests! Even though it wouldn’t have helped me here (dangit, it should pass!), in a future exercise, I might want to dig into the tests the way I thought I should, here. I did a little reading about assert and it appears that there are several flavors of it; it might come from one of several modules. For the purpose of working out the syntax of FCC’s particular assert, can you share which module it’s coming from?

10

We use chai Assert - Chai

In this case the issue was the combination of you using a global addEventListener, usually you don’t want the event on the whole page, and the tests missing a thing where the event does not trigger eventListeners on parent elements, so I opened an issue for that:

11

Thanks! One of the things I found frustrating in trying to debug this on my own was that in the live view, all of the tests apparently worked. And, yes, I understand that in failing to attach my listener to the correct event I was adding it to the global window. I’ve often asked AI about problems that I’ve had and this was brought up in another context. I’ve often found that asking AI a lot of questions about and in conjunction with the course materials, I’m learning more than from either approach alone.