Dennis Griffin• 1,320
@dgdev1024
Submitted
Here is a basic calculator, using React's Context API with Hooks. Let me know what you think.
Dennis Griffin
@dgdev1024
All comments
- Dennis Griffin• 1,320
@dgdev1024
Posted
Thank you. Right back at you!
0 - Armando Guarino• 540
@guarmo
Submitted
Feedbacks welcome
Dennis Griffin• 1,320@dgdev1024
Posted
That's looking pretty good! Keep it up.
1 - gusfoca• 170
@gusfoca
Submitted
I've used viewport units (vw) for the font size in some elements. Are there any drawbacks to this? The zooming seems to work fine.
Dennis Griffin• 1,320@dgdev1024
Posted
Viewport widths and viewport heights (vw & vh) are dependent on the size of your viewport - your screen. If that size is too big or too small, there's the possibility that the element using those will not appear correctly. If you are setting VWs and VHs for your element's size, I would advise also setting fixed 'min-width'/'min-height' and 'max-width'/'max-height' properties in order to alleviate that issue.
Your bottom two panes don't seem to appear correctly on devices larger in screen size than a smartphone and smaller than a large desktop. Consider using a CSS Grid layout for your panes. You can use that with media queries to place your panes in such a way that they appear correctly, regardless of the viewport's size. You can learn more about CSS Grid here: https://css-tricks.com/snippets/css/complete-guide-grid/
You're doing good, though. Good luck and keep it up!
0 - Gülay Yolcu• 510
@gulayyolcu
Submitted
any feedbacks are welcome..
Dennis Griffin• 1,320@dgdev1024
Posted
Some of the elements in your page are a bit off-center. Try setting a 'width' property with 'margin: 0px auto' on your '.container' class, as well as a 'max-width' property for extra-large screens, like desktops. The 'auto' in the 'margin: 0px auto' property will apply a certain degree of horizontal margin on your block-level elements, such that they will center themselves.
Also, your buttons show a border when you hover over them - you'll want to reduce the button's padding in that case to compensate for that border. For example, for a button with a padding of 16px that shows a 2px border when hovered over, you'll want to set a padding of (16px - 2px = 14px) in that button's ':hover' psuedo-class, in order to compensate for the border size.
Very good work, nonetheless. Keep it up!
0 - Onescu Radu• 70
@OnescuRadu
Submitted
What do you think about how I used Flexbox?
What do you think about my approach of developing this component?
Dennis Griffin• 1,320@dgdev1024
Posted
On mobile devices, the 'Fylo' logo and control buttons are growing in size proportionate to your screen's width, to the point where the exceed the bounds of their container on large mobile devices, like tablets. Also, the negative top margin on the '185 GB LEFT' container is causing that container to cover up your storage remaining meter under the same circumstances.
To remedy this, try adding a fixed 'max-width' property to your '.container' classes, and setting the 'margin-top' property of the '185 GB LEFT' container to a non-variable value, like '32px'. You may need to adjust these properties on your containers in your media queries, too.
Very nice work, though. Keep up the good work!
2 - Rafael Castellanos-Welsh• 210
@rafawelsh
Submitted
Open to any feedback 📚
Dennis Griffin• 1,320@dgdev1024
Posted
That's looking pretty good! The use of HTML data attributes is pretty clever, too.
One thing you could try doing is applying a transition to the 'color' and 'background-color' of your backgrounds and text, in order to give your page a smooth transition from light mode to dark mode.
Keep up the great work!
1
