What specific areas of your project would you like help with?
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 😊
@MitaliShah
What specific areas of your project would you like help with?
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 😊
@MitaliShah
Posted
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 helpful
@Litheesh-kumar
Submitted
@MitaliShah
Posted
@Litheesh-kumar
Great job on completing this project!
Instead of using li::before
for adding orange tick marks to the <li>
, you can use svg
as a value for list-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.
Hope this helps you! Happy coding!
Marked as helpful
@MitaliShah
Submitted
What are you most proud of, and what would you do differently next time?
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
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
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!
@MitaliShah
Posted
Hi @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!
@hassan-12-source
Submitted
@MitaliShah
Posted
Hi @hassan-12-source
I just noticed a few things and wanted to mention:
Overall, it is a great solution! Keep up the great work! Happy coding! :)
Marked as helpful
@HarmonJavier01
Submitted
@MitaliShah
Posted
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!
@DepressedPenguin
Submitted
What 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 🙂
@MitaliShah
Posted
Hi @DepressedPenguin Great solution!
justify-content: space-evenly;
from class _parent_box_d51td_1
Hope this helps!
@NovikovIlya
Submitted
What 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?
;)
@MitaliShah
Posted
@NovikovIlya Great job on completing this project! Here are some suggestions:
Hope this helps! Happy coding!
Marked as helpful
@Kwun7826
Submitted
What 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
@MitaliShah
Posted
Hey @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!
@rugarcia25
Submitted
What 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.
@MitaliShah
Posted
Hi @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!
@gdbecker
Submitted
Had fun with this one and great practice!
@MitaliShah
Posted
Hi 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!
@rugarcia25
Submitted
What 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!
@MitaliShah
Posted
Hello @rugarcia25 , your solution looks great!
Here are a few things that I noticed which might be useful for you.
Marked as helpful
@MitaliShah
Submitted
What 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!
@MitaliShah
Posted
Appreciate the feedback, Harsh! Thank you!