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

JavaScript
1

Tell us what’s happening:

The regexes are working as intended, Im even console.logging my answers to double check, preview.innerHTML IS updated in memory, but nothing is showing on the page. Help would be appreciated!

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..." ># fhfh</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 rawOutput = document.querySelector('#html-output');
const preview = document.querySelector('#preview');


function convertMarkdown() {
  const regexes = [
    /(?<=# )[\w\s]+/m, // H1
    /(?<=#{2} )[\w\s]+/m, // H2
    /(?<=#{3} )[.\s]+/m, // H3
    /[\*_]{2}[\s\w]+[\*_]{2}/gm, // bold text (strong)
    /[\*_]{1}[\s\w]*[\*_]{1}/gm, // Italic text
    /!\[([\w\s-]*)\]\(([\w\s-]*)\)/gm, // image tag
    /\[([\w\s-]*)\]\(([\w\s-]*)\)/gm, // Anchor
    /> [\w\s]+/ // blockquotes
  ]
  for (let reg of regexes) {
    if (reg.test(markdownInput.value)) {
      switch (regexes.indexOf(reg)) {

        case 0:
          rawOutput.textContent = `<h1>${markdownInput.value.match(reg)[0]}</h1>`;
          break;

        case 1:
          rawOutput.textContent = `<h2>${markdownInput.value.match(reg)}</h2>`;
          break;

        case 2:
          rawOutput.textContent = `<h3>${markdownInput.value.match(reg)}</h3>`;
          break;
        
        case 3:
          rawOutput.textContent = `<strong>${markdownInput.value.match(reg)}</strong>`;
          break;

        case 4:
          rawOutput.textContent = `<em>${markdownInput.value.match(reg)}</em>`;
          break;

        case 5:
          rawOutput.textContent = `<img alt="${markdownInput.value.match(reg)[0]}" src="${markdownInput.value.match(reg)[1]}">`;
          break;

        case 6:
          rawOutput.textContent = `<a href="${markdownInput.value.match(reg)[1]}">${markdownInput.value.match(reg)[0]}</a>`;
          break;

        case 7:
          rawOutput.textContent = `<blockquote>${markdownInput.value.match(reg)}</blockquote>`;
          break;

      }

    } else rawOutput.textContent = markdownInput.value
    

    preview.innerHTML = rawOutput.textContent
    console.log(preview.innerHTML)
  }
}

markdownInput.addEventListener('input', () => convertMarkdown() )

Your browser information:

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

Challenge Information:

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

2

Hmm, could you explain how the regexes loop is supposed to work?

3

We have an array that contains every possible Regex solution for H1, H2 Italic, etc.

Then we loop on every regex and check whether its compatible with the input, if it is we rewrite rawOutput.textContent to its respective Tag, which will represent the raw HTML output, then after the loop we assign it to preview.innerHTML. I think theres more that needs fixing still, but thats basically it.

(PS: while writing, i realized there IS much needed to be fixed. for instance we are rewriting the whole rawOutput.textContent, uncaring whether the next line contains another accepted regex for example. The switch case and loop answer IS wrong, and needs a whole rewrite. Writing this help me realize, and be rest assured Im gonna work on it!)

1 Like