Tell us what’s happening:
Another newbie here complaining that their code DOES past the tests, I’m afraid (which it does).
Also, if my suspicion is right that it doesn’t like me bypassing appendChild() by just sticking tags into innerHTML, can anyone explain that? What’s the difference between writing, say, blah into the HTML file (which creates a child) and doing the same thing with javascript? Shouldn’t that also append a child in the same way? If I’m doing other things wrong, please tell me of course!
Thanks
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..."
onchange="runConverter()"></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 convertMarkdown(){
let input = document.getElementById("markdown-input").value;
function convert() {
let rawHTML = input;
return function(regex="",replacement=""){
rawHTML = rawHTML.replaceAll(regex, replacement);
return rawHTML;
}
}
const markdowns = [
[/^\>\s{0,1}(.{1,})/gm,"<blockquote>$1</blockquote>"],
[/^\#{3}\s{0,1}(.{0,})/gm,"<h3>$1</h3>"],
[/^\#{2}\s{0,1}(.{0,})/gm,"<h2>$1</h2>"],
[/^\#\s{0,1}(.{0,})/gm,"<h1>$1</h1>"],
[/\_{2}(.{0,})\_{2}/gm,"<strong>$1</strong>"],
[/\*{2}(.{0,})\*{2}/gm,"<strong>$1</strong>"],
[/\*(.{0,})\*/gm,"<em>$1</em>"],
[/\_(.{0,})\_/gm,"<em>$1<em/>"],
[/\!\[(.{0,})\]\((.{1,})\)/gm,`<img alt="$1" src="$2">`],
[/\[(.{0,})\]\((.{1,})\)/gm,`<a href="$2">$1</a>`]
];
let converter = convert();
for (let i=0; i<markdowns.length; i++){
converter(...markdowns[i]);
}
return converter();
}
function runConverter(){
let rawBox = document.getElementById("html-output");
let previewBox = document.getElementById("preview");
let convertedText = convertMarkdown();
rawBox.innerText = convertedText;
previewBox.innerHTML = convertedText;
}
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 Edg/142.0.0.0
Challenge Information:
Build a Markdown to HTML Converter - Build a Markdown to HTML Converter