All solutions

I've used HTML, SCSS & Vanilla JS to develop the interactive card details form. The page is Mobile responsive and the confirm and continue buttons have functionality. Appropriate form validations and respective messages have been added. The form is validated with the click of Confirm button.

Added interactive color palette at the bottom-right corner in the Web version. Hovering it expands the palette.

Please review the code and suggest any improvements and/or modifications.

I've developed the solution using Angular, TS & SCSS. I've used 2 components viz., AppComponent for the overall layout and NotificationComponent for notification content. The notifications data is maintained in a separate file named data.ts. Maintaining variables in a file named vars.scss. Maintaining an interface for notification data objects in a file named interfaces.ts

Functionality:

• Mobile responsive solution
• Unread notifications have a red circle and different background color.
• Unread notifications are clickable and clicking one will mark it as read and update the unread notification count.
• Mark all as read will set all the notifications as read.
• Hover effects are added.

I've tried to match the designs as much as possible, the only part I am unsure about are some of the lighter colors & background colors.

1. Do I need any improvements with the folder structure?
2. Let me know how did I do overall considering best practices?
3. Would you suggest any improvements in any other area like, approach, code, folder structure, styling, best practices, or anything?

Please review the code and let me know if you have any suggestions for improving it.