Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
16
Comments
14
Danilo Parra Jr
@daniloparrajr

All comments

  • P
    Moustafa essam•550
    @moustafaessam
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I used React Hook Form Library

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

    How to add typescript with react hook form hooks was a bit challenging.

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

    None for this project

    Mortgage Calculator using React , Typescript and RHF

    #react#typescript#react-hook-form
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted 4 months ago

    This solution looks good! I like the attention to detail, responsiveness and using React hook form! I noticed some areas for improvements tho, please see below

    • Currency fields and displays doesn't have commas
    • Mortgage term, Mortgage Amount, and Interest Rate doesn't have minimum and maximum limits.

    Overall looks good! Keep going!

    Marked as helpful
  • P
    Stuart Roper•130
    @Ropenfold
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the cart feature which I used Redux to create, this was a pattern I was keen to reimburse myself in, especially the array functionality to clear and update the cart. On the whole the responsiveness is pretty good, some of the tablet resolutions could be better, I have started to look at designing first in mobile then working my way up to the larger resolutions. I will be using Tailwind going forward and for more challenging projects, I want to start using Typescript.

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

    Some of the resolutions, particularly Tablet had some issues within them but I find using the chrome tools to change the css on the fly then adding this to the code was especially useful. Some of the cart and redux functionality was a challenge at the start, remembering to return the items, once they had been through the array function was especially tough as I would get errors as the cart had been emptied, but I didn't understand why.

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

    None at the moment. I'm happy with the overall outcome.

    Product List with Cart

    #next#redux
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted 7 months ago

    Hi Stuart!

    You're solution looks good overall! There are just a couple of things I noticed.

    • Tablet responsiveness needs improvement, instead of showing a single product with a stretch image, why not just show two products per row instead? once the viewport can't cater the two products then just show one per row.
    • It is better to use the challenge's SVG instead of image tag because when you use SVG's you can effectively add hover effects.
    • Try to use the HTML picture tag for the product image, this way you can manipulate how the image is shown on different viewports.
    • Also look into the smaller details like the products spacing, element font weights
    Marked as helpful
  • egolam•450
    @egolam
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I did something that I should not be proud of, however, it worked.

    Results Summary Component - JS Frameworks and Libraries Path

    #next#react#tailwind-css
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted 8 months ago

    Hi Egolam! Your challenge results look good! I noticed that you use inline styles along with tailwindcss which is not a good practice. You can extend/override tailwindcss config to add your project's colors, spacing, font sizes, font families, and more!

  • Geochi Nova•40
    @ar78studio
    Submitted over 2 years ago

    Vanilla JS, syncing of progress bar in CSS with JS timer

    #animation
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted about 2 years ago

    Hi Geochi,

    You can follow this video by Google Chrome Developers about JavaScript accurate timer. I used this in my solution also.

    Another suggestion is to actually use an existing pomodoro app to compare how it works, like the pomofocus app

    Hope this helps, all the best!

  • David•1,200
    @David-Henery4
    Submitted over 2 years ago

    Pomodoro (React, ContextAPI, tailwind, flexbox, CSS Grid, responsive)

    #react#tailwind-css#sass/scss
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted about 2 years ago

    Hi David, your solution looks and works very well!

    I like how the code is clean and easy to understand! Great job!

    Please see my suggestions below

    1. Use the "button" tag on increment and decrement controls of your pomodoro, short break, and long break number fields.

    Doing so will give more accessibility features to your app for example users can tab through those fields and will still be able to increment and decrement just by using their keyboard.

    1. Use radion buttons for the Font and Color fields, also for accessibility. e.g. right now you can't select those through tabbing. See my solution as a reference.

    2. Use the form tag on the settings modal for accessibility e.g. users are not able to submit their changes by pressing the enter key on their keyboard.

    3. Modal accessibility also can be improved e.g. pressing escape key when the modal active should close the modal

    Hope this helps, all the best!

  • Dominic•40
    @dominicgerman
    Submitted over 2 years ago

    Pomodoro timer using Typescript, React, Vite, and CSS Modules.

    #react#typescript#vite
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted about 2 years ago

    Hi Dominic! You've done a good job with this challenge! Looks very good!

    To answer some of your questions, please see below

    1. You can simply deal with inline SVG without third-party libraries by importing them like React Components for example: import { ReactComponent as YourSvg } from './your-svg.svg';
    2. If you think that your component handles too much logic you can break it down into smaller components that way your components will stay simple and pure.
    3. Cross-browser testing is a great way to check if your app works on most browsers.
    4. You can check the Accessibility report of your solution for any accessibility issues. Also try to press the tab multiple times when your settings modal is active, it should focus on each field one by one. See my solution to this challenge as a reference.

    Hope this helps you! All the best!

  • Mohamed Zouhair•160
    @Wisemunk
    Submitted almost 3 years ago

    3-Column-Preview-Card

    #accessibility#itcss
    2
    Danilo Parra Jr•430
    @daniloparrajr
    Posted almost 3 years ago

    Hi Mohamed! 👋

    Looking good with your work here! Keep it up!

    One suggestion is to add the border initially in the buttons instead on hover so the cards will still be the same height.

    You can also improve your implementation by changing the cards text length and check if the cards still align with each other and if the button always remain in the bottom.

    A quick giveaway is to use flex direction of column and margin top auto! Good luck and have fun!

  • imagine_lilies•80
    @Lilee52
    Submitted almost 3 years ago

    intro-section-with-dropdown-navigation

    #accessibility#contentful#foundation#sass/scss#solid-js
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted almost 3 years ago

    Hi Lilee! 👋

    You're making good progress! Keep going!

    It is a better practice to write mobile first CSS and use min-width media queries for tablet and desktop. This means that styles are applied first to mobile devices, where most of the visitors will come. There are other more advantages in writing mobile first CSS which you can read further here

    You can checkout my take on this challenge which uses mobile first approach as your guide!

    Also check your HTML and accessibility issues, can keep it in mind in your next project!

    Hope this helps!

  • Byron•2,290
    @byronbyron
    Submitted over 3 years ago

    Ping single column coming soon page using HTML, CSS and Javascript

    #accessibility
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted over 3 years ago

    Great work byron! Checking your work I learned that button default type is "submit"! Keep it up!

    Marked as helpful
  • Artem Ponomarenko•365
    @ArtemPonomarenko
    Submitted over 3 years ago

    Responsive page, using html5, css3, jquery

    #jquery
    2
    Danilo Parra Jr•430
    @daniloparrajr
    Posted over 3 years ago

    I like that your javascript code is readable! My suggestion is to follow the guidelines here https://github.com/ryanmcdermott/clean-code-javascript.

    I noticed that some parts of your js code have a chain of else if statements which is not ideal. You can read more here on why - https://dev.to/dglsparsons/write-better-code-and-be-a-better-programmer-by-never-using-else-statements-4dbl

    Also, it is ideal to ditch jquery in today's standard as modern javascript can pretty much handle all that you need. You can check some alternatives here - https://youmightnotneedjquery.com/

    If you want to make your JavaScript knowledge better I recommend this course https://learnjavascript.online/

    I hope this are all helpful! happy coding!

    Marked as helpful
  • Michael•160
    @Minard-NG
    Submitted over 3 years ago

    HTML SCSS JS

    #sass/scss
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted over 3 years ago

    Hi @Minard-NG, you might want to consider always including a CSS reset in your stylesheet. This will keep your styles consistent on all browsers. You don't have to worry about the user agent styles that browsers add to the page.

  • dinahbrito•120
    @dinahbrito
    Submitted over 3 years ago

    Pod request access landing page

    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted over 3 years ago

    Great work @dinahbrito! You might want to consider checking out BEM for naming CSS classes. Also, you might want to check on larger screens.

  • Aleksandra•360
    @alexattt
    Submitted over 3 years ago

    Tip calculator, HTML, SCSS, JS

    #sass/scss
    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted over 3 years ago

    Good work Aleksandra! I suggest fixing your accessibility issues and HTML issues. It is pretty easy to fix and it's always good to follow these standards.

  • Supa•80
    @SupaSibs
    Submitted over 3 years ago

    Tip Calculator using CSS Grid and pure JS

    1
    Danilo Parra Jr•430
    @daniloparrajr
    Posted over 3 years ago

    You can start by improving your CSS. If you don't have access to the design files, you can use this extension (https://www.welldonecode.com/perfectpixel/) to help achieve close to design results.

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