JavaScript API & DOM Learning Projects

Welcome to my JavaScript practice repository! This collection of mini-projects demonstrates my ability to fetch data from APIs, manipulate the Document Object Model (DOM), and create beautiful, responsive user interfaces.

🚀 Projects Included

This repository contains three standalone mini-applications, all accessible via a unified navigation bar:

1. Random API Explorer (index.html)

A fun application that fetches data from two different public APIs using Axios.

• Features:
  • Fetch random cat facts (Text API)
  • Fetch random dog photos (Image API)
  • Asynchronous JavaScript (async/await)
  • Beautiful dark-mode UI with glassmorphism effects.

2. Global University Finder (index1.html)

A practical tool to search for universities across the globe.

• Features:
  • Fetches real-time data from the Hipolabs University API.
  • Takes user input to query specific countries.
  • Dynamically renders results as an interactive grid of cards.
  • Includes loading states and empty state handling.

3. JavaScript Learning Playground (index3.html)

A clean, document-focused page that demonstrates core JS concepts.

• Features:
  • Local array filtering (Flights & Hotels mock data).
  • Advanced DOM rendering with reusable functions.
  • Elegant UI matching the repository's dark mode aesthetic.

🛠️ Technologies Used

• HTML5 & CSS3: Semantic structure and modern styling (Flexbox, Grid, CSS Variables, Gradients).
• JavaScript (ES6+): DOM Manipulation, Event Listeners, Promises, Async/Await.
• Axios: HTTP client for making API requests.

💻 How to Run Locally

Since these are static HTML files with vanilla JavaScript, running them is incredibly simple!

1. Clone this repository:

   git clone https://github.com/yourusername/your-repo-name.git

2. Navigate to the project directory.
3. Open index.html (or any other HTML file) directly in your favorite web browser.
   • Alternatively, you can use an extension like VS Code Live Server to run a local development server.

✨ Learnings

Through building these mini-projects, I reinforced my understanding of:

• Handling asynchronous operations and promises.
• Extracting specific data from complex JSON responses.
• Updating the DOM dynamically based on API data.
• Creating a unified, premium design system across multiple standalone files without using a frontend framework.

---

Created as part of my Web Development Journey.