Added some small improvements to the UX.
What challenges did you encounter, and how did you overcome them?Wanted to go with a styled component approach to the form fields first, but figured out this is way more (unnecessarily) complicated than duplicating some code. Would likely go for this approach in a bigger project though.
Hi Heahl!
Nice job on the contact form.
There are a few minor adjustments I would suggest to make the form look and function event better.
I see you set the width of the form to 90vw. That works great on mobile devices, but I do think it looks a bit oversized on larger screens. To work around this, maybe consider setting a max-width. I also noticed that setting the main's min-h to screen causes it to take up more than 100 of the viewport height, so you have to scroll to get to the submit button. I would suggest reducing the min-h to something like 70vh.
Another thing I noticed is that if I try entering numbers in the name input fields, I don't get any errors. Consider adjusting your validation to make sure the inputs only accept letters.
I haven't worked with Zod for form validation, so I don't know exactly how that works, but I saw in your code that you used state variables for all input fields. Out of curiosity, I was just wondering why that is and if you could maybe explain to me if that is necessary for the validation process? If not, how come you chose to use so many state variables?
Again, great job on the form and happy coding :)
I encountered a problem positioning the component in the centre of the viewport using flex, grid or positioning and at the same time preventing it from growing beyond the viewport when expanding content. I justified content in the center and for Y-axis positioning used a margin-top, but the component doesn’t have bottom margins and it looks a bit odd.
What specific areas of your project would you like help with?If anyone has any ideas about positioning in the centre of the viewport and prevent component to go beyond the viewport please be my guest.
Hi Nikita,
great job on the challenge! :)
Regarding your issue with centering the component, I would suggest the following:
In your index.css file, remove the margin-top from your main element. Also remove the margin-bottom from your faq element. Give the body a height of 100vh rather than 100% to make sure it spans the entire height of the viewport. You already have the display of your body set to flex, and you've centered the component horizontally by applying justify-content: center. All that's missing is adding align-items: center, so your content will be properly aligned along the cross axis as well (in your case, vertically). The final code should look something like this:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Ensures the body takes the full viewport height */
margin: 0; /* Removes any default margin */
}
This turns your body into a flex container and aligns all content within it in the center.
Hope this helps :)
👋 Hi everyone! This is my solution for the interactive-rating challenge with a minor ongoing issue
What challenges did you encounter, and how did you overcome them?🏋️ I didn't manage to make the circles on which the user clicks stay highlighted
What specific areas of your project would you like help with?✍️ Judging by my code and using React, how would you manage to keep the white color of a circle once selected?
Hi Cedric!
Good effort on this challenge!
I have some suggestions that might help you out. First off, to your question about the radio buttons not changing color upon clicking them: You’re applying the checked property to the label rather than the input, which is why the styles aren’t being applied. To fix this, try applying the following in your styles.css file:
input[type='radio']:checked {
(put desired styles here);
}
Now the desired styles should be getting applied :)
Also, the labels aren't associated with their input fields. This is a problem because screen readers and such won't be able to associate the label with the corresponding input. You might want to try giving each input an id and giving the corresponding label a for attribute like so:
<label
className='card__radioinput'
for='button1'
>
<input
type='radio'
id='button1'
className='sr-only'
onClick={() => setUserChoice(1)}
/>
<span>1</span>
</label>
Consider giving each input the same name property (e.g. name='selectionButton') to make sure only one can be selected.
I also noticed that currently, it is possible to submit the form without having selected a rating. You could try avoiding this by slightly altering your handleClickSubmit function. Before setting isRated to true, check if userChoice is empty like so:
if(userChoice === '') {
alert("Please select a rating!")
return
}
Lastly, regarding responsive sizing, as the screen gets smaller, the contents overflow their container. I had the same issue and found the following helpful:
Instead of giving your .cardBS_div and .cardTK_div a width, height, min-width, and max-width, try only setting a width and min-width OR height and min-height and then setting an aspect ratio so the card will scale responsively.
Hope you find these ideas helpful!
Happy coding :)