Tell us what’s happening:
I dont know why, but half of the test that start with “When the value of #markdown-input …” and they need to return something, they are not passing, even my converter works perfectly and for example test 2, returns what it asks but i cant pass it, whats wrong with my code?
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 */
/* file: script.js */
const markdownInput = document.getElementById('markdown-input');
const rawHTMLEl = document.getElementById('html-output');
const previewEl = document.getElementById('preview');
const header1 = /^#\s(.*)/gm; //replace with <h1>$1</h1>
const header2 = /^##\s(.*)/gmi; //replace with <h2>$1</h2>
const header3 = /^###\s(.*)/gmi; //replace with <h3>$1</h3>
const strong1 = /\*\*(.*?)\*\*/gmi; //replace with <strong>$1</strong>
const strong2 = /__(.*?)__/gmi; //replace with <strong>$1</strong>
const italic1 = /\*(.*?)\*/gmi; //replace with <em>$1</em>
const italic2 = /_(.*?)_/gmi; //replace with <em>$1</em>
const altTextImgSrc = /!\[(.*?)\]\((.*?)\)/gmi; //replace with <img alt=$1 src=$2>
const linkTextUrl = /\[(.*?)\]\((.*?)\)/gmi; //replace with <a href= '$2'>$1</a>
const quote = /^>\s(.*?)/gmi; //replace with <blockquote>$1</blockquote>
let markdownArr = [header1, header2, header3, strong1, strong2, italic1, italic2, altTextImgSrc, linkTextUrl, quote]
function convertMarkdown(line){
if(!markdownArr.some(regex => regex.test(line))){
let html = line;
return html
}
else if(line.match(header1)){
let html = line.replace(header1, `<h1>$1</h1>`);
return html
}
else if(line.match(header2)){
let html = line.replace(header2, `<h2>$1</h2>`);
return html
}
else if(line.match(header3)){
let html = line.replace(header3, `<h2>$1</h2>`);
return html
}
else if(line.match(strong1)){
let html = line.replace(strong1, `<strong>$1</strong>`);
return html
}
else if(line.match(strong2)){
let html = line.replace(strong2, `<strong>$1</strong>`);
return html
}
else if(line.match(italic1)){
let html = line.replace(italic1, `<em>$1</em>`);
return html
}
else if(line.match(italic2)){
let html = line.replace(italic2, `<em>$1</em>`);
return html
}
else if(line.match(altTextImgSrc)){
let html = line.replace(altTextImgSrc, `<img alt=$1 src=$2>`);
return html
}
else if(line.match(linkTextUrl)){
let html = line.replace(linkTextUrl, `<a href= '$2'>$1</a>`);
return html
}
else if(line.match(quote)){
let html = line.replace(quote, `<blockquote>$1</blockquote>`);
return html
}
}
markdownInput.addEventListener('input', () => {
let input = markdownInput.value // user input
let result = ''; //defines output string
let inputLines = input.split('\n');
inputLines.forEach((line) => {
result = result + convertMarkdown(line);
});
rawHTMLEl.innerText = result; // code
previewEl.innerHTML = result; // html
})
console.log(convertMarkdown(''))
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Build a Markdown to HTML Converter - Build a Markdown to HTML Converter
https://www.freecodecamp.org/learn/full-stack-developer/lab-markdown-to-html-converter/build-a-markdown-to-html-converter