Responsive Mortgage Calculator, using react

Solution retrospective
Making parent element change its css based on its children's (for ex input elem's) css state. So for making input's parent change ots border when input is checked/valid, we can do this
.mortTypeInputHolder:has(input[type="radio"]:checked)
Making radio button of different color. Had to search a lot to find a way to make radio button look like as in design (with different color and behavior). Finally found a way to do it. Works like charm, and can be modified as per needs. This is how:
appearance: none; width: 15px; height: 15px; padding: 3px; background-clip: content-box; border: 1.5px solid var(--slate700); background-color: white; border-radius: 50%; cursor: pointer; margin-right: 10px;
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@danielmrz-dev
Hey there! 🙋🏽♂️
Congrats on completing the challenge! ✅
Your project looks fantastic!
Here's a tip to make it even better:
Using
margin
and/orpadding
isn't always the best way to center an element. Try this super efficient method to center an element vertically and horizontally:📌 Apply this CSS to the body (skip position or margins to make it work correctly):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Hope this helps!
Keep up the great work!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord