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

JavaScript
1

Tell us what’s happening:

okay, this is failing EVERY test, idk why, even test #1 which says “You should have a function named convertMarkdown”.
I certainly do have the function covertMarkdown in the global scope, what do i do? :))

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

const regexList = [
  {
    name: "h1",
    regex: /^ *# (.+)/gm,
    replaceWith: (match, ...args) => `<h1>${args[0]}</h1>`
  },
  {
    name: "h2",
    regex: /^ *## (.+)/gm,
    replaceWith: (match, ...args) => `<h2>${args[0]}</h2>`
  },
  {
    name: "h3",
    regex: /^ *### (.+)/gm,
    replaceWith: (match, ...args) => `<h3>${args[0]}</h3>`
  },
  {
    name: "bold",
    regex: /([*_]{2})(.+)\1/g,
    replaceWith: (match, ...args) => `<strong>${args[1]}</strong>`
  },
  {
    name: "italic",
    regex: /([*_]{1})(.+)\1/g,
    replaceWith: (match, ...args) => `<em>${args[1]}</em>`
  },
  {
    name: "image",
    regex: /!\[([^\]]*)\]\(([^\)]*)\)/g,
    replaceWith: (match, ...args) => `<img alt="${args[0]}" src="${args[1]}">`
  },
  {
    name: "link",
    regex: /\[([^\]]*)\]\(([^\)]*)\)/g,
    replaceWith: (match, ...args) => `<a href="${args[1]}">${args[0]}</a>`
  },
  {
    name: "quote",
    regex: /^ *> (.+)/gm,
    replaceWith: (match, ...args) => `<blockquote>${args[0]}</blockquote>`
  },
];

const convertMarkdown = () => {
  let str = markdownInput.value;

  regexList.forEach(({regex, replaceWith}) => {
    str = str.replace(regex, replaceWith);
  })
  console.log(str);
  return str;
};

const handleInput = () => {
  const convertedOutput = convertMarkdown()
  rawHtmlOutput.textContent = convertedOutput;
  preview.innerHTML = convertedOutput;
};

markdownInput.addEventListener("input", handleInput);

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

Challenge Information:

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

2

Did you add your script.js file in your HTML?

1 Like
3

shameful of me! i was previously working on my local setup and updated the .html and .css files in the test at that time… came back later and thought the files were still updated.

I am very sorry for this unfortunate event. :sweat_smile: the tests do pass.