Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
4

Joshua Abu

@sirjaeyAbuja, Nigeria60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Responsive Ecommerce-lightbox/ecommerce-product-page


    Joshua Abu•60
    Submitted 3 months ago

    The site is fully responsive on android devices but not exactly good on IOS. I'd like to know how I can fix that


    0 comments
  • Responsive Mortgage calculator using bootstrap and jquery

    #bootstrap#jquery

    Joshua Abu•60
    Submitted 10 months ago

    1 comment
  • Responsive desktop and mobile landing pages. I used HTML and CSS


    Joshua Abu•60
    Submitted 12 months ago

    1 comment

Latest comments

  • Javier de Santiago•110
    @javierdesant
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I'm getting used to Tailwind CSS with React, next time I will be able to create a visually appealing and responsive component more quickly.

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

    Implementing dynamic data rendering and conditional styling based on the data was the hardest part.

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

    I need help with the chart's hover functionality. I haven't been able to ensure that the parent's hover effect of the chart bars does not affect the child's opacity (the div that shows daily expenses on hover). How did you do it?

    Responsive dynamic chart component using React and Tailwind CSS

    #react#tailwind-css#typescript#vite
    2
    Joshua Abu•60
    @sirjaey
    Posted 9 months ago

    Great job1

  • Iván Fernández López•230
    @IvanFdez01
    Submitted 9 months ago
    What specific areas of your project would you like help with?

    All feedback is welcomed! Also, some suggestions about frameworks, as this project taked long using plain CSS and JS and in sight on larger works it's crucial to be more efficient.

    Responsive grid. Modal traits. Scrollable confirmed items.

    2
    Joshua Abu•60
    @sirjaey
    Posted 9 months ago

    Wow this is mind blowing!!! Excellent job brother. I see the progress you're making and you are beginning to inspire me. Ride on sir.

  • Okoro Joshua Osinachi•220
    @Joshua65676
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of successfully integrating complex financial calculations, such as amortization schedules and interest rate calculations, into a user-friendly and intuitive React application. The calculator accurately handles various input scenarios, providing users with a clear understanding of their mortgage repayment obligations. I'm also proud of implementing a responsive design, ensuring a seamless user experience across different devices and screen sizes.

    What I would do differently next time:

    If I were to rebuild this project, I would focus on the following areas:

    1. Unit testing: While I have some basic tests in place, I would invest more time in writing comprehensive unit tests to ensure the calculator's accuracy and reliability.
    2. Code organization: As the project grew, some components became complex. Next time, I would prioritize a more modular approach, breaking down larger components into smaller, reusable pieces.
    3. User feedback and validation: I would add more robust user feedback and validation mechanisms to handle edge cases and ensure users enter valid data.
    4. Performance optimization: I would explore opportunities to optimize the calculator's performance, such as memoizing calculations or using web workers, to improve responsiveness.
    5. Additional features: I would consider incorporating more advanced features, like supporting different interest rate types (e.g., variable or adjustable rates) or integrating with real-time interest rate APIs.

    By addressing these areas, I believe I could create an even more robust, maintainable, and user-friendly mortgage repayment calculator.

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

    While building the mortgage repayment calculator, I faced the following challenges:

    1. Complex financial calculations: Accurately implementing formulas for amortization schedules, interest rate calculations, and repayment amounts.
    2. Form handling and validation: Managing user input, validating data, and handling edge cases.
    3. Responsive design: Ensuring the calculator worked seamlessly across various devices and screen sizes.
    4. Code organization and structure: Keeping the codebase maintainable, modular, and easy to update.

    To overcome these challenges, I:

    1. Sought help from AI and online resources: Utilized AI-powered tools, online forums, and documentation to understand complex financial calculations and best practices for form handling and validation.
    2. Broken down problems into smaller components: Divided the project into manageable tasks, focusing on one aspect at a time.
    3. Leveraged React and TypeScript features: Utilized React's state management and TypeScript's type checking to ensure a robust and maintainable codebase.

    By embracing these strategies, I successfully overcame the challenges and developed a functional and user-friendly mortgage repayment calculator.

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

    I would appreciate help with ensuring my mortgage repayment calculator is fully responsive and works seamlessly across various screen sizes and devices. Specifically, I'd like assistance with:

    1. Mobile optimization: Ensuring the calculator's layout and functionality are optimized for smaller screens (e.g., smartphones) and touch-based interactions.
    2. Tablet support: Adapting the layout to take advantage of larger tablet screens while maintaining usability.
    3. Desktop and large screen support: Ensuring the calculator scales appropriately for larger screens, utilizing available space effectively.
    4. Cross-browser compatibility: Verifying that the calculator works consistently across different browsers (e.g., Chrome, Firefox, Safari, Edge) and versions.
    5. Responsive design testing: Helping me develop a robust testing plan to ensure the calculator's responsiveness and usability across various devices and screen sizes.

    By focusing on these areas, I aim to create a mortgage repayment calculator that provides an excellent user experience regardless of the device or screen size used.

    Mortgage-Repayment-Calculator-Josh

    #react#tailwind-css#typescript#vite
    1
    Joshua Abu•60
    @sirjaey
    Posted 10 months ago

    Great job namesake! You didn't quite capture the active states. Also your fonts are not exactly the same as the original design. Also include the interest option in "mortgage type".

  • Iván Fernández López•230
    @IvanFdez01
    Submitted 10 months ago
    What challenges did you encounter, and how did you overcome them?
    • I had problems customizing the radio-inputs (only with the check circle).

    • Then, the selection of the best DS for the script was tricky, but I think the best in this case is mapping the three main inputs. This means a map like:

      i:{
        'input': DOM' input type-text
        'icon': DOM' icon of the input (pound, percentage...)
        'err': DOM' error message (This field is required)
         },
      i+1: 
        {
        same for the next input element
        }
     } 
    

    So with just being careful with the i you could deal more comfortably with the inputs to make them interactable around errors and user' attempts, achieving active states.

    • Finally, the web isn't responsive yet, I focused on JS :)

    Data Structures in JS: Map. Custom html inputs (text and radio)

    2
    Joshua Abu•60
    @sirjaey
    Posted 10 months ago

    Great job! I see you have made significant changes as your site is now fully responsive across all screen sizes. Kudos fellow

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