Tell us what’s happening:
My project appears to pass all of the tests from a functionality perspective within the preview pane, yet the tests aren’t all passing when I click the “Check Your Code” button.
For Test #1, the “Ask Socrates” (beta) function has shared with me the below screenshotted insights, which I don’t fully understand (ie. I’ve never encountered this requirement yet throughout the entire freeCodeCamp program thus far).
Outside of the above, the following test types all seem to fail for me as well:
Test #2: Returns
When the value of #markdown-input is # title 1, convertMarkdown() should return <h1>title 1</h1>
^ Any test that requres returned HTML is failing for me.
Test #5: Text in Front
When the value of #markdown-input is some text # title 1, convertMarkdown() should not convert # title 1 into an h1 element.
^ Any test that includes testing text in front of a header is failing for me, even though the visual output appears to be corret within the preview pane.
Test 6: Multi-Line
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>.
^ Any test that includes testing for multi-line is failing for me, even though the visual output appears to be corret within the preview pane.
Test 32: Double Formatting
When the value of #markdown-input is either # **title 1** or # __title 1__, convertMarkdown() should return <h1><strong>title 1</strong></h1>
^ This is the only test of it’s type for this project and even though the visual output appears to be correct within the preview pane for me, the training program is marking it as failed.
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" defer></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 {
width: 100%;
height: 100px;
display: inline-block;
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 regexArray = [
{h1:[/^[ \t]*#[ \t](.+$)/gm, "<h1>$1</h1>"]},
{h2: [/^[ \t]*##[ \t](.+$)/gm, "<h2>$1</h2>"]},
{h3: [/^[ \t]*###[ \t](.+$)/gm, "<h3>$1</h3>"]},
{strong: [/((?:\*|_){2})(.*?)\1/g, "<strong>$2</strong>"]},
{em: [/(\*|_)(.*?)\1/g, "<em>$2</em>"]},
{img: [/!\[(.*?)\]\((.*?)\)/g, `<img alt="$1" src="$2">`]},
{a: [/\[(.*?)\]\(\s*(.*?)\s*\)/g, `<a href="$2">$1</a>`]},
{blockquote: [/^[ \t]*> ([^\n]+?)$/gm, "<blockquote>$1</blockquote>"]}
]
const markdownInput = document.getElementById("markdown-input");
function convertMarkdown () {
inputText = markdownInput.value;
regexArray.forEach((regexObjPair) => {
const [pattern, replacement] = Object.values(regexObjPair)[0];
inputText = inputText.replace(pattern, replacement);
})
return inputText;
};
markdownInput.addEventListener("input", () => {
const htmlText = convertMarkdown();
const htmlOutput = document.getElementById("html-output");
const preview = document.getElementById("preview");
htmlOutput.textContent = htmlText;
preview.innerHTML = htmlText;
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36
Challenge Information:
Build a Markdown to HTML Converter - Build a Markdown to HTML Converter
