Project Feedback

[gsquibbs]

@KatieMFritz 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)

[KatieMFritz]

Hi Grace, sorry it took me a couple days to get back to you! It looks like you're not including your script.js in your HTML file, so nothing happens when I fill out the form. Can you update that and then comment back here?

[gsquibbs]

Oops! My bad. I updated my index.html with the js script attached.

[KatieMFritz]

Hi Grace, this is off to a good start, but it's not quite working yet! 😟

Here's what happens when I type in my information:

Some of the things that are different from the assignment:

• undefined in the preview
• no links for phone or email
• no space after email address
• name is p, not h1
• Generated HTML doesn't show any HTML tags

The Preview and Generated HTML should use the exact formatting from the profile.html snippet.

:bulb: Another tip: I notice that your updateRawPreview and updateLivePreview functions are almost identical. Look for ways to reduce duplicate code. I'd be happy to provide some examples, if you'd like.

Let me know if you have any questions - I'll be on Slack most of the day! 😸

[gsquibbs]

Updated the raw and live html to be formatted like the snippet

[KatieMFritz]

Way closer! 🌟 ✨ 🍕

The email and phone links aren't going to the actual email and phone number yet. Here's what working links might look like:

• <a href="mailto:katie@katiemfritz.com">katie@katiemfritz.com</a>

• <a href="tel:517.555.5555">517.555.5555</a>

  ---

  Now that you've got the user side mostly working, here are some improvements you can make to your code:

Combine duplicate strings into variables

Since you're assigning the exact same HTML string twice (the actual profile code, from <h1> to .</p>) , what would you think about assigning it to a variable first, then reusing it when you update the page? So for example, if I'm doing this:

element1.textContent = 'hello' + yourName
element2.innerHTML = 'hello' + yourName

Then whenever I want to update 'hello' + yourName, I have to do it in two places. We're not only too lazy for that 😄, but it can also cause bugs (especially if 'hello' + yourName is a longer, more complex string). If we update one string and forget to update the other the same way, then we have an inconsistency. A solution for this would be to move 'hello' + yourName to a variable, like this:

var greeting = 'hello' + yourName

element1.textContent = greeting
element2.innerHTML = greeting

Now whenever we want to update the greeting, we can do it in just one place. Future development is now much easier and it's more difficult to create bugs. Does that make sense?

---

Combine similar functions

Since updatePreview and updateHtml use all the same variables (including your new one with the profile content) and should always happen at the same time (when a user types anything), you can combine them into one function that does 2 things.

In our greeting example above, instead of doing something like this:

var greetUser1 = function() {
  var greeting = 'hello' + yourName

  element1.textContent = greeting
}

var greetUser2 = function() {
  var greeting = 'hello' + yourName

  element2.innerHTML = greeting
}

we could do this:

var greetUser = function() {
  var greeting = 'hello' + yourName

  element1.textContent = greeting
  element2.innerHTML = greeting
}

This way, if you want to change the greeting variable, you only have to do it once, and also you only have to have one set of event listeners.

---

Give those things a try, and let me know on Slack if you run into any issues! 🚀

[gsquibbs]

Okay I made a lot of updates to my js file if you want to check it out!

[KatieMFritz]

Getting way closer! 😀 As we discussed, try making the entire profile one variable (break it into multiple lines).

[gsquibbs]

I added another variable to avoid the duplication and broke it into multiple lines 👍

[KatieMFritz]

Yes! Great job getting rid of the repetition. 🔥 🚒

Only one tiny change left. When you have a multi-line variable (or anything), you need to indent everything after the first line to show that it all belongs together. It's also conventional to start the multiline string on a new line, to make everything show up in a neat block (although different coders use different styles sometimes). So your function would look like this:

var datingProfile = function () {
  var profile = 
    '<h1> Hi my name is ' +
    firstInput.value + ' ' + lastInput.value + '!</h1>' +
    '<p>' + describeText.value + '</p>' +
    '<p> If you are interested in a date, you can email me at <a href="mailto:' +
    emailInput.value + '" target="_blank">' +
    emailInput.value + '</a> ' +
    'or give me a call at <a href="tel:' + numberInput.value +
    '" target="_blank">' + numberInput.value + '</a></p>'

  rawPreview.textContent = profile
  livePreview.innerHTML = profile
}

[gsquibbs]

Okay, changes are made!

[KatieMFritz]

Great job working through multiple iterations. 💥 🔥 ✨ Your code looks super solid now!

:shipit: