Build a Markdown to HTML Converter - Correct solution but not working?

JavaScript
1

Tell us what’s happening:

I have the correct solution for bold and italic, but the steps fail when checking my code. I used the same method for the heading check and image check but those are marked as correct.

Is this a bug or am I missing something?

Your code so far

<!-- file: index.html -->


/* file: script.js */


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

yeah I’m real smart, here’s the code:

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>

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;
    }
}

JavaScript:

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

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

function convertMarkdown(){
  let userInput = markdownInput.value;

  // Heading Check
  const headingRegex = /^(#{1,6})\s+(.*)/gmi;
  const matchHeading = [...userInput.matchAll(headingRegex)];
  const headingCheck = (matchHeading[0] !== undefined) ? convertHeading(matchHeading) : "";

  function convertHeading(headingArr){
    for (const match of headingArr){
      userInput = userInput.replace(match[0], `<h${match[1].length}>${match[2]}</h${match[1].length}>`)
    }
    return userInput;
  }

  // Bold check
  const boldRegex1 = /__([^_]*)__/gmi;
  const matchBold1 = [...userInput.matchAll(boldRegex1)];

  const boldRegex2 = /\*\*([^\*]*)\*\*/gmi;
  const matchBold2 = [...userInput.matchAll(boldRegex2)];

  const boldCheck1 = (matchBold1[0] !== undefined) ? convertBold(matchBold1) : "";
  const boldCheck2 = (matchBold2[0] !== undefined) ? convertBold(matchBold2) : "";

  function convertBold(boldArr){
    for (const match of boldArr){
      userInput = userInput.replace(match[0], `<strong>${match[1]}<strong>`)
    }
    return userInput;
  }

  // Italic check
  const italicRegex1 = /_([^_]*)_/gmi;
  const matchItalic1 = [...userInput.matchAll(italicRegex1)];

  const italicRegex2 = /\*([^\*]*)\*/gmi;
  const matchItalic2 = [...userInput.matchAll(italicRegex2)];

  const italicCheck1 = (matchItalic1[0] !== undefined) ? convertItalic(matchItalic1) : "";
  const italicCheck2 = (matchItalic2[0] !== undefined) ? convertItalic(matchItalic2) : "";

  function convertItalic(italicArr){
    for (const match of italicArr){
      userInput = userInput.replace(match[0], `<em>${match[1]}<em>`)
    }
    return userInput;
  }

  // Image check
  const imageRegex = /!\[(.*)\]\((.*)\)/gmi;
  const matchImage = [...userInput.matchAll(imageRegex)];
  const imageCheck = (matchImage[0] !== undefined) ? convertImage(matchImage) : "";

  function convertImage(imageArr){
    for (const match of imageArr){
      userInput = userInput.replace(match[0], `<img alt="${match[1]}" src="${match[2]}">`)
    }
    return userInput;
  }

  return userInput;
}
3

Are you sure **this is bold** should be changed to:

<strong>this is bold<strong>

4

I hate myself and love you, thanks :sob: