Build a Markdown to HTML Converter - Build a Markdown to HTML Converter - Ambiguous tests

JavaScript
1

Tell us what’s happening:

The following tests are failing.

Tests 2, 5, 6, 7, 10, 11, 12, 15, 16, 17, 20, 23, 24, 27, 31, 32, 35, 38, 39, 42, 43, 46, 47, and 48.

Although visually, everything looks good.

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: styles.css */


/* file: script.js */
const mdInputEl = document.querySelector('#markdown-input');
// console.log(mdInputEl);

const htmlOutputEl = document.querySelector('#html-output');
// console.log(htmlOutputEl)

const htmlPreviewEl = document.querySelector('#preview');
// console.log(htmlPreviewEl);

let mdInputVal = "";
mdInputEl.addEventListener('input', (ev) => {
  mdInputVal = ev.currentTarget.value;
  // console.debug('mdInputVal', mdInputVal);
  
  const htmlCode = convertMarkdown();
  htmlOutputEl.textContent = htmlCode;
  htmlPreviewEl.innerHTML = htmlCode;
});


function convertMarkdown() {
  const reHeadings = /^\s*(#{1,6})\s(.*)/;

  const reQuote = /^\s*>\s(.*)/;

  const reBold = /([*_]{2})(.+)\1/g;

  const reItalic = /([*_])(.+)\1/g;

  const reImg = /!\[(?<altText>.*?)\]\((?<imgSrc>.*?)\)/g;

  const reLink = /\[(?<linkText>.*?)\]\((?<linkUrl>.*?)\)/g;

  const lines = mdInputVal.split(/(\r?\n)/);

  const htmlCodes = lines.map(line => {
    return line
      .replaceAll(reBold, (_, $1, $2) => {
        if (!$2) return '';
        return `<strong>${$2}</strong>`;
      })
      .replaceAll(reItalic, (_, $1, $2) => {
        if (!$2) return '';
        return `<em>${$2}</em>`;
      })
      .replaceAll(reImg, (_, altText, imgSrc) => {
        return `<img src="${imgSrc}" alt="${altText}">`;
      })
      .replaceAll(reLink, (_, linkText, linkUrl) => {
        return `<a href="${linkUrl}">${linkText}</a>`;
      })
  }).map(line => {
    const heading = line.match(reHeadings);
    if (heading) {
      const headingSize = heading[1].length;
      return `<h${headingSize}>${heading[2].trim()}</h${headingSize}>`;
    }

    const quote = line.match(reQuote);
    if (quote) {
      return `<blockquote>${quote[1]}</blockquote>`
    }

    return line.trim();
  });

  console.debug('htmlCodes', htmlCodes);

  let pStart = false;
  let contBlankLines = 0;

  const htmlCode = htmlCodes.join('');
  // console.info('htmlCode', htmlCode);

  return htmlCode;
}

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

That’s a lot of tests. What debugging have you tried?

3

E.g. Test 2.

When the value of #markdown-input is # title 1, convertMarkdown() should return <h1>title 1</h1>.

Just looking at the result, the output is as expected but test not passing.

image
image609×773 18.9 KB

4

I’m suspicious of your use of global variables.

I assume the tests work by manually setting the contents of the element and running your function, so any extra code you have to hide information into a global variable probably doesn’t run during the tests.

1 Like
5

It does appear to work correctly, however to add to @JeremyLT 's comment:

If I put this test at the end of your code

const input = document.querySelector("#markdown-input");
input.value = "# title 1";
console.log(convertMarkdown())

No output is logged.

6

I agree with Jeremy. Try removing the global mdInputVal and setting it inside convertMarkdown(). Your code should then pass the tests.

1 Like
7

Thanks, I moved the mdInputVal inside the convertMarkdown function.

function convertMarkdown() {
  const mdInputVal = document.querySelector('#markdown-input').value;
  // console.debug('mdInputVal', mdInputVal);
  ...
}

All tests passed. Submitted.

1 Like