Project Feedback

[veraldik]

Build a dating profile generator

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

• [x] There are no linting errors in your JavaScript (this will also be expected for all future projects)
• [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] 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] Show a preview of the dating profile with rendered HTML (e.g. <em>hella charming</em> should appear as hella charming)
• [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

Having issues with JavaScript. I pretty much copy and pasted the code from the lesson and changed the variables but I can't get it to run. I think the issue is with the htmlPreview, I'm not sure i'm changing it the right way. Please help!

[egillespie]

It looks like the id values in your JavaScript don't exist in the HTML. Try adding id="firstName", id="lastName", etc. to the appropriate elements in the HTML and see if that does the trick. 🙂

[veraldik]

The index.html I was working on was saved to my desktop so none of my changes were reflected. I think I got it this time though!

[egillespie]

Cool, I can see the profile updating as I type. 😄

I see a couple of things going on related to the Generated HTML section of your page that are related:

1. The rendered HTML is showing instead of the code (e.g. I should see <strong>really tall</strong> instead of really tall if I type <strong>really tall</strong> in the description box)
2. There are W3C validator errors saying that elements like h1 and p are not allowed inside a code element

Both of these are happening because the h1, p, a, etc. elements are placed inside the code element in the HTML.

In order to make the actually HTML profile appear inside the code element, you'll have to put an id attribute on the code element and use textContent to put the whole generated profile inside it at once.

This means you'll have to create the profile entirely in JavaScript. It'll look something like this:

var profile = '<h1>Hi, my name is ' + firstName + ' ' + lastName + '!</h1>' +
  '<p>' + description + '</p>' +
  ...

It looks like you have all the pieces in your JavaScript, you just have to reorganize the information a little bit. Can you give this a try and comment back when you're ready for me to take another look?

Thanks! ⭐️

[veraldik]

I created the profile in JS for the generated HTML area. I wasn't sure if you also wanted the profile created in JS for the preview. When I tried to create the profile preview in JS it made all of ("if youre interested in a date you can email me at" + email) a link and I wasnt sure how to fix that.

[egillespie]

Gotcha. If you put an id on the div element where the Preview is, you can set the innerHTML for that div to the same value as the Generated HTML. 😄

To adjust the EMAIL_ADDRESS (and PHONE_NUMBER) in the profile links, you can do something like this:

// BEFORE
var example = '<a href="mailto:EMAIL_ADDRESS" target="_blank">' + email + '</a>'

// AFTER
var example = '<a href="mailto:' + email + '" target="_blank">' + email + '</a>'

Does that make sense?

[veraldik]

I tried fixing the links for the phone and email, let me know if it is okay! Thank you!

[egillespie]

That looks great for the Generated HTML! 🤘 The Preview can use this same approach, but you will use innerHTML instead of textContent to place the profile. Do you mind doing that?

Otherwise, your href attributes for your links will still contain mailto:EMAIL_ADDRESS and tel:PHONE_NUMBER, as seen in the screenshot below:

[veraldik]

Okay, I think I finally got it!

[egillespie]

Yeah you did, totally nailed it! 🤘 :shipit: