Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
22
Rowland
@rowleks

All comments

  • P
    Damilola Emmanuel•230
    @Damilordz
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?
    • Most Proud Of:

      • Successfully implementing Context API for the first time to manage global state effectively.
      • Overcoming the challenges of making form inputs mandatory before allowing navigation to the next step.
      • Gaining a deeper understanding of Context API and how to manage complex state interactions.
    • What I Would Do Differently:

      • Optimise the error-handling logic further for better scalability in larger forms.
      • Explore custom hooks for cleaner and more reusable state logic.
    What challenges did you encounter, and how did you overcome them?
    • Challenges:

      • Ensuring that users could not proceed to the next step without filling out the required personal information fields.
      • Managing the global state using Context API for the first time, especially keeping track of form data across multiple steps.
    • How I Overcame Them:

      • For form validation, I implemented error-checking logic using useEffect and tracked errors in the component state. This ensured users were alerted when a field was left empty.
      • By reading documentation and experimenting, I gained a solid understanding of how to structure and use Context API for handling multi-step form state. This included separating state management for plans, add-ons, and form data into logical contexts.
    What specific areas of your project would you like help with?
    • Suggestions on how to optimize the state management for large forms with multiple nested contexts.

    Responsive Multi-Step Form with React and Context API

    #react#tailwind-css#vite#material-ui
    1
    Rowland•320
    @rowleks
    Posted 6 months ago

    This looks great!

    You should let your number field accept country codes such as +234, +1, +233 etc.

    Also You could further strengthen your email validation field to only accept emails with top level domains (TLDs) such as .com, .org, .us, etc. so users can't insert strange TLD's such as .ccc

    I hope this helps.

    Marked as helpful
  • dullarzee•600
    @dullarzee
    Submitted 6 months ago

    multi step form

    1
    Rowland•320
    @rowleks
    Posted 6 months ago

    Looks, great!

    You just need some minor fixes for the hover and active states

    Also in step 1, when the user clicks next without inputting the necessary field, it doesn't show warnings as it should.

    Good job, I hope this helps.

  • wrong•80
    @wrong-g
    Submitted 6 months ago

    mortgage-repayment-calculator

    1
    Rowland•320
    @rowleks
    Posted 6 months ago

    Looks great!

    You just need to make it mobile responsive too.

    I hope this was helpful.

  • Rafiullah•60
    @Rafiullah08
    Submitted 7 months ago

    Mortgage repayment calculator

    1
    Rowland•320
    @rowleks
    Posted 6 months ago

    Looks great but there are some minor corrections

    You should hide the scroll bars next to the input. Also the values should be comma seperated.

    Hope this helps.

  • omnath22•390
    @omnath22
    Submitted 7 months ago

    tip-calculator-app

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks great!

    I noticed you used a single file for your HTML, CSS and JS.

    You did not separate concerns by creating a file for each.

    Hope this helps.

  • Victor Barrio•330
    @Victor-Barrio
    Submitted 7 months ago

    Tip Calculator Challenge

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks good but it's currently has some few issues.

    The number of people always displays Can't be zero even if the user inputs a valid number.

    Also 15% gets selected by default when the page loads

    And lastly the calculation does not display on the right.

    I hope this was helpful.

  • Wisdom Banda•20
    @Wisdom551-eng
    Submitted 7 months ago
    What challenges did you encounter, and how did you overcome them?

    I will be looking forward to improving and learning more on how to make projects work automatically once a user inputs values.I have done part of this in this challenge but I feel like I still need to refine and make myself perfect. Rest assured i would also like to dvelop my whole javascript CSS skills thus will be looking forward to projects requiring much of these.

    Tip Calculator app

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks great! but there are some minor fixes to be done

    Hide the scroll bar that appears next to the number inputs

    You can use display grid on the tip % section so it looks like the design.

    Kindly mark this comment as helpful if you find it helpful. Thanks.

    Marked as helpful
  • Moayad18•380
    @Moayad18
    Submitted 7 months ago

    Tip calculator app

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks great!

    You just need to make it mobile responsive.

    Kindly mark this comment as helpful if you found it to be helpful. Thanks.

    Marked as helpful
  • Fopefoluwa Ikufisile•850
    @FopefoluwaIkufisile
    Submitted 7 months ago

    Time Tracking Dashboard

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks great but there's room for some improvements

    Only the first 3 cards' data gets updated if the user changes the timeframe

    Include some hover and active states on the cards.

    Lastly changing the timeframe to daily and monthly should change the previous data to 'Yesterday' and 'Last Month' respectively.

    Kindly mark this comment as helpful if you find it helpful. Thanks.

    Marked as helpful
  • P
    Hussein :)•180
    @DevHussein
    Submitted 7 months ago

    tip-calculator-app

    #chakra-ui
    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks great but there are some minor fixes that can be made

    The hover states are not functioning on the reset button and the select tip % inputs

    Also hold up the tip amount and total calculations until all necessary inputs are provided so as not to display infinity.

    Lastly, after clicking on reset, the value of the inputs changes to 0 which cause some concatenation problems if the user inputs their own values

    Kindly mark this comment as helpful if you find it helpful. Thanks.

    Marked as helpful
  • P
    Gianmarco•260
    @gianmromero
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    My enhacement of my HTML layout with BEM methodology. I would like to improve my HTML layout much better.

    What challenges did you encounter, and how did you overcome them?

    I found a challenge of how make my buttons grid layout behave like I want. I founda solution I did ever think or see. Then I applied and it works as expected.

    What specific areas of your project would you like help with?

    Coding in Vanilla JS it's my actual major point of improvement. I would like to understand and write better code.

    Tip calculator Responsive design, with Vanilla JS and ValidatorJS

    #bem#pure-css
    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks great but there's room for improvements.

    The hover effects and active states are not functioning

    Also the select tip % could be a radio input instead so only 1 of the inputs can be selected and visually differentiated from the rest

    Lastly, you might want to remove those scroll buttons next to the inputs and also remove the default value of 0 on the inputs.

    Kindly mark this comment as helpful if you find it helpful. Thanks.

  • muiruri3000•400
    @muiruri3000
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    another mini project complete

    What challenges did you encounter, and how did you overcome them?

    managed to refactor my code after completing. could do more, but happy so far.

    What specific areas of your project would you like help with?

    happy with the progress

    Tip App

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks good but there's still room for improvements.

    It always come up with an error alert whenever I try to select a tip percentage and it does not calculate the tip amount and tip total per person.

    Also no warning comes up if I set the total number of people to 0.

    Kindly mark this comment as helpful if you found it to be helpful. Thanks.

  • P
    Bruna Gonçalves•270
    @brunagoncalves
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Having completed the challenge is a great victory.

    What challenges did you encounter, and how did you overcome them?

    I still have some difficulties with the semantics of HTML and JavaScript. So to focus more on correct structuring and javascript, I chose to use TailwindCSS. I decided to use Astro for this project, and getting it was great, I had never done it before.

    What specific areas of your project would you like help with?

    Any feedback that is constructive is welcome.

    Time tracking dashboard

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    This is really great! you nailed it!

    Could you share how you created the screenshot in your README file?

  • Daniel Sodré•90
    @DanielJavaprogrammer
    Submitted 7 months ago

    Dashborad responsivo com Grid

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    This looks great but the timeframe buttons aren't responsive, they don't change the data that gets displayed.

    Also for the mobile view, the cards are supposed to stack upon one another and not display grid as the desktop version.

    In italiano;

    Sembra fantastico, ma i pulsanti dell'intervallo di tempo non sono reattivi, non cambiano i dati visualizzati.

    Inoltre, per la visualizzazione mobile, le schede dovrebbero essere impilate l'una sull'altra e non visualizzare la griglia come nella versione desktop.

    Marked as helpful
  • dullarzee•600
    @dullarzee
    Submitted 7 months ago

    Junior developer builds dynamically updating time and dashboard

    #accessibility#fetch#semantic-ui
    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks good but the grid layout doesn't exactly match the design.

    Try reducing the height of the div containing the background images.

  • Amin Said•70
    @MEMOIIV
    Submitted 7 months ago

    tailwind CSS

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    This looks great! You just need to fix the active states for the buttons to align more closely to the design.

  • chidera-collins•10
    @chidera-collins
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    i understood toggling method very well

    What challenges did you encounter, and how did you overcome them?

    i had a bit issue with the toggling method for a while i kept adding "." to it

    flex flexbox grid responsiveness

    #accessibility
    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks good but the mobile design doesn't quite match the one given.

    The default state of the share button is open, you can change it to closed to it only opens after the user clicks on the share arrow.

    Good work!

  • Franklin Nmaju•110
    @Gentlefrank
    Submitted 7 months ago

    Newsletter-sign-up-form

    1
    Rowland•320
    @rowleks
    Posted 7 months ago

    Looks great! I got some inspiration from the way you used the picture and source element to display the different hero images for different screen sizes.

    You just need a little improvement to your email validation. For instance if I type abc@gmail.ccc it accepts.

    Also try to dynamically display the email address on the success page and not only show the default ash@loremcompany.com everytime

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub