Project Feedback

[qassisju]

@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]

Hey Justin! Nice work figuring this out. 🔥 💥

Your addCode function does great at publishing my input into the profiles, but there are some formatting issues with the profile output.

• There are at least 3 missing spaces in your output - check out this image.

• The raw HTML displays as one long line, forcing me to scroll horizontally. 😮

• • *

    Duplicated string

And a tip, that will make that first change easier. 😄

Since you're assigning the exact same HTML string twice, what would you think about assigning it to a variable first, then reusing the variable? So for example, if I'm doing this:

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

Then whenever I want to update 'hello', 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' is a longer, more complex string - say, an entire dating profile). If we update string and forget to update the other the same way, then we have an inconsistency. A solution for this would be to move 'hello' to a variable, like this:

var greeting = 'hello'

element1.textContent = greeting
element2.innerHTML = greeting

Now whenever we want to update the 'hello', 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?

---

After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.

Thanks! :rocket:

[qassisju]

The spaces have been added and the variables have been changed

[KatieMFritz]

Nice job iterating! That new variable seems to be working great and the spaces all look good now. ✨ ✨

I'm still getting this problem:

The raw HTML displays as one long line, forcing me to scroll horizontally. 😮

Here's a hint: I notice it also shows up as preformatted text, which is what I expect, but it doesn't appear in a code block (gray background) once I start typing. Check out your index.html and see if you can figure out what's going on. Slack me if you get stumped. 🤔

[qassisju]

Got it, check now

[KatieMFritz]

YES YOU ARE A WIZARD. 😁 Great detective work!

:shipit: