Latest solutions
Latest comments
- P@marcello88c@abdulrrahmann
Great Work. Consider adding transition for smooth effect. try using the same colors in the design so they visually appear the same.
- @vgarmyWhat are you most proud of, and what would you do differently next time?
Proud of the overall design and the use of the Tailwind css.
What challenges did you encounter, and how did you overcome them?The Query Type boxes turned out to be more challenging than I expected. I initially believed that Tailwind CSS would provide an easy solution for styling them, but it didn’t deliver the functionality I needed. As a result, I changed my approach and opted to use React's useState hook instead. This allowed me to manage the state of the boxes effectively and create the interactive behavior I was aiming for.
What specific areas of your project would you like help with?No help needed.
@abdulrrahmannGood job. your overall solution is really nice. You can add transitions to make it more nicer. also, you can remove resize
resize: none;
in the textarea and add a specific height.Marked as helpful - @a5420bc@abdulrrahmann
Great Job. Make sure to add descriptive class names that make your code easy to read.
- @osuulola@abdulrrahmann
You should add some padding and make the button centered you can use
margin-left: auto; margin-right: auto;
. also, you should take care when the user does not click on any of numbers. great job.Marked as helpful - @BunchydoWhat are you most proud of, and what would you do differently next time?
Proud of:
Successfully handling decimal input in number fields by removing spin buttons using step="any". Aligning images within containers using position: relative and position: absolute, and centering them with transform: translateY(-50%). Organizing global styles (fonts, colors) first to set up the foundation before focusing on layout. Effectively managing hover states with CSS selectors like :not(:last-child) to simplify the styling process without adding extra divs. What I’d Do Differently:
Instead of relying on JavaScript for some layout adjustments, I’d explore more CSS-based solutions like flexbox or grid to handle responsiveness and dynamic content changes. I would work on optimizing media queries to ensure they target all screen sizes efficiently. Focus on testing the app on multiple screen sizes and devices to refine the layout before finalizing styles.
What challenges did you encounter, and how did you overcome them?Challenges:
Getting input fields to accept decimal values without the spin buttons was tricky. The step="any" attribute was a new concept, but after some testing, I found it works well for number inputs. Handling vertical centering using top: 50% and transform: translateY(-50%) was initially confusing. I had to learn the relationship between the element’s height and container height to make it work properly. Some CSS properties like height: 100% didn’t behave as expected due to nested percentage-based heights, so I had to adjust my approach and sometimes use height: auto for better results. Solutions:
Used step="any" on number inputs to allow decimal values. Used position: relative on parent containers and position: absolute for child elements to fine-tune image alignment. Experimented with height: auto in some cases where 100% was causing layout issues.
What specific areas of your project would you like help with?CSS Grid and Flexbox: I would appreciate advice on how to improve the responsiveness of my layout using CSS Grid and Flexbox. I’m currently using a lot of height: 100% and flex properties, but I would like to make the design more adaptive to various screen sizes.
JavaScript Calculations: I’m handling some dynamic calculations in JavaScript (e.g., calculating tip amounts). I’d love feedback on how to optimize these calculations or make the interaction smoother (e.g., avoiding issues when values are updated rapidly).
Media Queries: I need some suggestions for structuring my media queries to ensure the app works well across different devices and screen sizes. Any advice on best practices for mobile-first design and handling breakpoints would be helpful.
@abdulrrahmanngreat job! your solution is amazing. you can take a look at mdn web docs https://developer.mozilla.org/en-US/docs/Web/CSS/grid the grid and flexbox are explained in depth.
- @AhmedElbassuony@abdulrrahmann
good job