Skip to content
Submitted 4 months ago

Responsive Mortgage Calculator, using react

Nikesh W•170
@randomduckduck
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Mortgage repayment calculator
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

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;

Community feedback

  • Daniel 🛸•44,270
    @danielmrz-devPosted 4 months ago

    Hey there! 🙋🏽‍♂️

    Congrats on completing the challenge! ✅

    Your project looks fantastic!

    Here's a tip to make it even better:

    Using margin and/or padding 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!

    0
    Nikesh W•170
    @randomduckduckPosted 4 months ago

    @danielmrz-dev Bot comment

    0
    Daniel 🛸•44,270
    @danielmrz-devPosted 4 months ago

    @randomduckduck actually not. I've just made templates for my comments so I don't have to type the same thing over and over.

    I'm on this platform for a while now and noticed that most people here have the same questions or make the same mistakes. Feel free to check my solutions, github profile or other socials to check if I'm a bot 🙋🏽‍♂️

    0

Please log in to post a comment

Log in with GitHub

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