@sjoseph91
Posted
Hey Fritz, I used absolute positioning for the info inside of the cards, although I did have to adjust them on larger screens. For the cards themselves, I positioned them relative to the bottom side of their container div on mobile screens and the right side of that div on larger screens. In the context of your code, I think that would be on <div class="card-display">
For real time display, I used React. In vanilla JS, the only thing I can think of is doing something similar to what you did, adding an event listener on the various input elements and updating the corresponding .innerText of .textContent proprety.
I put all my form validation in one function, although I could have broken it up. I used regex to validate all inputs in JS and I set the maxLength property on the HTML input tags. I had if statements check to see if the following conditions failed, and if they did, I would that input element's error message.
Hopefully that helps! Good luck on your journey
Marked as helpful
@fritzadelbertus
Posted
@sjoseph91 Thank you for sharing your solution!, I also wanted to start using React after this challenge and hoping I can use it for the next challenge.
