Wishlist, login and signup #8
Conversation
| } | ||
| /* .login-check:valid { | ||
| border: var(--Mak-colors-green-500) solid 1px; | ||
| border-radius: 1.5rem; |
| <span className="avatar-img-container"> | ||
| <img | ||
| className="avatar-img" | ||
| src="../images/steve.jpg" |
| </p> | ||
|
|
||
| {WishlistProducts.map( | ||
| (product) => { |
There was a problem hiding this comment.
You can destructure product values in this line
| className="login-check formInput AlertWarning search-container" | ||
| type="email" | ||
| name="" | ||
| id="" |
There was a problem hiding this comment.
Give values to these attributes.
Suggestion - use label for inputs
| /* .login-check:valid { | ||
| border: var(--Mak-colors-green-500) solid 1px; | ||
| border-radius: 1.5rem; | ||
| } */ |
| export function Login() { | ||
| return ( | ||
| <> | ||
| <div |
There was a problem hiding this comment.
Here you can remove these fragments as you are already enclosing your code inside a div
| name="" | ||
| id="" | ||
| pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" | ||
| title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" |
There was a problem hiding this comment.
appreciation - use of pattern attributes for regex
| name="" | ||
| id="" |
There was a problem hiding this comment.
Here also please give these attributes some values
| alt="" | ||
| srcset="" |
| <div className="inputDomMainContainer flex-column-center"> | ||
| <form | ||
| className="formContainerMain inputDomContainer AlertInfo input-flex inputError box-shadow" | ||
| action="submit" | ||
| autocomplete="on" | ||
| > | ||
| <div className="formContainer input-flex flex"> | ||
| <h3 className="h3Tag"> | ||
| Forgot your password ? | ||
| </h3> | ||
| <p className="discriptionText"> | ||
| Please enter the email you use | ||
| to sign in to Vision Cart |
There was a problem hiding this comment.
Indentation part can be fixed in overall code
| /* .login-check:valid { | ||
| border: var(--Mak-colors-green-500) solid 1px; | ||
| border-radius: 1.5rem; |
There was a problem hiding this comment.
Commented code can be removed if not required.
| <input | ||
| className="login-check formInput AlertSuccess search-container" | ||
| type="password" | ||
| name="" | ||
| id="" | ||
| pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" | ||
| title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" |
There was a problem hiding this comment.
This is new to me, that using pattern attribute for input. Appreciate it !!
| key={product.id} | ||
| > | ||
| <div className="card-container-horizontal flex-column-start"> | ||
| <section className="cart-product flex-column-center"> | ||
| <section className="flex-row-start"> | ||
| <img | ||
| className="imgcard" | ||
| src={product.img} | ||
| alt="product-img" | ||
| /> | ||
| </section> | ||
| </section> | ||
| </div> | ||
|
|
||
| <span className="card-text-container cart-brand-text"> | ||
| <span className="card-description"> | ||
| <h5>{product.name}</h5> |
There was a problem hiding this comment.
For usability, "product" can be destructured. It's a suggestion only.
Adding Wishlist, login and signup