Open davisc91 opened 4 years ago
Wow, great work on this, @davisc91! The code is formatted nicely, the organization of your functions is great, and using two event listeners per input is a pretty nice way to update both previews at once! 👏
Here are some ideas to improve what you've got here. Can you try these out?
id
attribute on code
elementUsing an id
attribute to lookup and set the textContent
of the Generated HTML is totally the correct approach. 👍
I see that you have a p
element inside of your code
element, though. This isn't valid HTML and may not render correctly in all browsers and may be confusing to anyone using a screen reader.
Instead, would you mind putting the id
attribute directly on the code
element and removing the nested p
element so your page will be fully valid?
Using two functions, each as a separate event listener per input element, is a really thoughtful way to update both previews on the page at the same time. I totally dig that! 🤘
There's a slight drawback to this approach, though: the code to generate the profile string is duplicated. This means that if one profile string is updated and the other isn't, the Preview and Generated HTML aren't guaranteed to match.
I have a couple of ideas to resolve this:
The first solution adds more code, but keeps your slick approach to updating two previews at once. The second solution will reduce the amount of code in your file by almost half, but updates the previews one after the other. Argh, choices!
Would you mind picking one and applying it to your project so the code to generate a profile string is not duplicated?
When I type an email and phone number into your site, the generated links always point to mailto:email
and tel:phone
:
Would you mind updating these to generate links that point at the email and phone number that I type in? In the example above, I would expect the links to point at mailto:gille143@msu.edu
and tel:555-1234
.
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! 😁
I think I fixed it, let me know if I did them correctly! For generating the profile once I tried to do the 2nd method.
Yeah, it's all the code looks great and works as expected! Farewell, double-event-listeners, you'll be missed. I don't have any other recommendations for improvement — amazing work on this project! 💯 :shipit:
Build a dating profile generator
@egillespie Can you take a look at this? It's hosted here and meets the following criteria:
<em>hella charming</em>
should appear as hella charming)<pre><code></code></pre>
elements (e.g.<em>hella charming</em>
should appear as<em>hella charming</em>
).js
file