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

JavaScript
1

Tell us what’s happening:

My code fails tests 5, 10, 15, and 47, and I don’t know why. It looks like it’s working, but the tests say otherwise. I would like to ask for a hint :l.

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: script.js */
const markdownInput = document.getElementById("markdown-input");
const htmlOutput = document.getElementById("html-output");
const htmlPreview = document.getElementById("preview");

const headingOneRegex = /^#\s(.*)/gm; //Markdown: # heading 1
const headingTwoRegex = /^##\s(.*)/gm; //Markdown: ## heading 2
const headingThreeRegex = /^###\s(.*)/gm; //Markdown: ### heading 3
const boldRegex = /(\*\*|__)(.*?)\1/gm; //Markdown: **bold text** or __bold text__
const italicRegex = /(\*|_)(.*?)\1/gm; //Markdown: *italic text* or _italic text_
const imgRegex = /!\[(.*?)\]\((.*?)\)/gm; //Markdown: ![alt-text](image-source)
const linkRegex = /\[(.*?)\]\((.*?)\)/gm; //Markdown: [link text](URL)
const quoteRegex = /^> (.*)/gm; //Markdown: > quote

function convertMarkdown() {
  const userInput = markdownInput.value;
  let result = userInput;
  result = result.replaceAll(headingOneRegex, "<h1>$1</h1>");
  result = result.replaceAll(headingTwoRegex, "<h2>$1</h2>");
  result = result.replaceAll(headingThreeRegex, "<h3>$1</h3>");
  result = result.replaceAll(boldRegex, "<strong>$2</strong>");
  result = result.replaceAll(italicRegex, "<em>$2</em>");
  result = result.replaceAll(imgRegex, `<img alt="$1" src="$2">`);
  result = result.replaceAll(linkRegex, `<a href="$2">$1</a>`);
  result = result.replaceAll(quoteRegex, "<blockquote>$1</blockquote>");
  if (result === userInput) {
    htmlOutput.textContent = ""; //basically if conversion wasn't made, then don't send output
  } else {
    htmlOutput.textContent = result;
  }
  console.log(`htmlOutput: ${htmlOutput.textContent}`);
  return (htmlPreview.innerHTML = htmlOutput.textContent);
}

markdownInput.addEventListener("input", () => {
  convertMarkdown();
});


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

Your browser information:

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

Challenge Information:

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

2

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

2 Likes
3

Are you sure this meets the requirements?

1 Like
4

Thanks, this actually helped, and I passed all the tests :slightly_smiling_face: .

5

Thanks :slightly_smiling_face:. These hints + @dhess hint led me to the solutions.

1 Like