A collection of small JavaScript projects demonstrating how to interact with public APIs using Axios. This suite includes three separate features: fetching fake user data, generating random dog images, and searching universities by country. It serves as a practical hands-on learning project for mastering API requests, async/await, DOM manipulation, and error handling in JavaScript.
Fetches a random fake user profile including:
- Name
- Gender
- Address
- Additional personal details
The details are displayed in JSON format inside the webpage.
Displays a random dog image with each button click.
Uses Axios to retrieve image URLs and updates the DOM instantly.
Enter any country name to retrieve a list of universities.
Useful for understanding:
- Query string API requests
- Rendering dynamic lists
- Handling API errors gracefully
Frontend:
- HTML
- CSS
- Vanilla JavaScript
Networking:
- Axios (CDN version)
APIs Used:
- RandomUser API
- Dog CEO API
- Hipolabs Universities API
- index.html – Page layout and UI
- style.css – Minimal styling
- json.js – All API logic and event handling
- Click Show the details
- A random fake user profile is fetched and displayed
- Click show
- A new dog image appears on the screen
- Enter a country (e.g., "Canada", "India", "Australia")
- Click search
- A list of universities loads below
- Making GET requests using Axios
- Understanding async/await
- Handling errors with
try/catch - Working with query parameters
- Updating DOM elements dynamically
- Rendering JSON responses on screen
- Creating reusable asynchronous functions
- How to fetch data from APIs efficiently
- How to debug API errors
- How to update UI elements using JavaScript
- How to format JSON output for readability
- How multiple APIs can be combined into one project
This project is for learning and practice purposes.
You may use or modify it freely.