Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mortgage Repayment Calculator built w/ Vite, SASS and TypeScript

Daniel ๐Ÿ›ธโ€ข 44,230

@danielmrz-dev

Desktop design screenshot for the Mortgage repayment calculator coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

๐Ÿ›ธ Hello FEM Community! I'm Daniel and this is my solution for this challenge! ๐Ÿ˜Š

๐Ÿ› ๏ธ Built with:

  • HTML ๐Ÿงพ
  • SASS ๐ŸŽจ
  • TypeScript ๐Ÿ’Ž
  • Vitejs โšก
  • BEM Notation ๐Ÿ…ฑ๏ธ
  • Mobile first workflow approach ๐Ÿ“ฒ

One more opportunity to practice Vite + TypeScript. Tried to make it a bit more accessible, so it's possible to complete the form using only the keyboard. Not sure if my approach was the best, but it's working.

Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. ๐Ÿ’Ÿ

If you have any suggestions on how I can improve this project, feel free to leave me a comment!

Feedback welcome ๐Ÿ˜Š

Community feedback

Ki'ara Colbertโ€ข 120

@kiaraaa123

Posted

This looks (and works) great, Daniel! It's so motivating to look through your solutions and see your progress over a year. Thanks for sharing your journey on here!

Marked as helpful

1

Daniel ๐Ÿ›ธโ€ข 44,230

@danielmrz-dev

Posted

@kiaraaa123 Thanks for your kind words, Ki'ara! I'm trying to become a better front-end developer project by project ๐Ÿ˜Š

I'm glad my learning journey motivates you ๐Ÿ’š

1
Fastcheettahhโ€ข 300

@fastcheetah

Posted

Hello sir, you did a great job could you tell me how you make your designs so accurate without pro membership

1

Daniel ๐Ÿ›ธโ€ข 44,230

@danielmrz-dev

Posted

Hello @fastcheetah! Thank you!

I use a browser extension called Pixel Perfect. But I don't think that's what makes my projects look close to the design. I really like paying attention to details and I spend some time trying to make them as accurate as possible.

0
Fastcheettahhโ€ข 300

@fastcheetah

Posted

thank you for the extension and the advice ill get the extension and does it let me check the design image files in the project and make it close to what i want? Thanks for replying again @danielmrz-dev

0

Please log in to post a comment

Log in with GitHub
Discord logo

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