All solutions

Decided to use class binding and @apply directive from tailwind to display 3 different themes.

Calculation process might need some refactoring. But all calculation is handled in the service. And the calculator component use its signal property for displaying the memory.

Nice challenge, force you to understand how routing works. In this challenge I also use signal for changing the darkmode. I enjoy this challenge very much, and looking to extend it further with sorting and extra filter options.

question I have : Is there any better way to style <options> with tailwind? One way in Tailwind's documentation is to use dropdown states which will be displayed after a button is clicked. This is not really intuitive to display a select element...

In the component, I defined the ipAddress$ with the observable from the Ip address service. In the Ip address service, we define the IP details with merge operator of initialIPDetails and searchedIPdetails. The searchedIPdetails listened to the domain subject which get called from the component. I'm not sure about the initialization of the service tho, any suggestion is welcomed.

I feel like my template could be more simple. But I am not sure if there is a cleaner way. The *ngIf's for the validation seems to much in my taste.. maybe someone else has better way?

for example this is one of the input element

      <div class="data">
        <label for="year" [ngClass]="{'invalid': isInvalid(year)}">YEAR</label>
        <input id="year" type="number" formControlName="year" placeholder="YYYY" [ngClass]="{'invalid': isInvalid(year)}" />

        <div *ngIf="isInvalid(year)" class="alert">
          <div *ngIf="year.errors?.['required']">This field is required</div>
          <div *ngIf="year.errors?.['min'] || year.errors?.['max']">
            Must be in the past
          </div>
        </div>
      </div>
    </div>

I feel like it can be repeated with *ngFor but I don't think it is possible.. is it?

Does anybody actually read this? This is my third solution on FE mentor. But it seems no one paying attention. (please read this with curious intonation - no hate :D)

For the accordion effect, I am toggling the faq' property value (displayed). I map the FAQs content to have property displayed. I can then toggle the displayed property via the template statement that I bind in the question container. Then I add structural directive (*ngIf) in the icon to decide which Icon should be displayed.

Is there a better way?

Although I found my way around, I'm not sure about using the fix height for my .shell class. It feels like I'm hacking around and not confident enough that it is 100% responsive.

Would be nice if I could get some feedback on my qr-code.component.scss.