Submitted 5 months ago

mortgage repayment calc - next js, tailwind

Faris•100

@FarisKarim

Preview site View code

This is a solution for...Mortgage repayment calculator

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

How to make the background of the £ symbol lime colored when the "mortgage amount" input is clicked. Using tailwind, I tried focus:bg-lime as well as focus-within:bg-lime but it didn't seem to change anything. (I added lime as a color in my tailwind.config.js; it works in other areas of the project but not here)

Community feedback

Filip Juszczak•690

@filipjuszczakPosted 5 months ago

Hi!

I believe you're looking for the group class.

You can use it when you want to change a child element's style based on the parent's state - just like in your case.

Your code would look like this (I put the classes in the beginning):

<div className={`group flex w-full border mb-1 focus:border-none focus-within:ring focus-within:ring-lime hover:border-black rounded-lg ${error.mortgageAmount ? "border-red" : "border-slate-500"} `}>
  <div className={`group-focus-within:bg-lime w-12 text-center text-lg p-2 rounded-tl-lg rounded-bl-lg ${error.mortgageAmount ? "bg-red text-white" : "bg-slate-100 text-slate-700"}`}>
    £
  </div>
  <input
    value={mortgageAmount}
    onChange={(e) => setMortgageAmount(e.target.value)}
    className="w-full px-3 rounded-br-lg focus:outline-none focus:border-lime rounded-tr-lg h-11"
  />
</div>

This is the underlying CSS selector:

.group:focus-within .group-focus-within\:bg-lime

Marked as helpful

Faris•100

@FarisKarimPosted 5 months ago

@filipjuszczak Thanks for this it works great :)

Please log in to post a comment

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