Build a component that combines a first name and a last name into a full name — with clean spacing.
The template renders two text inputs: an <input> with the class first and an <input> with the class last. Below them, a <p> element with the class full-name shows the combined full name: the first and last names joined by a single space. There must be NO leading or trailing spaces when either name is empty — if only the first name is typed, the paragraph shows just the first name; if only the last name is typed, it shows just the last name. When both inputs are empty, the paragraph shows an empty string.
The template and the input handlers are already wired up for you — firstName and lastName are stored on the class whenever the user types. Your job is to implement the fullName getter so it joins the two fields correctly in every case.
Examples:
Initial render:
<p class="full-name"></p>
User types "Ada" into the first input:
<p class="full-name">Ada</p> (no trailing space)
User types "Lovelace" into the last input:
<p class="full-name">Ada Lovelace</p>
Only the last input has "Lovelace":
<p class="full-name">Lovelace</p> (no leading space)