Iqbal• 135
@Firdausi-Iqbal
Submitted
Challenge accepted!
learning basic JS for couple of days in order to finish this challenge. if you have suggestions on how i can improve, feel free to give your feedback. Thanks 😁
Boyan Liu
@BoyanLiuu
All comments
- Boyan Liu• 465
@BoyanLiuu
Posted
Hello , Iqbal Everything looks good to me , but I would like to give some suggestion for the css part. I notice that you are using rem , which is nice. I am suggesting you can set font-size:62.5% in the root. It would turn default 16 px into 10 px which you could easily do the math in the future. Another one is You can add box-sizing: border-box; in the root element as well. It guarantees that the content box shrinks to make space for the padding and borders. Therefore, if you set your element width to 200 pixels, border-box makes sure that the content, padding, and borders fit in this number
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Happy coding!
2 - Kristian Dunne• 305
@KristianDunne
Submitted
First time using Formik and wow I am impressed at how easy it all was!
I could improve the readability and maintainability of the form by creating my own custom input field components.
I also need an elegant for the icons in the input fields upon a validation error. Suggestions would be appreciated!
Boyan Liu• 465@BoyanLiuu
Posted
I can suggest one
It is use position absolute for the icon you can have a div include both input and error icon div for the error icon div, you can set background image for the error icon. Then you use position absolute for the icon dive and position relative for the outter div that wrapper both input and error icon div. Then you use top bottom to put the error icon div in the proper position.
<div class="input-container"> <input aria-label="first name" type="text" name="first-name" id="first-name" placeholder="First Name" /> <div class="error-icon first-icon"></div> <div class="error-message"> First Name cannot be empty </div> </div>1 - Florian Andrieux• 225
@Gilliams
Submitted
Any advice or constructive criticism is welcome. Thanks to you
Boyan Liu• 465@BoyanLiuu
Posted
One thing I can suggest is to have a max-width property in your container when it is in the phone viewpoint. So It would not stretch all the way. Other than that It looks good to me.
1
