Project Feedback

[bdpettway19]

@stuartpearman Can you take a look at this? It's hosted here and meets the following criteria:

• [x] Use this base HTML (feel free to change it) to build a simple app that generates the HTML for a dating profile in this format, using information collected from the user
• [x] Show a preview of the dating profile with rendered HTML (e.g. <em>hella charming</em> should appear as hella charming)
• [x] Also show the raw, generated HTML inside the <pre><code></code></pre> elements (e.g. <em>hella charming</em> should appear as <em>hella charming</em>)
• [x] Both the preview and raw HTML should update live as the user enters their information
• [x] All JavaScript is in a separate .js file
• [x] There are no linting errors in your JavaScript (this will also be expected for all future projects)

[stuartpearman]

Hi Barry,

Good start. A few things though:

Add event listeners

You have an eventListener added to your firstName input:

firstName.addEventListener('input', update)

That's great, you'll need to do that to all of the input and textarea boxes that are used to update the profile.

Spaces between words

Also, be sure that when you update the profile, there are spaces between all words. There's no space between the first and last names right now for example.

Phone and email links

Check the example format again for the email and phone number. You'll need to make links (a tags) for each just like in the code example.

Definitely a good first crack at it, I'm sure you'll have questions so definitely reach out on Slack if you need help :+1:

I also sent you an email, I'd be happy to meet and help you crank out some lessons if that would be helpful.

[bdpettway19]

Hey Stuart, I've gone in and made the suggested changes.

[stuartpearman]

Hi Barry, good job! Two things:

1. Make sure to close the <h1> tag, you can look back to the example format to see where the tag opens and closes
2. There's no space between the first and last name when it's outputted to the preview div

Let me know when you've made changes :+1:

[bdpettway19]

Hey Stuart I updated my code, but for some reason when I look at it from the hosted site on Github it's not showing the space between my first and last name. But if you look at my code and when I run it on live server, the space is clearly there. Other than that, everything else should be fine.

[KatieMFritz]

Sneaking in here to give you a :shipit:! Nice job responding to Stuart's feedback. ⭐️ 🔥 🌴

A tip for future projects: Line 10 of your JS is a very long string. Breaking it up into multiple lines will make it way easier to read.

Some guidelines for breaking up long strings in JavaScript:

1. Indent each line after the first by one level
2. Split the string at natural breaks, like you would for HTML
3. End each line with +

So your string might look like:

var content = 
  '<h1>Hi my name is ' + firstName.value + ' ' + lastName.value + ' !</h1>' + 
  ' <p>'+ describe.value + '</p> ' + 
  '<p>If you\'re interested in a date, you can email me at ' + 
  '<a href="mailto:' + email.value + '" target="_blank">'+ email.value + '</a>' + 
  ' or give me a call at</p> ' + 
  '<a href="tel:' + phone.value + '" target="_blank">' + phone.value + '</a>'