hamed• 80
@latifii
Submitted
Hi guys. My second challenge on this platform. do you have any advice on how I could make my code more efficient?
Ilie Bogdan
@nosthrillz
All comments
- Ilie Bogdan• 190
@nosthrillz
Posted
Technically, you can drop the img tag for each card and instead of loading it through html, you can load it in css and set it as a background to the image div.
That way, when you have a class of 'sedan', you will load the image for sedan. likewise for the others.
This would simplify the HTML a little bit :)
Also, when you want to add borders to buttons, to prevent the layout from shifting, make the default element with a transparent border. .btn { border: 1px solid transparent; } .btn:hover {border-color: red;}
Marked as helpful
0 - Santhosh• 590
@santhoshpsd2
Submitted
Javascript was bit tricky any suggestions are always welcome.
Thank you
Ilie Bogdan• 190@nosthrillz
Posted
three quick things
You didn't handle the case where the inputs had values, but are now empty (aka fill both inputs, then delete one of them)
Also, the Reset button should be disabled when conditions are not met so that you don't show 'NaN' and 'Infinity' at the end.
and last: if I just write a bill value, then click on a tip without filling in the "number of people" field, it automagically gets filled to 1. But the designs showed a "can't be zero" error.
A nice quality of life change should be to give yourself a default tip value of 0, so you can see the split bill without tip. UX-wise, it's one less click (not having to go to custom to write 0)
P.S. It seems that the inputs were also supposed to be type="number"
0 - Ren Ras• 420
@renras
Submitted
I need feedback on how I code and my folders structure and if there are faster ways to load my api
Ilie Bogdan• 190@nosthrillz
Posted
Addressing what you were asking in terms of how to make it faster: you can try Next.js. That way, you wouldn't do any api call at run time, only at build time. And users loading your site would load data as if it was already there in the html files.
As far as the project goes, there were a couple of requirements you missed:
- heading font is too big. The designs have a smaller font
- population number is not comma-separated (in the design it is)
- individual cards with longer titles will overflow (see "United kingdom of great britain and northern ireland" at a smaller-width screen)
- the dropdown list is too spaced from its parent (at least according to the design). the space seems to be almost double that of the design-imposed one)
- in between 650 and 950 px widths, the cards are displayed as two columns on the two sides, which seems a bit odd. Suggest centering
- country details -> the border countries are not clickable
- and yes, what the previous person mentioned - the mobile layout:
- heading doesn't scale
- filter by region does not switch to column layout or wrap
- the details page is definitely not mobile friendly. This takes a lot of time and finesse and shouldn't be skipped
Marked as helpful
1
