@dgdev1024Submitted over 3 years ago
Here is a basic calculator, using React's Context API with Hooks. Let me know what you think.
Dennis Griffin
@dgdev1024All comments
- @guarmoSubmitted over 4 years ago
Feedbacks welcome
- @gusfocaSubmitted over 4 years ago
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.
@dgdev1024Posted over 4 years agoViewport 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 - @gulayyolcuSubmitted over 4 years ago
any feedbacks are welcome..
@dgdev1024Posted over 4 years agoSome 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 - @OnescuRaduSubmitted over 4 years ago
What do you think about how I used Flexbox?
What do you think about my approach of developing this component?
@dgdev1024Posted over 4 years agoOn 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 - @rafawelshSubmitted over 4 years ago
Open to any feedback 📚
@dgdev1024Posted over 4 years agoThat'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
