Tell us what’s happening:
Greetings,
My code fails on every test that checks for a return value even when the contents of the preview and raw HTML boxes look fine and pass their respective tests. I’m also failing the tests that check for the output when one element is followed by another element of the same type on the next line, even when console log shows that the output is as expected.
Perhaps most importantly, I’m failing test 1 even though my script is hooked to the HTML doc.
I’m working on a tablet browser
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 type="module" 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 inputBox = document.getElementById("markdown-input");
const rawHtml = document.getElementById("html-output");
const previewBox = document.getElementById("preview");
function convertMarkdown(){
let inputArray = inputBox.value.split("\n");
//replace h1
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/^(?<![w]) *# ([^ ][^$]+)/g, "<h1>$1</h1>");
});
//replace h2
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/^(?<![w]) *## ([^ ][^$]+)/g, "<h2>$1</h2>");
});
//replace h3
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/^(?<![w]) *### ([^ ][^$]+)/g, "<h3>$1</h3>");
});
//replace bold text
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/[*]{2}([^*$]+)[*]{2}|[_]{2}([^_$]+)[_]{2}/g, (match, optionOne, optionTwo)=>{
if (optionOne){
return `<strong>${optionOne}</strong>`
}
if (optionTwo){
return `<strong>${optionTwo}</strong>`
}
});
});
//replace italic text
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/[*]([^*$]+)[*]|[_]([^_$]+)[_]/g, (match, optionOne, optionTwo)=>{
if (optionOne){
return `<em>${optionOne}</em>`
}
if (optionTwo){
return `<em>${optionTwo}</em>`
}
});
});
//replace image section
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/!\[(.+)\]\((.+)\)/g, (match, altText, sourceUrl)=>{
return `<img alt=${altText} src=${sourceUrl}>`
});
});
//replace links
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/\[(.+)\]\((.+)\)/g, (match, linkText, linkUrl)=>{
return `<a href=${linkUrl}>${linkText}</a>`
});
});
//replace quotes
inputArray.forEach((str, index, arr)=>{
arr[index] = str.replaceAll(/^> ([^]+)$/g, "<blockquote>$1</blockquote>");
});
return inputArray.join('');
}
inputBox.addEventListener("input", ()=>{
previewBox.innerHTML = convertMarkdown();
rawHtml.textContent = convertMarkdown();
})
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15
Challenge Information:
Build a Markdown to HTML Converter - Build a Markdown to HTML Converter