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

Tell us what’s happening:

i have an issue: 51. You should have only one script element in your HTML.

I am doing: Build a Markdown to HTML Converter.

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;
}
 #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 */
function parseInline(text) {
  // Bold: **text** or __text__
  text = text.replace(/(\*\*|__)(.+?)\1/g, '<strong>$2</strong>');

  // Italic: *text* or _text_
  text = text.replace(/(\*|_)(.+?)\1/g, '<em>$2</em>');

  // Images: ![alt](src)
  text = text.replace(/!\[(.*?)\]\((.*?)\)/g, '<img alt="$1" src="$2">');

  // Links: [text](url)
  text = text.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');

  return text;
}

function convertMarkdown() {
  const input = document.getElementById("markdown-input").value;
  const lines = input.split('\n');
  let output = '';

  lines.forEach(line => {
    const trimmed = line.trim();

    if (/^#{1,3} /.test(trimmed)) {
      const level = trimmed.match(/^#{1,3}/)[0].length;
      const content = trimmed.replace(/^#{1,3} /, '');
      output += `<h${level}>${parseInline(content)}</h${level}>`;
    } else if (/^> /.test(trimmed)) {
      const content = trimmed.replace(/^> /, '');
      output += `<blockquote>${parseInline(content)}</blockquote>`;
    } else if (trimmed.length > 0 && !/^#/.test(trimmed) && !/^>/.test(trimmed)) {
      output += parseInline(trimmed);
    }
  });

  // Update outputs
  document.getElementById("html-output").textContent = output;
  document.getElementById("preview").innerHTML = output;

  return output;
}

document.getElementById("markdown-input").addEventListener("input", convertMarkdown);

Your browser information:

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

Challenge Information:

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

Hi @alisaermel and welcome to our community!

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.

Thank you, I tried in another browser and it worked!

1 Like

It may be that the browser you were using had extensions enabled which were injecting additional script tags into the page. You might find that disabling all browser extensions resolves the issue with that browser when on FCC.