Build a Markdown to HTML Converter - Build a Markdown to HTML Converter

JavaScript
1

Tell us what’s happening:

not even a single test is passing not even the test have a function named convertMarkdown

Your code so far



/* 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;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36

Challenge Information:

Build a Markdown to HTML Converter - Build a Markdown to HTML Converter

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4 
function convertMarkdown(){

  let markdown = document.getElementById("markdown-input").value;
  let html = markdown.replace("/^### (.*)$/gm", "<h3>$1</h3>");
  html = html.replace("/^## (.*)$/gm", "<h2>$1</h2>");
  html = html.replace("/^# (.*)$/gm");

// bold
  html = html.replace("/\*\*(.?*)\*\*/g", "<strong>$1</strong>");
  html = html.replace("/__(.?*)__/g", "<strong>$1</strong>");

// italic
  html = html.replace("/\*\*(.?*)\*\*/g", "<em>$1</em>")
  html = html.replace("/__(.?*)__/g", "<em>$1</em>");
  
// image
  html = html.replace("/!\[([^\]]*)\]\(([^)]+)\)/g", '<image src="$2" alt="$1">')

// anchor elements
      html = html.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');

//quotes
  html = html.replace(/^\s*> (.*)$/gm, '<blockquote>$1</blockquote>')

  return html
  }

  const markdownInput = document.querySelector('#markdown-input');
const htmlOutput = document.querySelector('#html-output');
const preview = document.querySelector('#preview');

markdownInput.addEventListener('input', () => {
    const html = convertMarkdown();

    // Show raw HTML code
    htmlOutput.textContent = html;

    // Render 
    preview.innerHTML = html;
});
5

Use console.log at different points in your code to check on html to confirm that your replace lines are working as you think.

I suggest starting your function with this for testing so you dont need to type it in all the time:

let markdown = "# title 1"

Put these lines at the end of your code for testing as well so your display updates as you make code changes

const html = convertMarkdown();
htmlOutput.textContent = html;
preview.innerHTML = html;
1 Like
6

Is a regular expression a string? Your replace() syntax is inconsistent.

7

yes i just saw that error but it will work if we give string to replace it will convert it to regex, but my code is not passing even a single test

8

Are you sure about that?

9

yes it is a property of .replace method. Behind the scenes it does exactly this. anyway i tried again by making it a string still failed

10

Don’t worry about the tests.

Get your app working first.

Use console.log() to examine variables and confirm what is working and what isn’t.

2 Likes
11

Uh…the laughing emoticon was intended for the previous post by @vansh27052007.

1 Like
12

Maybe you’re not understanding what I am trying to convey:

The regex here should not be enclosed in quotes.

13

ohhh… i see the mistake now. Thank you for pointing out

1 Like
14

i got the error i did not link the javaScript file

15

Ok did you fix that already or do you still need help?

16

i fixed it the error was just that i did not connect my javascript file after connecting all tests passed