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

JavaScript
1

Tell us what’s happening:

I am getting the correct changes to the HTML Preview and on the RAW HTML output. It is matching the output from the example one too so I don’t know if I am missing something internal. I’ve noticed #6 has as the return. So is this were I am getting an incorrect result?. I assume its to do with my log showing its two seperate lines and not one sentance result.

Your code so far

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


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


const markdownInput = document.getElementById('markdown-input');
const preview = document.getElementById('preview');
const htmlOutput = document.getElementById('html-output');

function convertMarkdown(string){
  let result = string;

  const rules = [
  { pattern: /^#{3}\s(.*)/gm, replace: "<h3>$1</h3>" },
  { pattern: /^#{2}\s(.*)/gm, replace: "<h2>$1</h2>" },
  { pattern: /^#{1}\s(.*)/gm, replace: "<h1>$1</h1>" },
  { pattern: /^>\s(.*)/gm, replace: "<blockquote>$1</blockquote>" },
  { pattern: /(\*\*|__)(.*?)(\*\*|__)/g, replace: "<strong>$1</strong>" },
  { pattern: /(\*|_)(.*?)(\*|_)/g, replace: "<em>$2</em>" },
  { pattern: /!\[(.*?)\]\((.*?)\)/g, replace: '<img alt="$1" src="$2">' },
  { pattern: /\[(.*?)\]\((.*?)\)/g, replace: '<a href="$2">$1</a>' },
  ];
  
  for (const rule of rules) {
  result = result.replace(rule.pattern, rule.replace);
  }
  console.log(result);
  return result;
}

//using input to grab .value of the whole input. keydown will show <backspace> for individual keys pressed.
markdownInput.addEventListener("input", () => {
  const value = markdownInput.value;
  const output = convertMarkdown(value);

  htmlOutput.textContent = output;
  preview.innerHTML = output;
});

Your browser information:

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

Challenge Information:

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

2

Take another look at the user stories regarding parameters requirements for convertMarkdown function.

3

My god. Thank you so much for that. 4+ hours of frustration because I cannot read :sweat_smile:

removed a word added a single const and changed a 1 to a 2.

That was all that had left to do to complete the cert

Thank you again