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

JavaScript
1

Tell us what’s happening:

why the output of the function convertMarkdown is not matching even if its working!?

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 */
* {
     box-sizing: border-box;
}
 body {
     font-family: Arial, sans-serif;
     padding: 20px;
     text-align:center;
}
 #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.getElementById('markdown-input');
const rawHtmlOutput = document.getElementById('html-output');
const preview = document.getElementById('preview');

function convertMarkdown(text) {
    const heading1 = /^\s*#\s(.+)/gm;
    const heading2 = /^\s*##\s(.+)/gm;
    const heading3 = /^\s*###\s(.+)/gm;
    const bold = /\*\*([^\*]+)\*\*/g;
    const emp = /\*([^\*]+)\*/g;
    const img = /!\[(.*?)\]\((.*?)\)/g;
    const link = /\[(.*?)\]\((.*?)\)/g;
    const quote = />\s(.+)/g;

    let converted = text
        .replaceAll(heading1, '<h1>$1</h1>')
        .replaceAll(heading2, '<h2>$1</h2>')
        .replaceAll(heading3, '<h3>$1</h3>')
        .replaceAll(bold, '<strong>$1</strong>')
        .replaceAll(emp, '<em>$1</em>')
        .replaceAll(img, '<img alt="$1" src="$2">')
        .replaceAll(link, '<a href="$2">$1</a>')
        .replaceAll(quote, '<blockquote>$1</blockquote>');
console.log(converted)
    return converted;
}

markdownInput.addEventListener('input', (event) => {
    const rawText = event.target.value;
    const convertedHTML = convertMarkdown(rawText);

    
    rawHtmlOutput.textContent = convertedHTML;

    
    preview.innerHTML = convertedHTML;
});

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Challenge Information:

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

2

If you console.log() the tests, you will see that many of them fail. For example, all of the tests with two lines of markup fail.

3

Please review User Story #1

  1. You should have a function named convertMarkdown that takes no parameters.
1 Like