Tell us what’s happening:
It works well on the screen but it doesn’t pass the test. HELP!!
Test I failed
2. When the value of #markdown-input is # title 1, convertMarkdown() should return <h1>title 1</h1>.
5. When the value of #markdown-input is some text # title 1, convertMarkdown() should not convert # title 1 into an h1 element.
6. When the value of #markdown-input is # title 1 followed by # alternate title on a new line, convertMarkdown() should return <h1>title 1</h1><h1>alternate title</h1>.
7. When the value of #markdown-input is ## title 2, convertMarkdown() should return <h2>title 2</h2>.
8. When the value of #markdown-input is ## title 2, <h2>title 2</h2> should be displayed inside #html-output.
9. When the value of #markdown-input is ## title 2, an h2 element with the text of title 2 should be appended as a child of #preview.
10. When the value of #markdown-input is some text ## title 2, convertMarkdown() should not convert ## title 2 into an h2 element.
11. When the value of #markdown-input is ## title 2 followed by ## title 2 alt on a new line, convertMarkdown() should return <h2>title 2</h2><h2>title 2 alt</h2>.
12. When the value of #markdown-input is ### title 3, convertMarkdown() should return <h3>title 3</h3>.
13. When the value of #markdown-input is ### title 3, <h3>title 3</h3> should be displayed inside #html-output.
14. When the value of #markdown-input is ### title 3, an h3 element with the text of title 3 should be appended as a child of #preview.
15. When the value of #markdown-input is some text ### title 3, convertMarkdown() should not convert ### title 3 into an h3 element.
16. When the value of #markdown-input is ### title 3 followed by ### third title on a new line, convertMarkdown() should return <h3>title 3</h3><h3>third title</h3>.
17. When the value of #markdown-input is **this is bold**, convertMarkdown() should return <strong>this is bold</strong>.
20. When the value of #markdown-input is **this is bold** followed by **this is also bold** on a new line, convertMarkdown() should return <strong>this is bold</strong><strong>this is also bold</strong>.
23. When the value of #markdown-input is __this is bold__ followed by __this is also bold__ on a new line, convertMarkdown() should return <strong>this is bold</strong><strong>this is also bold</strong>.
24. When the value of #markdown-input is *this is italic*, convertMarkdown() should return <em>this is italic</em>.
27. When the value of #markdown-input is *this is italic* followed by *this is also italic* on a new line, convertMarkdown() should return <em>this is italic</em><em>this is also italic</em>.
28. When the value of #markdown-input is _this is italic_, convertMarkdown() should return <em>this is italic</em>.
31. When the value of #markdown-input is _this is italic_ followed by _this is also italic_ on a new line, convertMarkdown() should return <em>this is italic</em><em>this is also italic</em>.
32. When the value of #markdown-input is either # **title 1** or # __title 1__, convertMarkdown() should return <h1><strong>title 1</strong></h1>.
35. When the value of #markdown-input is , convertMarkdown() should return <img alt="alt-text" src="image-source">.
36. When the value of #markdown-input is , <img alt="alt-text" src="image-source"> should be displayed inside #html-output.
37. When the value of #markdown-input is , <img alt="alt-text" src="image-source"> should be appended as a child of #preview.
38. When the value of #markdown-input is  followed by  on a new line, convertMarkdown() should return <img alt="alt-text" src="image-source"><img alt="alt-text-2" src="image-source-2">.
39. When the value of #markdown-input is [link text](URL), convertMarkdown() should return <a href="URL">link text</a>.
42. When the value of #markdown-input is [link text](URL) followed by [link text 2](URL2) on a new line, convertMarkdown() should return <a href="URL">link text</a><a href="URL2">link text 2</a>.
43. When the value of #markdown-input is > this is a quote, convertMarkdown() should return <blockquote>this is a quote</blockquote>.
44. When the value of #markdown-input is > this is a quote, <blockquote>this is a quote</blockquote> should be displayed inside #html-output.
45. When the value of #markdown-input is > this is a quote, <blockquote>this is a quote</blockquote> should be appended as a child of #preview.
46. When the value of #markdown-input is > this is a quote followed by > this is another quote on a new line, convertMarkdown() should return <blockquote>this is a quote</blockquote><blockquote>this is another quote</blockquote>.
47. When the value of #markdown-input is some text > not a quote anymore, convertMarkdown() should not convert > not a quote anymore into a blockquote element.
48. When the value of #markdown-input is > **this is a *quote***, convertMarkdown() should return <blockquote><strong>this is a <em>quote</em></strong></blockquote>.
49. When the value of #markdown-input is > **this is a *quote***, <blockquote><strong>this is a <em>quote</em></strong></blockquote> should be displayed inside #html-output.
50. When the value of #markdown-input is > **this is a *quote***, you should set the inner HTML of #preview to <blockquote><strong>this is a <em>quote</em></strong></blockquote>.
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 */
const markdownInput = document.getElementById('markdown-input');
const htmlOutput = document.getElementById('html-output');
const preview = document.getElementById('preview');
const html = [
{
pattern: /# (.+)$/gm,
replace: `<h1>$1</h1>`
},
{
pattern: /## (.+)$/gm,
replace: `<h2>$1</h2>`
},
{
pattern: /### (.+)$/gm,
replace: `<h3>$1</h3>`
},
{
pattern: /\*\*(.+?)\*\*/g,
replace: `<strong>$1</strong>`,
},
{
pattern: /__(.+?)__/g,
replace: `<strong>$1</strong>`,
},
{
pattern: /\*(.+?)\*/g,
replace: `<em>$1</em>`,
},
{
pattern: /_(.+?)_/g,
replace: `<em>$1</em>`,
},
{
pattern: /!\[([^\]]+)\]\(([^)]+)\)/g,
replace: `<img "$1" src="$2"/>`,
},
{
pattern: /\[([^\]]+)\]\(([^)]+)\)/g,
replace: `<a href="$2">$1</a>`,
},
{
pattern: /> ([^\s].+)/gm,
replace: `<blockqauote>$1</blockquote>`,
},
]
const regex = [
/# (.+)$/gm,
/## (.+)$/gm,
/### (.+)$/gm,
/\*\*(.+?)\*\*/g,
/__(.+?)__/g,
/\*(.+?)\*/g,
/_(.+?)_/g,
/!\[([^\]]+)\]\(([^)]+)\)/g,
/\[([^\]]+)\]\(([^)]+)\)/g,
/> ([^\s].+)/gm
]
function convertMarkdown(input) {
let output = input;
let hasMatch = true;
while (hasMatch) {
hasMatch = false;
for (let i = 0; i < regex.length; i++) {
if (regex[i].test(output)) {
output = output.replace(regex[i], html[i].replace);
hasMatch = true;
}
}
}
htmlOutput.textContent = output;
preview.innerHTML = output;
return output;
}
markdownInput.addEventListener("input", () => {
convertMarkdown(markdownInput.value);
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
Challenge Information:
Build a Markdown to HTML Converter - Build a Markdown to HTML Converter