@S0PHI3K
Latest solutions
Latest comments
- @jamesekunola
Your UI is impressive, yet a few adjustments are necessary:
- Avoid using a fixed height for the
card-containerandthank-you-containerdivs to address the overflow problem. - Prevent users from submitting a rating if they haven't selected a rating number.
- Implement a background color of
var(--orange)to indicate the selected rating number.
These modifications will enhance the user experience and the overall functionality of your UI.
- Avoid using a fixed height for the
- @semperprimum@jamesekunola
Hi Bogdan, for some reason your page is not displaying. it gives an error message of "Deceptive site ahead" i think you should change the domin name
- @abolore1@jamesekunola
Hi Otutu,
It appears that there are some improvements needed in your UI and functionality. Here are the points you should work on:
Regarding the UI for tablet and desktop screen sizes, it seems like you haven't coded it yet. You still need to work on the responsive design for these screen sizes.
For functionality, let's focus on step one:
-
Validation: Ensure that users can't proceed to step two if certain conditions are not met. For example, if the name input contains numbers, if the email input lacks "@" or valid domain endings like ".com" or ".co", or if the phone number input contains letters or is not a valid number. You can address these issues using regex (regular expressions).
-
Retain entered values: When users click on the "Go Back" button, the values they previously entered should still be visible, allowing them to make changes if needed.
Moving on to step two:
-
Default selection: The Arcade plan should be pre-selected by default when users arrive at this step.
-
Plan selection: Users should have the ability to choose and change one plan out of the three available options. You can achieve this by using radio buttons.
-
Retain selected plans: Similar to step one, when users click the "Go Back" button, the plans they selected in step two should still be visible.
Lastly, in step three:
-
Default add-ons: Two of the add-on plans should be checked by default.
-
User interaction: Users should be able to check and uncheck the add-ons by clicking on the plans themselves, not just on the checkboxes.
I hope these suggestions help you improve your UI and functionality. Good luck with your project! If you have any further questions, feel free to ask.
Marked as helpful -
- @elian-dev@jamesekunola
Hi Geordy, your ui look ok, but there are some issues you might need to address.
1 There is horizonatal overflow when device screen size is around 830px 2 users shouldn't be able to go to the next step if phone number isn't entered 3. The next button disapper when input is focused in page 1 on opera mini browser 3 input value for name shouldn't contain numbers or special characters. 4 in the add-ons on page 3 user should be able to still see their selected choice when they come back to page 3. 5 The color of the input when typing should be grey.
overall your ui is great, i love how you added animination to the pages. great work
Marked as helpful - @jamesekunola@jamesekunola
Added a country select for the phone input, all that is left out is refactoring the code. Thanks y'all for feedback, I had to test the app on all browsers to see how it look. I found out that the checkbox box display different on opera mini browser.
- @jamesekunola@jamesekunola
"I've incorporated animations for the explore button and the rest of the page. However, I'm encountering a problem on mobile devices where there is overflow on both the horizontal and vertical axes, even though I've applied
{overflow-x: hidden}to the body. I would greatly appreciate any advice or suggestions on how to resolve these issues."
