I am very new to web development and was much struggling on making the site responsive. Especially with FLexbox. Could you please review the code for responsive design best practices for HTML/CSS.
Also, if you can review the angular code and provide comments/best practices, it would be great as well. Thank you!
Nice job. The site is close to the design and works.
For responsive the design one can play around with @media queries in css. My understanding is try to make it responsive without this and use the @media for exceptions. An example here would be to use @media to change flex direction such that the green container goes below the input fields for small screens.
@media (max-width: 750px) {
flex-direction: column;
}
A minor thing is that highlighting/selecting the input fields changes the sizes/position av bit. This is fixed by setting the normal border as the same as the border when it is selected, and then only change the border color when it is selected.
Found a small bug. When typing 0 in number of people the error message does not pop up. However when I remove the 0, the message pops up
Let me know if any bugs occur! Would be grateful to received feedback on the JS mainly as I am unfamiliar with best practices.
Slick. In my opinion I think you improved the design :)
Just some minor things I noticed. 1: I think you are missing a padding or margin below the continue button in "Enter your pledge"
2: I think "Enter a pledge" should be a label with a "for" attribute pointing to the id of input field. This will help for screen readers and automatic testing like selenium/playwright/puppeteer.
<label for="myInputId">My label</label> <input id="myInputId" />
3: When setting input for pledge and pushing enter, nothing happens. Same for phone. Next/Enter button on phone/android keyboard does not submit. This is easily fixed by wrapping the input and continue button in a form.
These are just minor things. Great work
Done with this challenge ^^ Yay! Leave a comment/feedback. ty
Just for info: In a larger project you would not import all your svg files in app component. You would import them in the component where they are used.
For screenreaders/accessability reasons your input/labels are missing for/name pairs.
<label for="bill">Bill</label>
<input name="bill" type="number"/>
In react for => htmlFor
Also notice the type="number". This might remove your regex tests. This also makes phone pull up the number keyboard for the input field.
Testet the site. Works like a charm and you nailed the styling :)
Any improvements or optimizations are welcome.
Hi!
Your labels and inputs are not semantic correct. Labels should not be h3.
Correct semantic way is:
<label for="bill" class="myLabel">Bill</label> <input name="bill" type="number"/>
Label and input should be together with a for/name. This also helps for automatic e2e tests like playwright/selenium.
Also notice the type="number". This will bring the correct keyboard for phones.
Otherwise nice job
