{"id":28959478,"url":"https://github.com/itsamritabhowmick/js_api_random_user","last_synced_at":"2026-04-28T00:31:35.144Z","repository":{"id":300544498,"uuid":"1006434234","full_name":"itsamritabhowmick/js_API_random_user","owner":"itsamritabhowmick","description":"Testing Random User API","archived":false,"fork":false,"pushed_at":"2025-06-22T09:13:30.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-22T10:23:34.954Z","etag":null,"topics":["api-rest","html-css-javascript","js","json"],"latest_commit_sha":null,"homepage":"https://itsamritabhowmick.github.io/js_API_random_user/","language":"JavaScript","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/itsamritabhowmick.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,"zenodo":null}},"created_at":"2025-06-22T09:03:39.000Z","updated_at":"2025-06-22T09:15:58.000Z","dependencies_parsed_at":"2025-06-22T10:23:38.811Z","dependency_job_id":null,"html_url":"https://github.com/itsamritabhowmick/js_API_random_user","commit_stats":null,"previous_names":["itsamritabhowmick/js_api_random_user"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/itsamritabhowmick/js_API_random_user","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsamritabhowmick%2Fjs_API_random_user","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsamritabhowmick%2Fjs_API_random_user/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsamritabhowmick%2Fjs_API_random_user/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsamritabhowmick%2Fjs_API_random_user/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsamritabhowmick","download_url":"https://codeload.github.com/itsamritabhowmick/js_API_random_user/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsamritabhowmick%2Fjs_API_random_user/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261577978,"owners_count":23179767,"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":["api-rest","html-css-javascript","js","json"],"created_at":"2025-06-24T00:01:51.345Z","updated_at":"2026-04-28T00:31:35.138Z","avatar_url":"https://github.com/itsamritabhowmick.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 👤 Random User API App\n\nThis is a simple web application that dynamically fetches and displays random user data using the [Random User API](https://randomuser.me/). It generates multiple user cards on page load, showcasing information such as name, email, mobile number, age, and profile picture. The application is built using vanilla JavaScript, HTML, and CSS.\n\n---\n\n## 📌 Table of Contents\n\n- [Features](#features)\n- [Demo](#demo)\n- [Technologies Used](#technologies-used)\n- [Project Structure](#project-structure)\n- [Getting Started](#getting-started)\n- [How It Works](#how-it-works)\n- [Screenshots](#screenshots)\n- [API Reference](#api-reference)\n- [Author](#author)\n\n---\n\n## 🌟 Features\n\n- Generates 5 random user cards automatically on page load.\n- Displays:\n  - User profile image\n  - Full name\n  - Email address\n  - Mobile number\n  - Age\n- Responsive and styled layout using CSS Flexbox.\n- Asynchronous API integration using `fetch()`.\n\n---\n\n## 🚀 Demo\n\n\u003e 📎 **Demo URL** : [_Visit the site_](https://itsamritabhowmick.github.io/js_API_random_user/)\n\n---\n\n## 🛠️ Technologies Used\n\n- **HTML5** – Markup structure\n- **CSS3** – Styling the user cards and layout\n- **JavaScript (ES6+)** – DOM manipulation and asynchronous API calls\n- **[RandomUser API](https://randomuser.me/)** – RESTful service for generating random user data\n\n---\n\n## 📁 Project Structure\n\n```\nrandom-user-api-project/\n│\n├── index.html          # Main HTML file\n├── style.css           # Stylesheet for layout and card design\n├── index.js            # JavaScript logic for DOM \u0026 API integration\n└── README.md           # Project documentation\n```\n\n---\n\n## 🧰 Getting Started\n\nTo run this project locally:\n\n### Prerequisites\n\n- A modern web browser (Chrome, Firefox, Edge, etc.)\n\n### Steps\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-username/random-user-api-project.git\n   ```\n\n2. Navigate to the project folder:\n\n   ```bash\n   cd random-user-api-project\n   ```\n\n3. Open `index.html` in any browser to view the app.\n\n---\n\n## ⚙️ How It Works\n\n1. On loading the page, a loop creates 5 empty user cards using DOM manipulation.\n2. For each card, an API call is made to `https://randomuser.me/api/`.\n3. The response JSON includes the user’s:\n   - Picture (`picture.large`)\n   - Name (`name.first` + `name.last`)\n   - Email (`email`)\n   - Phone number (`phone`)\n   - Age (`dob.age`)\n4. The information is inserted into the corresponding DOM elements.\n\n---\n\n## 🔗 API Reference\n\n**Endpoint**:  \n`https://randomuser.me/api/`\n\n**Sample Response Structure**:\n\n```json\n{\n  \"results\": [\n    {\n      \"name\": { \"first\": \"John\", \"last\": \"Doe\" },\n      \"email\": \"john.doe@example.com\",\n      \"phone\": \"123-456-7890\",\n      \"dob\": { \"age\": 30 },\n      \"picture\": {\n        \"large\": \"https://randomuser.me/api/portraits/men/1.jpg\"\n      }\n    }\n  ]\n}\n```\n\n---\n\n## 👨‍💻 Authors\n\n**Amrita Bhowmick**  \nM.Sc. in Computer Science  \nSurendranath College\n\n- GitHub: [@itsamritabhowmick](https://github.com/itsamritabhowmick/)\n- LinkedIn: [@itsamritabhowmick](https://www.linkedin.com/in/itsamritabhowmick/)\n\n**Priyam Bhattacharya**  \nM.Sc. in Computer Science  \nUniversity of Calcutta\n\n- GitHub: [@itspriyambhattacharya](https://github.com/itspriyambhattacharya)\n- LinkedIn: [@itspriyambhattacharya](https://www.linkedin.com/in/itspriyambhattacharya/)\n\n---\n\n## 📌 Future Enhancements (Suggestions)\n\n- Add \"Generate New User\" button.\n- Enable filtering by gender, nationality, or age group.\n- Include loading spinner during API fetch.\n- Use localStorage to persist users on reload.\n- Add dark/light theme toggle.\n\n---\n\n## 📄 License\n\nThis project is open-source and available under the [MIT License](LICENSE).\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsamritabhowmick%2Fjs_api_random_user","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsamritabhowmick%2Fjs_api_random_user","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsamritabhowmick%2Fjs_api_random_user/lists"}