I've tried to make this calculator app accessible. Please advise if you spot any accessibility issues, or if you have any other suggestions. Thanks in advance 😊
Mitali Shah
@MitaliShahAll comments
- @ortalyartsSubmitted 8 months agoWhat specific areas of your project would you like help with?@MitaliShahPosted 7 months ago
Hi, @ortalyarts congratulations on completing your project!
-
I noticed a few things that you might want to take a look at:
-
Currently, the bill amount is only accepting integers. It would be nice if users could enter tip amounts with decimals, for example, $146.56.
-
The text for "Tip Amount/Person" and "Total/Person" could be improved in terms of color. Please check the contrast ratio of the colors for accessibility using the webaim.org Contrast Checker.
-
The border color of the "Bill" and "Number of People" input fields does not match the design.
-
Overall, great solution!
I hope this feedback is helpful. Keep up the good work, and happy coding!
-Mitali
Marked as helpful0 -
- @Litheesh-kumarSubmitted 7 months ago@MitaliShahPosted 7 months ago
@Litheesh-kumar
-
Great job on completing this project!
- Here are some suggestions:
-
Instead of using
li::before
for adding orange tick marks to the<li>
, you can usesvg
as a value forlist-style-type
. Check out this article from MDN -
I noticed that your image is not displayed on the mobile layout. For responsive images, look into this mdn article about <picture>: The Picture element so that mobile and desktop images can change based on which viewport it is.
-
- Here are some suggestions:
-
Hope this helps you! Happy coding!
Marked as helpful0 -
- @MitaliShahSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
- I learned how to conditionally change the background-color based on the title value using styled-components
const Wrapper = styled.div` background-color: ${(props) => props.title === "Work" ? "var(--work-light-red)" : props.title === "Play" ? "var(--play-soft-blue)" : props.title === "Study" ? "var(--study-light-red)" : props.title === "Exercise" ? "var(--exercise-lime-green)" : props.title === "Social" ? "var(--social-violet)" : props.title === "Self Care" ? "var(--self-care-soft-orange)" : null}; `; };
-
I began the challenge with a few components and an MVP that mainly consisted of JavaScript logic to manipulate the data and display the current and previous hours based on the view. However, when I started working on the styling, I had to modify the HTML structure to fit the styling requirements. In the future, I would consider planning for this earlier in the project to avoid any issues.
-
Overall, I really enjoyed working on it
- I had difficulty conditionally applying the background color and SVG icons to the cards. I had to brush up on styled-components in order to complete that.
-
Currently clicking or hovering on daily, weekly, and monthly links change the color to
white.
However, I couldn't figure out how to make the default selected link(Weekly) white color. If anyone has any suggestions, I would greatly appreciate it! -
Also, feel free to share any feedback you may have. Thank you!
@MitaliShahPosted 7 months agoHi @CipiVlad
That absolutely works. I didn't think about adding a class to the styled component.
I appreciate you taking the time to look at my code; thanks!
0 - @hassan-12-sourceSubmitted 8 months ago@MitaliShahPosted 7 months ago
Hi @hassan-12-source
-
I just noticed a few things and wanted to mention:
- In the mobile layout: As per the design, Current hours and last week's hours are supposed to be on the same line.
- Currently, in your code, they're in the column. Same with the Daily, Weekly, and Monthly. For the mobile layout, It should be in the same line.
-
Overall, it is a great solution! Keep up the great work! Happy coding! :)
Marked as helpful0 -
- @HarmonJavier01Submitted 8 months ago@MitaliShahPosted 7 months ago
Hello @HarmonJavier01 , your solution looks great!
Here something I noticed which might be useful for you.
For responsive images, look into this mdn article about <picture> element: so that mobile and desktop images can change based on which viewport it is.
Happy coding!
Marked as helpful0 - @DepressedPenguinSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
If you resize the page, you will see extra space. I don't know where it is located. If you know tell me thank you 🙂
@MitaliShahPosted 8 months agoHi @DepressedPenguin Great solution!
- About the space you asked:
I found a space between the image and content in the mobile viewport. Try removing
justify-content: space-evenly;
from class_parent_box_d51td_1
Hope this helps!
0 - About the space you asked:
I found a space between the image and content in the mobile viewport. Try removing
- @NovikovIlyaSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
;)
What challenges did you encounter, and how did you overcome them?;)
What specific areas of your project would you like help with?;)
@MitaliShahPosted 8 months ago@NovikovIlya Great job on completing this project! Here are some suggestions:
- Use a media query to adjust the width of a card. It exceeds 730px.
- Change font size and padding for desktop. It seems like there is some extra space between the title and paragraph.
- The mobile layout active tooltip doesn't match the design.
- Use relative units for font size such as rem instead of px.
Hope this helps! Happy coding!
Marked as helpful1 - @Kwun7826Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Need more practicing
What challenges did you encounter, and how did you overcome them?Responsive layout
What specific areas of your project would you like help with?Responsive layout Should i put a fixed with, or percentage
@MitaliShahPosted 8 months agoHey @Kwun7826 Nice try
-
You can start your CSS mobile first. You can use max-width.
-
Start by working on the layout structure. Then, work on the header, main content, and footer one at a time. Then, move toward the tablet and desktop layout. You got this!
-
Read below articles
Hope this helps!
0 -
- @rugarcia25Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Working with grid is always difficult, so this time i tried to simplify as much as i could.
What challenges did you encounter, and how did you overcome them?The grid...
What specific areas of your project would you like help with?All feedback is welcome.
@MitaliShahPosted 8 months agoHi @rugarcia25
Your CSS grid looks great and I think you did an excellent job with it.
I do have one suggestion, which is entirely optional. You may want to consider updating the font size of the testimonial title to
1.25rem
, as this would be a better match with the design.Happy coding!
0 - @gdbeckerSubmitted 9 months ago
Had fun with this one and great practice!
@MitaliShahPosted 8 months agoHi Garrett, your solution looks great! Here's a suggestion: you may want to consider making the parent of the cards a <ul> and each card a <li> to improve its semantics instead of using div.
Happy coding!
0 - @rugarcia25Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I'm very proud of my self
What challenges did you encounter, and how did you overcome them?The media query and it was simple but i didn't see the image of web version :P
What specific areas of your project would you like help with?All feedback is welcome!
@MitaliShahPosted 9 months agoHello @rugarcia25 , your solution looks great!
Here are a few things that I noticed which might be useful for you.
- The cart image is decorative, so the alt must be empty.
- For responsive images, look into this mdn article about <picture> element:
Marked as helpful0 - @MitaliShahSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Any feedback is appreciated! Thank you!
What challenges did you encounter, and how did you overcome them?To display different images for mobile and desktop screens, I have utilized the element.
What specific areas of your project would you like help with?Any feedback is appreciated! Thank you!