Moamen Abdelrahman• 340
@MoamenAbdelrahman7
Submitted
James Brown
@jamesbrown173
All comments
- James Brown• 260
@jamesbrown173
Posted
Looks great! No issues and functions well, also the fade in out looks good
Marked as helpful
1 - James Brown• 260
@jamesbrown173
Posted
It's really good, everything updates well. It's clear and responsive.
0 - khalagai• 300
@khalagai
Submitted
What are you most proud of, and what would you do differently next time?
- Getting the logic to work.
- Learning about the aria attribute for screen readers.
What challenges did you encounter, and how did you overcome them?
- Refactoring the code to reduce repetition. Reading more on refactoring helped, however, I believe more refactoring is possible.
What specific areas of your project would you like help with?
Any feedback on how I can further make the code simpler and more readable.
James Brown• 260@jamesbrown173
Posted
Design:
- The design is clean and easy to follow, I see you've made adjustments for your own styling that's great. All items align well and use correct icons.
- When hover over the custom tip input the added border makes the div jump up and down. You could fix this by adding a 'fake' border that is the same color as the background in line 31 of index.hmtl.
- Site is responsive to all screen sizes.
- On the mobile size the background blue color is only applied to the div container not the body, so it leaves white padding on the L and R. I think you could either apply the BG color to the body or remove X padding to fix this line 13 index.html.
Javascript code:
- Clean, easy to follow.
- Could be improve with some comments for each section.
- Functions well to calculate the amounts.
- As far as I can tell the bill only calculates when the tip inputs change, you could at an event listener for 'keyup' to the people and bill elements if you want it to be more responsive and change whenever a user types. You'd also need to add conditional statements to prevent submission if one or more fields were empty.
🤗 Great job and happy coding! 🤗
1 - PRobert Crocker• 410
@robcrock
Submitted
What are you most proud of, and what would you do differently next time?
This challenge gave me a chance to use environment variable in NextJS, which I hadn't used before. It also gave me a chance to create a nice grid layout.
What challenges did you encounter, and how did you overcome them?
I hadn't used environment variable in NextJS before. So I was getting some errors while deploying to Vercel that I hadn't seen before, but now I know exactly how to handle those issues in the future.
What specific areas of your project would you like help with?
I am alway open to feedback on how I'm using Tailwind and NextJS. This specific project gave us a chance to create our own endpoint, so feedback on that is welcome as well.
James Brown• 260@jamesbrown173
Posted
The grid overflows a little on the desktop view.
0 - PStephen Ostler• 210
@steveostler
Submitted
What specific areas of your project would you like help with?
I did a little research to complete this challenge but it's mainly my work (about 85%). I had to get the code for an email validation script from stack overflow. This is the only thing I do not understand in the code. Do I need to understand regex? Is it ok to rely on javascript validation?
James Brown• 260@jamesbrown173
Posted
Great, clean code easy to read with comments. Functions well with client side validation.
I'm not sure I used regex in mine but I don't understand it fully, I think it's a powerful tool for parsing data.
0 - Biruk Moges• 280
@lost50U1
Submitted
What are you most proud of, and what would you do differently next time?
It took me sometime even if i have some basic knowledge on javascript and it was challenging and i want to improve more on javascript and make the javascript code i added using less code even though it is challenging i finished the challenge.
What challenges did you encounter, and how did you overcome them?
if it was only making it show one of the share tooltip it was easy but making it show based on different screen is challenging and i solved it by making 3 functions and buttons.
What specific areas of your project would you like help with?
if someone can review both the tailwind and javascript code i used on the active state and tell me if there is a simple method to do it better i will appreciate it
James Brown• 260@jamesbrown173
Posted
**First Impressions
-
It functions well at first glance, and the buttons work to show and hide the share element. However when transitioning between sm and md breakpoints the share element doesn't change. I think we need to add hidden class types for the different breakpoints in the JS code.
-
The site is responsive and functions well.
0 -
What are you most proud of, and what would you do differently next time?
I am most proud of my ability to make the project match the design requirements. Additionally, I built the page using dev tools to figure out what went wrong and fix it.
I don't know what I would do differently, but I welcome feedback to improve.
What challenges did you encounter, and how did you overcome them?
The footer!!! I tried grid and flexbox but had a hard time getting the three elements to line up and look good. After toying around, I ended up with two flex containers. It looks right, but I am sure it can be done better; feedback is welcome!
What specific areas of your project would you like help with?
Improving the footer. Suggestions on @media's; good/bad?
James Brown• 260@jamesbrown173
Posted
** Design
- Great, clean easy to follow
- The design doesn't expand to the full width on desktop sizes, there's a small white gap. Maybe the width of the body needs to be set to dvw, but not sure.
Marked as helpful
0What are you most proud of, and what would you do differently next time?
I'm proud that I aligned the cards correctly using grid. Next time, I'd like to change the default font size to be more similar to the layout.
What challenges did you encounter, and how did you overcome them?
The biggest challenge was creating a layout that didn't break on tablets. Unfortunately, I couldn't solve the issue; I think I need to set minimum sizes, but the text was overflowing from the cards.
What specific areas of your project would you like help with?
How to create the layout for tablets so that it doesn't break on desktop.
James Brown• 260@jamesbrown173
Posted
**Design: Good! Clean easy to follow. Maybe consider using a lighter font in the lower paragraphs.
**Code: Well commented, easy to follow.
You mentioned the text overflowing, if you remove the lg:h-full class in this div it should stop the text from overflowing. I think when you're using lg:h-full it expands the div to the full amount of the parent, in this case the parent is restricted in size by it's padding, I think, therefore the text overflows.
<!-- Contenitore generale per grid --> <div class="lg:w-10/12 lg:h-full grid lg:grid-cols-4 lg:grid-rows-2 lg:gap-8 gap-6">Marked as helpful
0- Shakil ahmed• 260
@Shakil-a
Submitted
What are you most proud of, and what would you do differently next time?
most proud :
- worked with CSS grid and flexbox
- added media query for larger screens -used mobile first approach for the first time
what i would do differently:
- transition more smoothly when going from smaller screen sizes to larger ones
What challenges did you encounter, and how did you overcome them?
challenge and solution 1: how to code the design for the desktop version of the challenge solution: i learnt more and practised css grid on w3schools before attempting and also learn negative margin values
challenge and solution 2:
- how to create the box shadow around the cards: I had searched up the box shadow property and there was a site you can copy and paste from, once i found a good shadow that looked similiar to the one in thre design, i then used the dev tools to adjust the color and blur to get it closer to the design.
What specific areas of your project would you like help with?
i would like help on:
- if there was a better way to layout the four cards on desktop and mobile
- any bad practises that i need to stop before going for my next project -how to layout the design better on mobile so it looks smoother when going from smaller screen sizes to larger ones
- anything else that you spot is not the right way
any feedback would be appreciated, thank you
James Brown• 260@jamesbrown173
Posted
**Design: Maybe add a white color to the background of the cards to give contrast onto the background.
*Code: Consider using Tailwind CSS for writing inline styles, IMO this makes it easier to check your code. You mentioned about adding the shadow, this can be done easily through the shadow- property in tailwind.
1 - PHadeed Ahmad• 150
@hadeedji
Submitted
James Brown• 260@jamesbrown173
Posted
It's great, clean, easy to read.
Perhaps, on the mobile size you could have set a fixed width also as this would give you greater control of how the typography is displayed, rather than it being defined by the users screen size.
0 - Aris.• 60
@idatenkiddy
Submitted
What are you most proud of, and what would you do differently next time?
I made it and i am proud. I used html tags that are not usually used 💀 in my opinion
What challenges did you encounter, and how did you overcome them?
nothing much.
What specific areas of your project would you like help with?
I used strong tag instead of bold property ,cause i wanted to try it.
James Brown• 260@jamesbrown173
Posted
Clean sexy code, I love it! Super easy to read.
You used sections to mark different areas rather than just a div, I think this is semantically better. Why did you choose to do this?
The list spacing is not quite matching to the original image.
1 - James Brown• 260
@jamesbrown173
Posted
It's great!
0
