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

JavaScript
1

Tell us what’s happening:

I failed a lot of tests but I think the code is works. Why?
2. When the value of #markdown-input is # title 1, convertMarkdown() should return title 1.

  1. 6. When the value of #markdown-input is # title 1 followed by # alternate title on a new line, convertMarkdown() should return title 1alternate title.
  2. 7. When the value of #markdown-input is ## title 2, convertMarkdown() should return title 2.
  3. 10. When the value of #markdown-input is some text ## title 2, convertMarkdown() should not convert ## title 2 into an h2 element.
  4. 11. When the value of #markdown-input is ## title 2 followed by ## title 2 alt on a new line, convertMarkdown() should return title 2title 2 alt.
  5. 12. When the value of #markdown-input is ### title 3, convertMarkdown() should return title 3.
  6. 15. When the value of #markdown-input is some text ### title 3, convertMarkdown() should not convert ### title 3 into an h3 element.
  7. 16. When the value of #markdown-input is ### title 3 followed by ### third title on a new line, convertMarkdown() should return title 3third title.
  8. 17. When the value of #markdown-input is **this is bold**, convertMarkdown() should return this is bold.
  9. 20. When the value of #markdown-input is **this is bold** followed by **this is also bold** on a new line, convertMarkdown() should return this is boldthis is also bold.
  10. 23. When the value of #markdown-input is _this is bold_ followed by _this is also bold_ on a new line, convertMarkdown() should return this is boldthis is also bold.
  11. 24. When the value of #markdown-input is *this is italic*, convertMarkdown() should return this is italic.
  12. 27. When the value of #markdown-input is *this is italic* followed by *this is also italic* on a new line, convertMarkdown() should return this is italicthis is also italic.
  13. 28. When the value of #markdown-input is _this is italic_, convertMarkdown() should return this is italic.
  14. 31. When the value of #markdown-input is _this is italic_ followed by _this is also italic_ on a new line, convertMarkdown() should return this is italicthis is also italic.
  15. 32. When the value of #markdown-input is either # **title 1** or # _title 1_, convertMarkdown() should return title 1.
  16. 35. When the value of #markdown-input is ![alt-text](image-source), convertMarkdown() should return <img> (or corresponding HTML).
  17. 38. When the value of #markdown-input is ![alt-text](image-source) followed by ![alt-text-2](image-source-2) on a new line, convertMarkdown() should return <img><img> (or corresponding HTML).
  18. 39. When the value of #markdown-input is [link text](URL), convertMarkdown() should return link text.
  19. 42. When the value of #markdown-input is [link text](URL) followed by [link text 2](URL2) on a new line, convertMarkdown() should return link textlink text 2.
  20. 43. When the value of #markdown-input is > this is a quote, convertMarkdown() should return this is a quote.
  21. 46. When the value of #markdown-input is > this is a quote followed by > this is another quote on a new line, convertMarkdown() should return this is quotethis is another quote.
  22. 47. When the value of #markdown-input is some text > not a quote anymore, convertMarkdown() should not convert > not a quote anymore into a blockquote element.
  23. 48. When the value of #markdown-input is > **this is a *quote***, convertMarkdown() should return this is a quote.

Your code so far

<!-- file: index.html -->
<!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>

/* file: styles.css */
* {
     box-sizing: border-box;
}
 body {
     font-family: Arial, sans-serif;
     padding: 20px;
}
 #markdown-input {
     width: 100%;
     height: 100px;
}
 #html-output, #preview {
     height: 100px;
     display: inline-block;
     width: 100%;
     border: 1px solid #ccc;
     padding: 10px;
     margin: auto;
     white-space: pre-wrap;
     background-color: #f9f9f9;
}
 @media (min-width: 600px) {
     #markdown-input, #html-output, #preview {
         height: 200px;
         margin: 0;
    }
     #container {
         display: flex;
         justify-content: space-evenly;
         gap: 10px;
    }
}

/* file: script.js */
const markdownInput=document.querySelector("#markdown-input");
const htmlOutput=document.querySelector("#html-output");
const preview=document.querySelector("#preview");

const h1=/^#\s(.*)/gm;
const h2=/^#{2}\s(.*)/gm;
const h3=/^#{3}\s(.*)/gm;
const strong=/(\*\*|__)(.*?)\1/g;
const em=/(\*|_)(.*?)\1/g;
const img=/!\[(.*)\]\((.*)\)/g;
const a=/\[(.*)\]\((.*)\)/g;
const blockquote=/^>\s(.*)/gm;

const convertMarkdown=input=> {
  input=input.replace(blockquote,"<blockquote>$1</blockquote>");
  input=input.replace(h3,"<h3>$1</h3>");
  input=input.replace(h2,"<h2>$1</h2>");
  input=input.replace(h1,"<h1>$1</h1>");
  input=input.replace(strong,"<strong>$2</strong>");
  input=input.replace(em,"<em>$2</em>");
  input=input.replace(img,"<img alt=\"$1\" src=\"$2\">");
  input=input.replace(a,"<a href=\"$2\">$1</a>");
  return input;
}

markdownInput.addEventListener("input",()=> {
  htmlOutput.innerText=convertMarkdown(markdownInput.value);
  preview.innerHTML=convertMarkdown(markdownInput.value);
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

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

https://www.freecodecamp.org/learn/full-stack-developer/lab-markdown-to-html-converter/build-a-markdown-to-html-converter

2

Which tests are failing? What lines of code do you think should satisfy each of those tests? What debugging have you tried?

3

I updated my post and list out the tests I failed.
I put the same input as the test and I get the same output but the test consider failed

4

Please say which specific lines you think satisfy which tests.

5

For example,
2. When the value of #markdown-input is # title 1, convertMarkdown() should return <h1>title 1</h1>

input=input.replace(h1,"<h1 >$1</h1 >");
return input;

these two lines will return

7

Every single space should match the requirements

8

Please attempt to format your code in this huge reply

9

Sry, I think I face some problems to edit the post, I can’t find that edit button for now.

And I have something else to do now, so I will be continue with this when I am free.

10

Please review the first user story again.