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

JavaScript
1

Tell us what’s happening:

Testing everything functions accordingly. Raw output and rendered html is correct. But the tests won’t pass…
Please help, I’m losing it :slight_smile:

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 input = document.getElementById("markdown-input");
const rawOut= document.getElementById("html-output");
const preview = document.getElementById("preview");

function convertMarkdown() {
  const header = /#+ +.*/m;
  const strong = /_{2}.*_{2}|\*{2}.*\*{2}/g;
  const italic = /_*_|\**\*/g;
  const image = /!\[.*\]\(.*\)/g;
  const anchor = /(?<!!)\[.*\]\(.*\)/g;
  const quote = /(?<= *)> /g;
  const inputStr = input.value;
  const inputArr = inputToArr(inputStr);
  let htmlString = "";

  for (const line of inputArr) {
    if (header.test(line)) {
      htmlString = `<h${headerWeight(line)}>${line.substring(headerWeight(line) + 1, line.length)}</h${headerWeight(line)}>`
    } else if (strong.test(line)) {
      htmlString = `<strong>${line.trim().substring(2, line.length - 3)}</strong>`;
    } else if (italic.test(line)) {
      htmlString = `<em>${line.trim().substring(1, line.length - 2)}</em>`
    } else if (image.test(line)) {
      htmlString = `<img src="${line.trim().substring(line.indexOf("[") + 1, line.indexOf("]"))}" alt="${line.trim().substring(line.indexOf("(") + 1, line.indexOf(")"))}" >`;
    } else if (anchor.test(line)) {
      htmlString = `<a href="${line.trim().substring(line.indexOf("(") + 1, line.indexOf(")"))}">${line.trim().substring(line.indexOf("[") + 1, line.indexOf("]"))}</a>`;
    } else if (quote.test(line)) {
      htmlString = `<blockquote>${line.substring(line.indexOf(">") + 1, line.trimEnd().length)}</blockquote>`
    }
  }

  return htmlString;
}

function inputToArr(str) {
  const arr = [];
  let runner = 0;

  for (let i = 0; i < str.length; i++) {
    if (str[i] === "\n") {
      if (runner === 0) {
        arr.push(str.substring(runner, i));
        runner = i;
      } else {
        arr.push(str.substring(runner + 1, i));
        runner = i;
      }
    }
  }

  return arr;
}

function headerWeight(str) {
  let counter = 0;
  let hasHashtag = false;
  
  for (const char of str) {
    if (hasHashtag) {
      if (char === "#") {
        counter++;
      } else break;
    } else if (!hasHashtag) {
        if (char === "#") {
        hasHashtag = true;
        counter++;
      } else continue;
    }
  }
  return counter;
}

input.addEventListener("input", () => {
  console.log(convertMarkdown())
  rawOut.innerText = convertMarkdown();
  preview.innerHTML = 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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

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

2

Try logging the value of htmlString. Most of the time, nothing is returned.

Are you testing in the preview window?

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.