Open veraldik opened 5 years ago
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. 🙂
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!
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:
<strong>really tall</strong>
instead of really tall if I type <strong>really tall</strong>
in the description box)h1
and p
are not allowed inside a code
elementBoth 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! ⭐️
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.
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?
I tried fixing the links for the phone and email, let me know if it is okay! Thank you!
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:
Okay, I think I finally got it!
Yeah you did, totally nailed it! 🤘 :shipit:
Build a dating profile generator
@egillespie Can you take a look at this? It's hosted here and meets the following criteria:
.js
file<pre><code></code></pre>
elements (e.g.<em>hella charming</em>
should appear as<em>hella charming</em>
)<em>hella charming</em>
should appear as hella charming)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!