Skip to content
OverviewSolutions
20
Comments
14
Jamie Big
@jamesekunola

All comments

  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    Your UI is impressive, yet a few adjustments are necessary:

    1. Avoid using a fixed height for the card-container and thank-you-container divs to address the overflow problem.
    2. Prevent users from submitting a rating if they haven't selected a rating number.
    3. 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.

    0
  • Bogdan Kim•780
    @semperprimumSubmitted over 1 year ago

    I would greatly appreciate any feedback you may have!

    • I utilized Formik for form validation. This particular aspect is something I'm uncertain about since it was my first time working with it. Initially, I attempted to create my own form validation by implementing hooks, and I achieved some success. However, I eventually decided to switch to Formik as it became increasingly frustrating.
    • I'm quite unsure about the positioning of both cards. I employed position: absolute for them, but I wonder if using transform properties might have been a better choice. Additionally, I used absolute positioning for everything inside the card. Did I perhaps overuse it?

    Interactive Card Details Form with React, Formik and SCSS

    1
    Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    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

    0
  • Otutu qudus abolore•90
    @abolore1Submitted over 1 year ago

    How to achieve DRY but later figured it out. I wonder if there's always a link to a well finished live url which will let us know we have actually come up with all the task entails.

    flexbox

    1
    Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    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:

    1. 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).

    2. 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:

    1. Default selection: The Arcade plan should be pre-selected by default when users arrive at this step.

    2. 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.

    3. 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:

    1. Default add-ons: Two of the add-on plans should be checked by default.

    2. 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
    0
  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    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
    0
  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    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.

    0
  • Jamie Big•580
    @jamesekunolaSubmitted over 1 year ago

    I thoroughly enjoyed working on this project, although I did encounter some challenges on the technology page. One specific hurdle was determining how to appropriately display portrait or landscape images based on the user's screen size. I would greatly appreciate any feedback on what additions you believe should be made to the page.

    Space tourism multi-page website

    2
    Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    "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."

    0
  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    There is a horizontal overflow issue in your UI, and it seems that you might have forgotten to set a maximum width for your UI. Please address these concerns, particularly when the user's screen size exceeds 90rem. Apart from these points, your user interface is fantastic.

    0
  • Tehinse Elvis•250
    @elvissamuelSubmitted over 1 year ago

    I'm currently learning ReactJS so I decided to build this with React. I simply learned how to reuse components. One funny challenge I always have when developing a website is picking the right font and its color, I'd appreciate any advice on how to improve in it.

    Responsive Landing Page Using React and CSS Flex-box

    1
    Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    To prevent your UI from extending to the full width of the page when the screen width exceeds 90rem, it is advisable to add a maximum width constraint. This will ensure that your UI maintains a reasonable width even on larger screens and you should add a favicon icon instead of the default react favicon.ico. Other than that, your user interface is commendable.

    0
  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    There is a horizontal overflow issue in your UI, and it seems that you might have forgotten to set a maximum width for your UI. Please address these concerns, particularly when the user's screen size exceeds 90rem. Apart from these points, your user interface is fantastic.

    Marked as helpful
    1
  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    You haven't included a transition effect when the user switches the theme, and the favicon icons are not visible. Please take a look at these issues. Your UI design is impressive.

    0
  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    Resolve issue where clicking on a country card causes a page break instead of displaying the details page. This issue needs to be addressed.

    Marked as helpful
    0
  • Jamie Big•580
    @jamesekunolaPosted over 1 year ago

    "Fix issues with search feature and region filtering functionality; consider implementing dark mode theme. Overall, the code functions properly."

    0