{"id":22975793,"url":"https://github.com/vdsbenoit/css_exo-frontend_mentor","last_synced_at":"2026-01-11T17:53:26.895Z","repository":{"id":258206423,"uuid":"839962720","full_name":"vdsbenoit/css_exo-frontend_mentor","owner":"vdsbenoit","description":"CSS exercice from Frontend Mentor to practice Tailwind","archived":false,"fork":false,"pushed_at":"2024-10-16T13:28:08.000Z","size":2154,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"exo-2_payment_calculator","last_synced_at":"2025-02-07T22:49:41.788Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vdsbenoit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-08T17:17:39.000Z","updated_at":"2024-10-16T13:28:12.000Z","dependencies_parsed_at":"2024-10-18T07:31:32.143Z","dependency_job_id":null,"html_url":"https://github.com/vdsbenoit/css_exo-frontend_mentor","commit_stats":null,"previous_names":["vdsbenoit/css_exo-frontend_mentor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdsbenoit%2Fcss_exo-frontend_mentor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdsbenoit%2Fcss_exo-frontend_mentor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdsbenoit%2Fcss_exo-frontend_mentor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vdsbenoit%2Fcss_exo-frontend_mentor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vdsbenoit","download_url":"https://codeload.github.com/vdsbenoit/css_exo-frontend_mentor/tar.gz/refs/heads/exo-2_payment_calculator","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246777833,"owners_count":20832032,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-15T00:39:21.692Z","updated_at":"2026-01-11T17:53:26.868Z","avatar_url":"https://github.com/vdsbenoit.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Mortgage repayment calculator solution\n\nThis is a solution to the [Mortgage repayment calculator challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/mortgage-repayment-calculator-Galx1LXK73). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Frontend Mentor - Mortgage repayment calculator solution](#frontend-mentor---mortgage-repayment-calculator-solution)\n  - [Table of contents](#table-of-contents)\n  - [Overview](#overview)\n    - [The challenge](#the-challenge)\n    - [Screenshots](#screenshots)\n      - [Desktop](#desktop)\n      - [Mobile](#mobile)\n    - [Links](#links)\n  - [My process](#my-process)\n    - [Built with](#built-with)\n    - [What I learned](#what-i-learned)\n  - [Author](#author)\n\n**Note: Delete this note and update the table of contents based on what sections you keep.**\n\n## Overview\n\n### The challenge\n\nUsers should be able to:\n\n- Input mortgage information and see monthly repayment and total repayment amounts after submitting the form\n- See form validation messages if any field is incomplete\n- Complete the form only using their keyboard\n- View the optimal layout for the interface depending on their device's screen size\n- See hover and focus states for all interactive elements on the page\n\n### Screenshots\n\n#### Desktop\n\n\u003cimg src=\"./screenshots/screenshot-md-empty.png\" style=\"zoom: 80%;\" /\u003e\n\n\u003cimg src=\"./screenshots/screenshot-md-full.png\" style=\"zoom:80%;\" /\u003e\n\n#### Mobile\n\n| \u003cimg src=\"./screenshots/screenshot-sm-empty.png\" style=\"zoom: 25%;\" /\u003e | \u003cimg src=\"./screenshots/screenshot-sm-full.png\" style=\"zoom: 25%;\" /\u003e |\n| ------------------------------------------------------------ | ------------------------------------------------------------ |\n\n### Links\n\n- Solution URL: [GitHub Pages](https://vdsbenoit.github.io/css_exo-frontend_mentor)\n\n## My process\n\n### Built with\n\n- Semantic HTML5 markup\n- Tailwind\n- Vue 3 (composition API)\n- Nuxt 3\n- Prettier validation enforced\n\n### What I learned\n\nThere isn't any native ways to format an `input` field of type `number`. \nIn order to have a `,` separator every 3 digit (e.g. currencies), one needs to write some javascript code to format the `input` element, then cast the value back to a `number` again for further processing.\n\n## Author\n\n- Website - [frite.dev](https://frite.dev)\n- Frontend Mentor - [@vdsbenoit](https://www.frontendmentor.io/profile/vdsbenoit)\n- Linkedin - [@vdsbenoit](https://www.linkedin.com/in/vdsbenoit/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdsbenoit%2Fcss_exo-frontend_mentor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvdsbenoit%2Fcss_exo-frontend_mentor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvdsbenoit%2Fcss_exo-frontend_mentor/lists"}