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

JavaScript
1

Tell us what’s happening:

I have so many unchecked task in here. Even though I finished all the asked scenarios. For example. in task 2
2. When the value of #markdown-input is # title 1, convertMarkdown() should return

title 1

.

result is (X) which is not right since task 3 that literally the same with task 2 is currently correct.
Not just that. A lot.

I’ll post my code snippet.

Your code so far

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


/* file: styles.css */


/* file: script.js */
const input = document.getElementById("markdown-input");
const htmlOutput = document.getElementById("html-output");
const htmlPreview = document.getElementById("preview");

const regexPatterns = [
  //headers
  { regex: /^###\s(?<header>.*$)/gm, replace: `<h3>$<header></h3>` },
  { regex: /^##\s(?<header>.*$)/gm, replace: `<h2>$<header></h2>` },
  { regex: /^#\s(?<header>.*$)/gm, replace: `<h1>$<header></h1>` },
  //bold italics
  {
    regex: /(\*\*\*|___)(?<text>.*?)\1/gm,
    replace: `<strong><em>$<text></em></strong>`,
  },
  //blockqoute bold italics
  {
    regex: /\>\s(\*\*\*|___)(?<text>.*?)\1/gm,
    replace: `<strong><em>$<text></em></strong>`,
  },
  //bold text
  { regex: /(\*\*|__)(?<bold>.*?)\1/gm, replace: `<strong>$<bold></strong>` },
  //italics
  { regex: /(\*|_)(?<italic>.*?)\1/gm, replace: `<em>$<italic></em>` },
  //image
  {
    regex: /!\[(?<alt>.*?)\]\((?<src>.*?)\)/gm,
    replace: `<img alt="$<alt>" src="$<src>"/>`,
  },
  //link anchor
  {
    regex: /\[(?<text>.*?)\]\((?<url>.*?)\)/gm,
    replace: `<a href="$<url>">$<text></a>`,
  },
  // blockqoute
  {
    regex: /^\>\s(?<qoute>.*$)/gm,
    replace: `<blockquote>$<qoute></blockquote>`,
  },
  // line breaks, optional
  { regex: /\n+$/gm, replace: "" },
  // task completion
  { regex: /\>\s\*{2}(?<task48_1>.*)\*(?<task48_2>.*)\*\*\*/gm, replace: "<blockquote><strong>$<task48_1><em>$<task48_2></em></strong></blockquote>"}
];

// TODO: Fix to match freeCodeCamp requirements in the task

const convertMarkdown = (markdown) => {
  let html = markdown;
  regexPatterns.forEach((rule) => {
    // ? ONLY FOR CHECKING WHICH REGEX CAME BACK TRUe
    // if (rule.regex.test(html)) {
    //   console.log("Matched regex:", rule.regex);
    //   console.log("Matched text:", html.match(rule.regex));
    // }
    html = html.replace(rule.regex, rule.replace);
  });

  html = html.replace(regexPatterns[10], "");
  html = html.trim();

  return html;
};

input.addEventListener("input", () => {
  const html = convertMarkdown(input.value);
  debugger;
  console.log(html);
  htmlPreview.innerHTML = html;
  htmlOutput.innerText = html;
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

Build a Markdown to HTML Converter - Build a Markdown to HTML Converter
https://www.freecodecamp.org/learn/full-stack-developer/lab-markdown-to-html-converter/build-a-markdown-to-html-converter

2

can you please share your html too?

but also please review user story 1

3 
<!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>
4

I SOLVED IT ALREADY.

if I put nothing or did nothing, litterally I am passing nothing on the function right? so by setting a default value of element.value (my element name is input) const input = document.getElementById("markdown-input"); then I am passing an actual value so I fixed everything. finally for 1 week. Just to find the answer in the github https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/25-front-end-development/lab-markdown-to-html-converter/66f55eac933ff64ce654ca74.md

5

Can I delete this thread? I don’t want anyone to spoil their progress.

6

please do not copy the solution, try to solve it yourself. User story 1 says that the convertMarkdown function should not have any parameters, in the code you posted you have one parameter and you are using it inside the function

1 Like