University Finder

Project Overview

The University Finder was my first project diving into the world of APIs. It is a simple, yet functional tool that allows users to enter a country's name and retrieve a list of universities from that country. The primary goal was to learn and implement asynchronous JavaScript to fetch data from an external source (the Hipolabs Universities API) and dynamically display it on the page, demonstrating a fundamental skill for any modern web developer.

The JavaScript Logic Explained

The core of this application is the `getinfo` function, which handles the API request. It uses an `async/await` pattern to fetch data from the Hipolabs API based on the user's query. A key part of the logic is the `AbortController`, which cancels any previous pending request if the user types something new, preventing unnecessary API calls and race conditions.

// AbortController to cancel previous fetch requests
let controller;

async function getinfo(query, region) {
    if (!query.trim()) return;

    // Abort the previous API call if it exists
    if (controller) controller.abort();
    controller = new AbortController();

    // The API endpoint. Note: This uses 'http', which is the source of the problem.
    const api = "http://universities.hipolabs.com/search?";
    const url = `${api}name=${encodeURIComponent(query)}&country=${encodeURIComponent(region)}`;
    
    try {
        apistatus.innerText = "Loading...";
        let result = await fetch(url, { signal: controller.signal });
        let info =  await result.json();
        
        apistatus.innerText = "";
        addData(info); // Function to display the data in the UI

    } catch (err) {
        // Don't show an error if the request was intentionally aborted
        if (err.name === "AbortError") return;

        apistatus.innerText = "Could not fetch data.";
        console.error(err);
    }
}

Technology Stack

This project focuses on core frontend technologies to demonstrate a solid understanding of the fundamentals.

Challenges & Learning

As my first project involving an API, this was a significant learning milestone. The biggest challenge I encountered was a classic web security issue: **mixed content errors**. As you can see in the code, the Hipolabs API is served over the insecure `http` protocol. When the project is hosted on a secure `https` domain (which is standard practice today), modern browsers block the `http` API request to protect the user. This mismatch caused the application to fail in many environments.

Troubleshooting this issue was an invaluable lesson. It taught me the critical importance of HTTPS and why modern applications must rely on secure connections. While the issue persists due to the API's limitation, understanding the "why" behind it was the most important takeaway. This project solidified my understanding of asynchronous JavaScript, handling promises, and the practical realities of integrating with third-party services.