What are you most proud of, and what would you do differently next time?
The appearance of my application was very similar to the original challenge. However, the display that does the calculations and some operations cannot be done well.
What challenges did you encounter, and how did you overcome them?
one of the main challenges is the button to change color.
What specific areas of your project would you like help with?
I would like help to improve the appearance of the numbers on the display. and the operation of numbers.
well done, the design implementation and the theme swap is very good.
Somethings i would like you to give a look is the "+-*/" signals when i choose a two in a row them both show up in the display.
And the Error message It should disappear when the user is typing again.
Good luck in the next challenges I am spectating to see then
What are you most proud of, and what would you do differently next time?
Made an effort to condense code as much as possible
What challenges did you encounter, and how did you overcome them?
I managed to center the "main" element horizontally on the page but struggled to do so vertically. I tried the same approach as for horizontal centre alignment, i.e. specify give an exact height then set margins to auto, thinking it would work the same way but it didn't. When I set the vertical margin to auto it just removed all the vertical margins.
What specific areas of your project would you like help with?
Couldn't find anything online regarding the vertical centring. Ended up having to define exact vertical margins to get it looking centred.
One way you could use to center the content is
html, body{
height: 100%
}
//This will make you the html and body take all the height available
body{
display: grid;
place-content: center;
}//with the body taking all the height availably this will center it, you can also do the same with flexbox
and remove the margin and height from the Main tag - After that you no longer need this part
I advise you to search about css resets, and to use the inspector it gives good hints about the tags behaviors, I hope that i could help you
Congrats for your solution to this problem, is pretty god. Something I think that can be improved is the mouseover effect, if the cursor change with it, may give an extra visual clue
I am still quite new to React and Tailwind CSS so pardon me that there are some bugs in this solution, especially the CSS (tailwind) parts - which could have been more easily resolved if I am using plain CSS and Javascript. Nevertheless, the whole point here is for me to learn and practice using React and Tailwind CSS.
Please let me know if you know how to solve the bugs. Thanks!
You solutions is good, but there are somethings from the design source that maybe have slipped from your attention;
When a link is shortened and present it seens as it is out of the flow of the normal content;
Your card and menus seams to be different to, but beside that everything is good and functional congratis for it;
I would like to proved how to corrects some of the things i pointed out but i can't sorry
1.Are there any issues or improvements you'd suggest for better responsiveness?
2.I'd appreciate any feedback on my code, especially regarding best practices and coding conventions. Are there any areas where you think I could have written the code more efficiently or used better practices?
my advices go to the way you spaced your section with class main, it already as flex, you could give it a justify-content: space-between property, it would space itself and you would not need to space it with margin-left;
And you main tag could use a container class; to limit the space of the design , because you layout tend to have a scrow bar in big screen, I hope it was helpful to you
If you mean the party behind the profile image, I used background-image in a pseudo element , I hope i could help, try to check my solution it may help more
To set my image, I used the background-position property to manually set them in the top left corner and bottom right corner with lengths.
It still break when resizing but that is my solution
