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

JavaScript
1

Tell us what’s happening:

Please Help, my code don’t pass 3 9 34 tests, thank you!

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>
    <header>
        <h1>Markdown to HTML Converter</h1>
        <button id="view-toggle">Cambiar Vista</button>
    </header>

    <div id="container" class="view-columns">
        <div class="container">
            <h2>Markdown Input</h2>
            <textarea id="markdown-input" placeholder="Escribe aquí... # Título, **Negrita**..."></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>



const markdownInputEl = document.getElementById("markdown-input");
const htmlOutputEl = document.getElementById("html-output");
const previewEl = document.getElementById("preview");
const toggleBtn = document.getElementById("view-toggle");
const container = document.getElementById("container");


function convertMarkdown() {
    const input = markdownInputEl.value;
    if (!input) return "";
    
    let lines = input.split('\n');
    let processedLines = lines.map(line => {


        if (/^\s*###\s/.test(line)) {
            const content = line.replace(/^\s*###\s+/, '');
            return `<h3>${content}</h3>`;
        }
        if (/^\s*##\s/.test(line)) {
            const content = line.replace(/^\s*##\s+/, '');
            return `<h2>${content}</h2>`;
        }
        if (/^\s*#\s/.test(line)) {
            const content = line.replace(/^\s*#\s+/, '');
            return `<h1>${content}</h1>`;
        }
        
        if (/^\s*>\s/.test(line)) {
            const content = line.replace(/^\s*>\s+/, '');
            return `<blockquote>${content}</blockquote>`;
        }
        

        if (!line.trim()) return "";
        

        return line.trim();
    });
    
    let html = processedLines.join('');
    

    html = html.replace(/!\[([^\]]*)\]\(([^)]*)\)/g, '<img alt="$1" src="$2">');
    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    html = html.replace(/__(.+?)__/g, '<strong>$1</strong>');
    html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
    html = html.replace(/_(.+?)_/g, '<em>$1</em>');
    
    return html;
}

function updateAll() {
    const finalHtml = convertMarkdown();
    htmlOutputEl.textContent = finalHtml;
    previewEl.innerHTML = finalHtml;
}

function handleResponsiveView() {
    if (window.innerWidth < 700) {
        container.classList.remove("view-columns");
        container.classList.add("view-scroll");
    } else {
        container.classList.remove("view-scroll");
        container.classList.add("view-columns");
    }
}

markdownInputEl.addEventListener("input", updateAll);
toggleBtn.addEventListener("click", () => {
    container.classList.toggle("view-columns");
    container.classList.toggle("view-scroll");
});
window.addEventListener("resize", handleResponsiveView);

handleResponsiveView();
updateAll();

Your browser information:

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

Challenge Information:

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

2

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

3

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