{"id":21357856,"url":"https://github.com/vanesa-r/tip-calculator-app","last_synced_at":"2025-03-16T06:15:40.396Z","repository":{"id":48245940,"uuid":"390447537","full_name":"Vanesa-R/tip-calculator-app","owner":"Vanesa-R","description":null,"archived":false,"fork":false,"pushed_at":"2021-08-04T17:54:36.000Z","size":1327,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-22T18:30:57.973Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/Vanesa-R.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}},"created_at":"2021-07-28T17:43:35.000Z","updated_at":"2021-08-04T17:54:39.000Z","dependencies_parsed_at":"2022-08-31T16:44:04.589Z","dependency_job_id":null,"html_url":"https://github.com/Vanesa-R/tip-calculator-app","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanesa-R%2Ftip-calculator-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanesa-R%2Ftip-calculator-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanesa-R%2Ftip-calculator-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Vanesa-R%2Ftip-calculator-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Vanesa-R","download_url":"https://codeload.github.com/Vanesa-R/tip-calculator-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830956,"owners_count":20354856,"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-11-22T05:12:54.201Z","updated_at":"2025-03-16T06:15:40.366Z","avatar_url":"https://github.com/Vanesa-R.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Table of contents\n- [Screenshots](#screenshots)\n- [Built with](#built-with)\n- [What I learned](#what-i-learned)\n- [The challenge](#the-challenge)\n- [Author](#author)\n\n\n### Screenshots\n\n#### Screenshot mobile\n![Diseño campos completados para móvil](screenshot/mobile-desing-completed_screenshot.png)\n\n#### Screenshot desktop\n![Diseño campos vacío para escritorio](screenshot/desktop-design-empty_screenshot.png)\n![Diseño con estados activados para escritorio](screenshot/desktop-design-active-states_screenshot.png)\n![Diseño con campos completados para escritorio](screenshot/desktop-design-completed_screenshot.png)\n\n\n## Built with\n- Semantic HTML5 markup\n- CSS custom properties\n- Flexbox\n- Mobile-first workflow\n- JavaScript\n\n**Wanna look how it works?** \n[Check it out!](https://vanesa-r.github.io/tip-calculator-app/) :point_left:\n\n## What I learned\n\nI discovered data- attribute.  It enabled  me to store additional information in the HTML elements.\n\n```html\n       \u003cinput type=\"button\" class=\"tip\" data-btn-tip=\"5\" value=\"5%\"\u003e\n```\n\nI discovered the CSS property caret-color. It enabled me to give more complete styles to the inputs.\n\n```css\n.input__text {\n  caret-color: hsl(172, 67%, 45%);\n}\n```\n\nThe best thing about this challenge has been to give functionality to the app with JavaScript: DOM manipulation, arrow functions, methods ..\n\n```js\nconst clean = () =\u003e {\n       if (enabledReset){\n             reset.addEventListener(\"click\", () =\u003e {\n                     bill.value = \"\";\n                     people.value = \"\";\n                     custom.value = \"\";\n                     tips.forEach(tip =\u003e {\n                            tip.classList.remove(\"tip--selected\");\n                            tipSelected = \"\";\n                     })\n                     empty(); \n                     states();\n             })\n       }\n}\n```\n\n## The challenge\n\nUsers should be able to:\n\n- View the optimal layout for the app depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Calculate the correct tip and total cost of the bill per person\n\n## Author\n\nVanesa Rodríguez\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanesa-r%2Ftip-calculator-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvanesa-r%2Ftip-calculator-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvanesa-r%2Ftip-calculator-app/lists"}