{"id":20603475,"url":"https://github.com/danpoynor/public-api-request-example-project","last_synced_at":"2026-04-11T17:03:38.764Z","repository":{"id":116654732,"uuid":"441999854","full_name":"danpoynor/public-api-request-example-project","owner":"danpoynor","description":"Full Stack JavaScript Techdegree: Project 05","archived":false,"fork":false,"pushed_at":"2022-01-26T19:03:09.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-17T02:11:50.489Z","etag":null,"topics":["css3","flexbox","html5","randomuser-api","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://danpoynor.github.io/public-api-request-example-project/","language":"JavaScript","has_issues":false,"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/danpoynor.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":"2021-12-26T23:02:09.000Z","updated_at":"2022-01-26T19:06:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"aa54240a-b4d6-4437-93cf-52fefd2c9b2b","html_url":"https://github.com/danpoynor/public-api-request-example-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpoynor%2Fpublic-api-request-example-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpoynor%2Fpublic-api-request-example-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpoynor%2Fpublic-api-request-example-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpoynor%2Fpublic-api-request-example-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danpoynor","download_url":"https://codeload.github.com/danpoynor/public-api-request-example-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242249030,"owners_count":20096781,"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":["css3","flexbox","html5","randomuser-api","vanilla-javascript"],"created_at":"2024-11-16T09:17:23.640Z","updated_at":"2025-12-31T00:59:53.729Z","avatar_url":"https://github.com/danpoynor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Public API Requests Project\n\nThis web based app is for a fictional company called Awesome Startup, a distributed company with remote employees working all over the world. They need a smart way for employees to share contact information with each other. The app uses the Random User Generator API ([https://randomuser.me/](https://randomuser.me/)) to grab information for 12 random \u0026ldquo;employees\u0026rdquo;, and use that data to build a prototype for an Awesome Startup employee directory. The returned JSON data is parsed so that 12 employees are listed in a grid with their thumbnail image, full name, email, and location. Clicking the employee\u0026rsquo;s image or name will open a modal window with more detailed information, such as the employee\u0026rsquo;s birthday and address.\n\nLive Preview: https://danpoynor.github.io/public-api-request-example-project/\n\n---\n\n## Code Validation\n\n[W3C HTML Validation ](https://validator.w3.org/nu/?doc=https%3A%2F%2Fdanpoynor.github.io%2Fpublic-api-request-example-project%2F)\u003cbr\u003e\n[W3C CSS Validation](http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fdanpoynor.github.io%2Fpublic-api-request-example-project%2Fcss%2Fstyles.css\u0026profile=css3svg\u0026usermedium=all\u0026warning=1\u0026vextwarning=\u0026lang=en)\n\n---\n\n## Features Include\n\n- Random employee data pulled from the Random User Generator API\n- 12 employees displayed in a flex format\n- Real-time search to filter employees name\n- 'No results' message shown when no employees match the search\n- Modal dialog with more detailed information\n- Modal dialog carousel with circular Previous/Next navigation\n- Responsive mobile-first design\n\n---\n\n## Style Changes Made\n\n- Colors updated including background, font colors, and button colors.\n- Card box shadows added to default view and updated rollover state\n- CSS custom properties updated\n\n---\n\n## Code Organization\n\n\u003cdetails\u003e\n\u003csummary\u003eexpand/collapse\u003c/summary\u003e\n\n```javascript\nEmployee{}  /* class template used for creating employee objects */\n\n/* Modal dialog feature */\ngetEmployee(email) // helper function gets a single employees data from `window.employees[]`\nmodalUpdate(employee) // updates the modal dialog with the employee's data */\nmodalCarousel(direction) // calls `modalUpdate(employee)` based on the `direction`\nmodalListeners() // adds listeners to the modal, calls `modalCarousel(direction)`\nmodalCreate(employee) // creates a modal dialog then calls `modalListeners()`\n\n/* Card feature */\ncardListener() // adds listeners to the cards, calls `modalCreate(getEmployee(email))`\ncardCreate(employee) // creates a card for an employee\n\n/* Search feature */\nsearchNoResultsMessage() // shows a message if no employees are shown\nsearchFilter(searchInput) // filters employees based on the search input, calls `searchNoResultsMessage()`\nsearchListener() // adds 'keyup' and 'input' listeners to search input, calls `searchFilter(searchInput)`\nsearchCreate() // creates a search input then calls `searchListener()`\n\n/* Employees feature */\nemployeesGet() // gets employees from API, calls `Employee{}` for each, populates `window.employees[]`\nemployeesShow() // calls `cardCreate(employee)` for each employee then `cardListener()` when done\n\n/* Initialization */\nemployeesGet().then(() =\u003e {\n  employeesShow();\n  searchCreate();\n});\n```\n\n\u003c/details\u003e\n\n--- \n\n## Technologies Used\n\n- HTML\n- CSS\n- JavaScript\n- Random User Generator API\n\n---\n\n## Potential Improvements\n\n- When only one search result and modal is presented, don't include the carousel navigation\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanpoynor%2Fpublic-api-request-example-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanpoynor%2Fpublic-api-request-example-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanpoynor%2Fpublic-api-request-example-project/lists"}