{"id":16212724,"url":"https://github.com/mdyeates/team-dashboard","last_synced_at":"2026-04-30T09:38:13.758Z","repository":{"id":135089409,"uuid":"595238555","full_name":"mdyeates/team-dashboard","owner":"mdyeates","description":"Quickly gather information, generate a dynamic HTML webpage and keep track of all your team members in one place.","archived":false,"fork":false,"pushed_at":"2023-01-31T18:34:43.000Z","size":8121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T21:51:44.802Z","etag":null,"topics":["htmlgen","javascript","nodejs","oop","ttd"],"latest_commit_sha":null,"homepage":"","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/mdyeates.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2023-01-30T17:20:58.000Z","updated_at":"2023-01-31T18:19:12.000Z","dependencies_parsed_at":"2023-06-01T06:30:31.498Z","dependency_job_id":null,"html_url":"https://github.com/mdyeates/team-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mdyeates/team-dashboard","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdyeates%2Fteam-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdyeates%2Fteam-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdyeates%2Fteam-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdyeates%2Fteam-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdyeates","download_url":"https://codeload.github.com/mdyeates/team-dashboard/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdyeates%2Fteam-dashboard/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32460781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"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":["htmlgen","javascript","nodejs","oop","ttd"],"created_at":"2024-10-10T10:53:23.032Z","updated_at":"2026-04-30T09:38:13.736Z","avatar_url":"https://github.com/mdyeates.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n  \u003c!-- PROJECT SHIELDS --\u003e\n\n[![Contributors][contributors-shield]][contributors-url]\n[![Forks][forks-shield]][forks-url]\n[![Stargazers][stars-shield]][stars-url]\n[![Issues][issues-shield]][issues-url]\n[![MIT License][license-shield]][license-url]\n[![LinkedIn][linkedin-shield]][linkedin-url]\n\n  \u003c!-- PROJECT LOGO --\u003e\n\n  \u003cbr /\u003e\n  \u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://github.com/mdyeates/team-dashboard\"\u003e\n      \u003cimg src=\"assets/images/logo.jpeg\" alt=\"Logo\" width=\"\" height=\"200\"\u003e\n    \u003c/a\u003e\n    \u003ch3 align=\"center\"\u003eTeam Dashboard\u003c/h3\u003e\n    \u003cp align=\"center\"\u003e\n    \u003cbr/\u003e\n    Quickly gather information, generate a dynamic HTML webpage and keep track of all your team members in one place.\n    \u003cbr/\u003e\n      \u003cbr/\u003e\n      Team Dashboard is proudly built by: Michael Yeates\n      \u003cbr/\u003e\n      \u003cbr/\u003e\n      \u003ca href=\"https://github.com/mdyeates/team-dashboard\"\u003e\u003cstrong\u003eExplore the docs »\u003c/strong\u003e\u003c/a\u003e\n      \u003cbr/\u003e\n      \u003cbr/\u003e\n      \u003ca href=\"https://drive.google.com/file/d/1_atUXTM-L9r4NccsrPaaWqPyNu37ftwH/view\"\u003eView Demo\u003c/a\u003e\n      ·\n      \u003ca href=\"https://github.com/mdyeates/team-dashboard/issues\"\u003eReport Bug\u003c/a\u003e\n      ·\n      \u003ca href=\"https://github.com/mdyeates/team-dashboard/issues\"\u003eRequest Feature\u003c/a\u003e\n    \u003c/p\u003e\n  \u003c/div\u003e\n  \n  \u003c!-- TABLE OF CONTENTS --\u003e\n\n  \u003cdetails\u003e\n    \u003csummary\u003eTable of Contents\u003c/summary\u003e\n    \u003col\u003e\n      \u003cli\u003e\n        \u003ca href=\"#about-the-project\"\u003eAbout The Project\u003c/a\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#screenshot\"\u003eScreenshot\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#built-with\"\u003eBuilt With\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#description\"\u003eDescription\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n          \u003ca href=\"#getting-started\"\u003eGetting Started\u003c/a\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#prerequisites\"\u003ePrerequisites\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\n          \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#functionality\"\u003eFunctionality\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#mobile-responsive\"\u003eMobile Responsive\u003c/a\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#contributing\"\u003eContributing\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#tests\"\u003eTests\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#questions\"\u003eQuestions\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#acknowledgments\"\u003eAcknowledgments\u003c/a\u003e\u003c/li\u003e\n    \u003c/ol\u003e\n  \u003c/details\u003e\n  \n  \u003c!-- ABOUT THE PROJECT --\u003e\n  \n  ## About The Project\n  \n  ### Screenshot\n  \n  [![Team Dashboard Screen Shot][product-screenshot]](https://drive.google.com/file/d/1_atUXTM-L9r4NccsrPaaWqPyNu37ftwH/view)\n  \n  \u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n  \n  ### Built With\n  \n  - ![JavaScript](https://img.shields.io/badge/JavaScript-20232A?style=for-the-badge\u0026logo=JavaScript\u0026logoColor=FCDD32)\n\n- ![Node.js](https://img.shields.io/badge/Node.js-376e05?style=for-the-badge\u0026logo=Node.js\u0026logoColor=white)\n\n- ![Bootstrap](https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge\u0026logo=Bootstrap\u0026logoColor=white)\n\n  \u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n  ### Description\n\n  Team Dashboard is a Node.js command-line application that takes in information about employees in a software engineering team and uses Object-Oriented Programming and Test-Driven Development to generate dynamic HTML. The user is prompted to enter the manager's information (name, ID, email, office number), then has the option to add an engineer or an intern by entering their information (name, ID, email, GitHub username or school). The application uses Inquirer for input, and has classes for Employee, Manager, Engineer, and Intern, with properties and methods unique to each role. Once the user has finished entering information, the HTML is generated and written to a file named team.html in the output folder.\n\n  \u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- GETTING STARTED --\u003e\n\n## Getting Started\n\nTo get a local copy up and running follow these simple example steps.\n\n### Prerequisites\n\n- npm\n  ```sh\n  npm install npm@latest -g\n  ```\n\n### Installation\n\n1. Clone the repo\n   ```sh\n   git clone https://github.com/mdyeates/team-dashboard.git\n   ```\n2. Install NPM packages\n   ```sh\n   npm install\n   ```\n\n  \u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n  \n  \u003c!-- USAGE EXAMPLES --\u003e\n  \n  ## Usage\n\n- For this project, I learnt about OOP principles, modularisation and closure. The code block below defines a closure used in this app, which is an inner function that has access to variables in an outer function even after the outer function returns. This closure is made by enclosing the function definition in an Immediately Invoked Function Expression (IIFE) (which is invoked immediately when the code is executed).\n\n- The `createTeam` function has a private variable called `team` defined within the closure and is accessible only to other functions defined within the same closure. The closure provides two methods for accessing the private `team` array: `addToTeam` and `getTeam`.\n\n- `addToTeam` accepts a team member as an argument and uses the push method to add it to the team array. `getTeam` returns the `team` array, allowing access to the members who have been added.\n\n- The closure acts like a \"backpack\" that carries the private information in `team` and the methods `addToTeam` and `getTeam` with it, allowing these variables and functions to persist even after the closure has been executed.\n\n```js\nconst createTeam = (function () {\n  const team = [];\n\n  return {\n    addToTeam: (member) =\u003e {\n      team.push(member);\n    },\n    getTeam: () =\u003e team,\n  };\n})();\n```\n\n- The functions and state defined within the closure can be easily reused across multiple parts of the codebase while maintaining their privacy and encapsulation, this improves code reuse, security, organisation and readability.\n\n```js\nfunction generateIntern() {\n  return internPrompts().then(({ name, id, email, school }) =\u003e {\n    const intern = new Intern(name, id, email, school);\n    createTeam.addToTeam(intern);\n  });\n}\n```\n\n### Functionality\n\n- The following animation demonstrates the applications functionality\n\n[![Functionality Gif][functionality-gif]](https://drive.google.com/file/d/1_atUXTM-L9r4NccsrPaaWqPyNu37ftwH/view)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n### Mobile Responsive\n\n- As demonstrated in the screenshot below, this application is designed to be responsive and adjust seamlessly to fit various screen sizes\n\n[![Responsiveness Screenshot][responsive-screenshot]](https://drive.google.com/file/d/1_atUXTM-L9r4NccsrPaaWqPyNu37ftwH/view)\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- LICENSE --\u003e\n\n## License\n\nDistributed under the MIT License. See `LICENSE.md` for more information.\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- CONTRIBUTING --\u003e\n\n## Contributing\n\nContributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.\n\nIf you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag \"enhancement\".\nDon't forget to give the project a star! Thanks again!\n\n1. Fork the Project\n2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the Branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n\u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n\u003c!-- TESTS --\u003e\n\n## Tests\n\nThis app utilises Jest. Simply run the command below to confirm that every aspect of your code passes the provided tests\n\n```sh\nnpm test\n```\n\n  \u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n  \n  \u003c!-- QUESTIONS --\u003e\n  \n  ## Questions\n\nIf you have any inquiries, don't hesitate to reach out to me via socials or by sending an email to \u003ca href=\"mailto:michael-yeates@outlook.com\"\u003emichael-yeates@outlook.com\u003c/a\u003e\n\n\u003ca href=\"https://www.linkedin.com/in/mdyeates/\"\u003eLinkedIn\u003c/a\u003e | \u003ca href=\"https://github.com/mdyeates/\"\u003eGitHub\u003c/a\u003e\n\nProject Link: [https://github.com/mdyeates/team-dashboard](https://github.com/mdyeates/team-dashboard)\n\n  \u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n  \n  \u003c!-- ACKNOWLEDGMENTS --\u003e\n  \n  ## Acknowledgments\n\n- [JS OOP: The Hard Parts](https://www.youtube.com/watch?v=aAAS9cEuFYI)\n\n  \u003cp align=\"right\"\u003e\u003ca href=\"#readme-top\"\u003eback to top\u003c/a\u003e\u003c/p\u003e\n\n  \u003c!-- MARKDOWN LINKS \u0026 IMAGES --\u003e\n\n[contributors-shield]: https://img.shields.io/github/contributors/mdyeates/team-dashboard.svg?style=for-the-badge\n[contributors-url]: https://github.com/mdyeates/team-dashboard/graphs/contributors\n[forks-shield]: https://img.shields.io/github/forks/mdyeates/team-dashboard.svg?style=for-the-badge\n[forks-url]: https://github.com/mdyeates/team-dashboard/network/members\n[stars-shield]: https://img.shields.io/github/stars/mdyeates/team-dashboard.svg?style=for-the-badge\n[stars-url]: https://github.com/mdyeates/team-dashboard/stargazers\n[issues-shield]: https://img.shields.io/github/issues/mdyeates/team-dashboard.svg?style=for-the-badge\n[issues-url]: https://github.com/mdyeates/team-dashboard/issues\n[license-shield]: https://img.shields.io/github/license/mdyeates/team-dashboard.svg?style=for-the-badge\n[license-url]: https://github.com/mdyeates/team-dashboard/blob/main/LICENSE.md\n[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge\u0026logo=linkedin\u0026colorB=555\n[linkedin-url]: https://linkedin.com/in/mdyeates\n\n  \u003c!-- UPDATE PLACEHOLDER IMAGES HERE --\u003e\n\n[product-screenshot]: assets/images/screenshot.png\n[functionality-gif]: assets/images/functionality.gif\n[responsive-screenshot]: assets/images/mobile-screenshot.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdyeates%2Fteam-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdyeates%2Fteam-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdyeates%2Fteam-dashboard/lists"}