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

JavaScript
1

Tell us what’s happening:

Hello !
I tried each individual tests and always get it right in the output and preview HTML.
Not sure why it does not pass.
I also tried to appendChild to preview but didn’t fix it.
I think it might come from my regex definitions…
Thanks for the help!

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>
</body>
<script src="script.js"></script>
</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 */
//Markdown to HTML conversions
const mdToHTML = [
  {md: /^###\s(?<h3>.+)/igm, html: "<h3>$<h3></h3>"},
  {md: /^##\s(?<h2>.+)/igm, html: "<h2>$<h2></h2>"},
  {md: /^#\s(?<h1>.+)/igm, html: "<h1>$<h1></h1>"},
  {md: /(\*\*|__)(?<strong>.+)(\*\*|__)/igm, html: "<strong>$<strong></strong>"},
  {md: /(\*|_)(?<italic>.+)(\*|_)/igm, html: "<em>$<italic></em>"},
  {md: /!\[(?<altText>.+)\]\((?<imgURL>.+)\)/igm, html: '<img src="$<imgURL>" alt="$<altText>">'},
  {md: /\[(?<linkText>.+)\]\((?<linkURL>.+)\)/igm, html: '<a href="$<linkURL>">$<linkText></a>'},
  {md: /^>\s(?<quote>.+)/igm, html: "<blockquote>$<quote></blockquote>"}
]

const mdInput = document.getElementById("markdown-input");
const output = document.getElementById("html-output");
const preview = document.getElementById("preview");

mdInput.addEventListener("change", () => convertMarkdown());

function convertMarkdown() {
  const mdText = mdInput.value.split("\n");
  let newArr = mdText.map((line) => {
    mdToHTML.forEach(({md, html}) => {
    line = line.replace(md, html);
    });
  return line;
  })
  let newInput = newArr.join("\n");
  // Updates the HTML output and preview 
  output.textContent = newInput;
  preview.innerHTML = newInput;
  return newInput;
} 
  
  
/*
TEST TEXT TO COPY
# heading1
## heading2
### heading3  
**bold text**
*italic text*
![alt-text](image-source)
[link text](URL)
> quote
*/

Your browser information:

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

Challenge Information:

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

2

which test are you working on fixing?
(you should pick one test and fix it, but I can’t tell from your question which one you’re trying to work on or ask about)

3

Try using the input event instead of change on your textarea. The FCC tests usually check while typing, so change may not trigger in time.

Double check your regex patterns sometimes using .+? instead of .+ makes them less greedy and helps the tests match correctly.

That should get you closer to passing🙏

4

@FilipposTechGR Thanks a lot! It worked when I changed “change” for “input” in the event listener.

I also tried before with .+ but it didn’t change anything…

@hbar1st Thanks also for your answer. For info, the tests that did not pas were the replaced string was to be added to the output and preview (3, 4, 8, 9…).