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

JavaScript
1

Tell us what’s happening:

For tests 2, 3, and 4 (where markdown-input = # title 1), tests 3 and 4 pass, and I added a console.log of the returned value which appears correct, but test 2 is failing. I’ve read many of the forum posts and don’t see the same issue discussed. Any guidance will be appreciated, as I’m sure this issue will apply in other tests as well.

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.getElementById("markdown-input");

function convertMarkdown(markdown) {
  markdown = markdown.replace(/^(# ?)(.*)/gm, "<h1>$2</h1>").replace(/^(## ?)(.*)/gm, "<h2>$2</h2>").replace(/^(### ?)(.*)/gm, "<h3>$2</h3>").replace(/(\*\*|__)(.*?)\1/gm, "<strong>$2</strong>").replace(/(\*|_)(.*?)\1/gm, "<em>$2</em>").replace(/!\[([^\]]*)\]\(([^)]+)\)/gm, '<img alt="$1" src="$2">').replace(/\[([^\]]+)\]\(([^)]+)\)/gm, '<a href="$2">$1</a>').replace(/^[\s]*> ?(.*)/gm, "<blockquote>$1</blockquote>");

  return markdown
}

markdownInput.addEventListener("input", function() {
  const markdown = this.value;
  const rawHTML = convertMarkdown(markdown);
  console.log(`rawHTML: ${rawHTML}`);
  document.getElementById("html-output").textContent = rawHTML;
  document.getElementById("preview").innerHTML = rawHTML;
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15 Ddg/26.2

Challenge Information:

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

2

please read user story 1 again

3

Thanks. It’s always a case of ignoring a detail like that!