{"id":17006979,"url":"https://github.com/karendouglas/bmi-calculator","last_synced_at":"2026-04-20T03:01:52.948Z","repository":{"id":247645778,"uuid":"807746970","full_name":"KarenDouglas/bmi-calculator","owner":"KarenDouglas","description":"Frontend, TDD,  React, Jest, React Testing Library *** Well Documented  ***Acheived  98% Test Coverage  ***Utilized TDD Approach- ***Acheived 93 Google Lighthouse score, ***Applied User-Centric Testing Standards  of React Testing Library ***) Implemented Component-based, Mobile-First and fully responsive.  ","archived":false,"fork":false,"pushed_at":"2024-09-05T14:24:03.000Z","size":1248,"stargazers_count":1,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T19:20:03.409Z","etag":null,"topics":["documentation","flexbox","html-css","jest","mobile-first","netlify-deployment","react","react-testing-library","responsive-web-design","tdd","vite"],"latest_commit_sha":null,"homepage":"https://bmi-calculator-challenge.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KarenDouglas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-05-29T17:34:11.000Z","updated_at":"2024-09-23T18:09:53.000Z","dependencies_parsed_at":"2024-07-09T23:09:39.803Z","dependency_job_id":null,"html_url":"https://github.com/KarenDouglas/bmi-calculator","commit_stats":null,"previous_names":["karendouglas/bmi-calculator"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/KarenDouglas/bmi-calculator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarenDouglas%2Fbmi-calculator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarenDouglas%2Fbmi-calculator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarenDouglas%2Fbmi-calculator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarenDouglas%2Fbmi-calculator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KarenDouglas","download_url":"https://codeload.github.com/KarenDouglas/bmi-calculator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KarenDouglas%2Fbmi-calculator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32031070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T00:18:06.643Z","status":"online","status_checked_at":"2026-04-20T02:00:06.527Z","response_time":94,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["documentation","flexbox","html-css","jest","mobile-first","netlify-deployment","react","react-testing-library","responsive-web-design","tdd","vite"],"created_at":"2024-10-14T05:24:18.690Z","updated_at":"2026-04-20T03:01:52.931Z","avatar_url":"https://github.com/KarenDouglas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Body Mass Index Calculator solution\n![Coverage Badge](https://img.shields.io/badge/coverage-98%25-brightgreen)\n![License](https://img.shields.io/badge/license-MIT-blue)\n![Last Commit](https://img.shields.io/github/last-commit/KarenDouglas/bmi-calculator)\n![](./client/preview.png)\n\nThis is a solution to the [Body Mass Index Calculator challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/body-mass-index-calculator-brrBkfSz1T). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [Main Features](#main-features)\n  - [Installation and Setup](#installation-and-setup)\n  - [Links](#links)\n- [Directory Structure](#directory-structure)\n- [Test Coverage](#test-coverage)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [Road Map](#road-map)\n  - [Test Plan](#test-plan)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n\n\n\n## Overview\n\n### Main Features\nYour users should be able to:\n\n- Select whether they want to use metric or imperial units\n- Enter their height and weight\n- See their BMI result, with their weight classification and healthy weight range\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\n### Installation and Setup\n### Getting Started\n1. Clone the code and prepare the environment\n```bash\ngit clone https://github.com/KarenDouglas/bmi-calculator\n\ncd client\n```\n\n2. Install dependencies\n\n```bash\nnpm i\n```\n3. To Start dev server\n```bash\nnpm run dev\n```\n4. To run tests\n```bash\nnpm run test\n\n# to keep test running in background\nnpm run watch \n# then type \"a\" to run all tests\n\n# to check test coverage\nnpm run coverage\n```\n\n\n\n\n### Links\n\n- Solution URL: [https://www.frontendmentor.io/solutions/tdd-jest-react-testing-library-react-vanilla-css-LLXME3recx](https://www.frontendmentor.io/solutions/tdd-jest-react-testing-library-react-vanilla-css-LLXME3recx)\n- Live Site URL: [https://bmi-calculator-challenge.netlify.app/](https://bmi-calculator-challenge.netlify.app/)\n\n## Directory Structure\n\n```\nclient/\n├─── dist/\n│├─── assets/\n│└── index.html\n├─── node_modules/\n├─── src/\n│├─── assets/\n│├─── components/\n││├─── AdviceComponent\n││├─── BmiCalcComponent\n││├─── BmiDefinitionComponent\n││└── LimitationsComponent\n│├─── App.jsx\n│├─── index.css\n│└── main.jsx\n├─── tests/\n││├─── AdviceComponent.test.js\n││├─── bmiCalcCompImperial.test.js\n││├─── bmiCalcCompMetric.test.js\n││└──LimitationsComponent.test.js\n├─── eslintrc.cjs\n├─── .gitignore\n├─── babel.config.cjs\n├─── index.html\n├─── package-lock.json\n├─── vite.config.js\n├─── jestgit a.config.js\n├─── LICENSE\n├─── README.md\n\n```\n## Test Coverage\n\n![Coverage Badge](https://img.shields.io/badge/coverage-98%25-brightgreen)\n\nThe current test coverage for this project is as follows:\n\n| File                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |\n|------------------------------|---------|----------|---------|---------|-------------------|\n| All files                    |   98.19 |    88.88 |   95.23 |   98.19 |                   |\n| assets                       |     100 |      100 |     100 |     100 |                   |\n| ├── icon-age.svg             |     100 |      100 |     100 |     100 |                   |\n| ├── icon-eating.svg          |     100 |      100 |     100 |     100 |                   |\n| ├── icon-exercise.svg        |     100 |      100 |     100 |     100 |                   |\n| ├── icon-gender.svg          |     100 |      100 |     100 |     100 |                   |\n| ├── icon-muscle.svg          |     100 |      100 |     100 |     100 |                   |\n| ├── icon-pregnancy.svg       |     100 |      100 |     100 |     100 |                   |\n| ├── icon-race.svg            |     100 |      100 |     100 |     100 |                   |\n| ├── icon-sleep.svg           |     100 |      100 |     100 |     100 |                   |\n| ├── image-man-eating.webp    |     100 |      100 |     100 |     100 |                   |\n| └── logo.svg                 |     100 |      100 |     100 |     100 |                   |\n| assets/css                   |     100 |      100 |     100 |     100 |                   |\n| ├── adviceStyles.css         |     100 |      100 |     100 |     100 |                   |\n| ├── bmiCalcStyles.css        |     100 |      100 |     100 |     100 |                   |\n| ├── bmiDefStyles.css         |     100 |      100 |     100 |     100 |                   |\n| └── limitationsStyles.css    |     100 |      100 |     100 |     100 |                   |\n| components                   |   97.93 |    88.88 |   95.23 |   97.93 |                   |\n| ├── AdviceComponent.jsx      |     100 |      100 |     100 |     100 |                   |\n| ├── BmiCalcComponent.jsx     |   97.87 |    88.88 |   94.44 |   97.87 | 62,208            |\n| ├── BmiDefinitionComponent.jsx |   100 |      100 |     100 |     100 |                   |\n| └── LimitationsComponent.jsx |     100 |      100 |     100 |     100 |                   |\n\n\n## My process\n\n### Built with\n\n- [React](https://reactjs.org/) - JS library\n- TDD\n- Jest\n- React Testing Library\n- Vite\n- NetLify\n- Mobile-first workflow\n- CSS custom properties\n- Flexbox\n- Semantic HTML5 markup\n\n### Road Map\n- Phase 1: Break project down to components\n- Phase 2: Write test for a component\n- Phase 3: Pass test for component\n- Phase 4: Repeat writing and passing test for each component\n- Phase 5: Style component  using mobile first approach one component at a time. \n\n\n### Test Plan\n- Unit test for components\n- Integration tests for user flows and interactions \n\n### What I learned\n\n### Jest \nDuring the process of building my project, I learned extensively about Jest and its integration with Babel configurations, particularly for interpreting images. I became proficient in using Jest's matchers to test various conditions, such as truthiness, numerical values, and string patterns. Additionally, I explored the \"not\" modifier, which allows for more flexible and comprehensive testing by inverting matchers. This experience has enhanced my understanding of creating robust and reliable test suites for JavaScript applications.\n\n### React Testing Library\nWhile using React Testing Library (RTL), I learned its philosophy for creating maintainable tests that facilitate refactoring and ensure that software components function correctly from a user's perspective. RTL encourages avoiding internal state and methods of components, focusing instead on how users interact with the interface. I also delved into different query types, such as getBy, queryBy, and findBy, understanding the specific scenarios for each and prioritizing queries based on accessibility to improve user experience. Additionally, I gained experience in rendering components for testing and using fire events to simulate user interactions, which is crucial for effective integration tests.\n\n### Accessibility\nReact Testing Library surprisingly taught me a lot about accessibility through its emphasis on prioritizing queries based on accessibility principles. I learned about accessible names, the importance of elements with roles, and which elements should not be aria-labeled. This knowledge has significantly changed the way I think about and interact with the DOM, making me more mindful of creating accessible web applications.\n\n\n### Continued development\n\nIn my continued development, I aim to explore more features of Jest and RTL, such as using mock functions to better isolate certain parts of my code and test them effectively. I also plan to dive into RTL user events, which are recommended over fire events for simulating user interactions. Furthermore, I want to improve my ability to estimate project completion times, acknowledging that I often underestimate the learning curve and the initial challenges before developing a workflow. For future projects, I am committed to incorporating CSS animations into my websites to create a more pleasant viewing experience.\n\n\n### Useful resources\n\n- [Testing Library](https://testing-library.com/docs/react-testing-library/intro/) \n- [Jest Documentation](https://jestjs.io/docs/getting-started)  \n\n\n\n## Author\n\n- LinkedIn: [@KarenDouglas](https://www.linkedin.com/in/karen-douglas-344974246/)\n- Frontend Mentor: [@KarenDouglas](https://www.frontendmentor.io/profile/KarenDouglas)\n- Twitter: [@CodeNoob4Life](https://twitter.com/CodeNoob4Life)\n\n\n## Acknowledgments\n\nThank you so much to Frontend Mentor for providing such great challenges that always help me to grow\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarendouglas%2Fbmi-calculator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkarendouglas%2Fbmi-calculator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkarendouglas%2Fbmi-calculator/lists"}