apna-college · akshattsingh · Jan 30, 2026 · Jan 30, 2026 · Jan 30, 2026
diff --git a/Akshat Singh/README.md b/Akshat Singh/README.md
@@ -0,0 +1,21 @@
+# 🌍 Global University Finder
+
+A web application to search universities worldwide by country and Indian states.
+
+## 👨‍💻 Author
+Akshat Singh
+
+## 🚀 Features
+- Search universities by country
+- Search Indian universities by state
+- Uses Hipolabs Universities API
+- Clean UI with responsive design
+
+## 🛠 Tech Stack
+- HTML
+- CSS
+- JavaScript
+- Axios
+
+## API used 
+   University finder API - "http://universities.hipolabs.com/search"
diff --git a/Akshat Singh/app.js b/Akshat Singh/app.js
@@ -0,0 +1,96 @@
+const BASE_URL = "http://universities.hipolabs.com/search";
+
+// ---------------- COUNTRY SEARCH ----------------
+const countryInput = document.querySelector("#countryInput");
+const countryBtn = document.querySelector("#country");
+
+countryBtn.addEventListener("click", searchByCountry);
+countryInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+        searchByCountry();
+    }
+});
+
+//function to search universities in required country using api
+
+async function searchByCountry() {
+    let country = countryInput.value.trim();
+    if (!country) return;
+
+    let res = await axios.get(`${BASE_URL}?country=${country}`);
+
+    console.log(`Universities in ${country.toUpperCase()}:`);
+    res.data.forEach((col, index) => {
+        console.log(`${index + 1}. ${col.name}`);
+    });
+
+    showCountry(res.data);
+}
+
+//function to display universities in the form of unordered list
+
+function showCountry(colleges) {
+    let list = document.querySelector("#clist");
+    list.innerHTML = "";
+
+    if (colleges.length === 0) {
+        list.innerText = "No universities found";
+        return;
+    }
+
+    colleges.forEach(col => {
+        let li = document.createElement("li");
+        li.innerText = col.name;
+        list.appendChild(li);
+    });
+}
+
+// ---------------- STATE SEARCH ----------------
+const stateInput = document.querySelector("#stateInput");
+const stateBtn = document.querySelector("#state");
+
+stateBtn.addEventListener("click", searchByState);
+stateInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") {
+        searchByState();
+    }
+});
+
+//function to search universities in required state of India using api
+
+async function searchByState() {
+    let state = stateInput.value.trim().toLowerCase();
+    if (!state) return;
+
+    let res = await axios.get(`${BASE_URL}?country=India`);
+
+    let filtered = res.data.filter(col =>
+        col["state-province"] &&
+        col["state-province"].toLowerCase().includes(state)
+    );
+
+    console.log(`Universities in ${state.toUpperCase()}:`);
+    filtered.forEach((col, index) => {
+        console.log(`${index + 1}. ${col.name}`);
+    });
+
+    showState(filtered);
+}
+
+//function to display universities in the form of unordered list 
+
+function showState(colleges) {
+    let list = document.querySelector("#slist");
+    list.innerHTML = "";
+
+    if (colleges.length === 0) {
+        list.innerText = "No colleges found for this state";
+        return;
+    }
+
+    colleges.forEach(col => {
+        let li = document.createElement("li");
+        li.innerText = col.name;
+        list.appendChild(li);
+    });
+}
diff --git a/Akshat Singh/index.html b/Akshat Singh/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Global University Finder</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.13.2/dist/axios.min.js"></script>
+
+    <div class="container">
+        <h1>🌍 Global University Finder</h1>
+
+        <div class="search-box">
+            <h3>Search by Country</h3>
+            <div class="search-area">
+                <input type="text" id="countryInput" placeholder="Enter country name">
+                <button id="country">Search</button>
+            </div>
+            <ul id="clist"></ul>
+        </div>
+
+        <div class="search-box">
+            <h3>Search by State (India)</h3>
+            <div class="search-area">
+                <input type="text" id="stateInput" placeholder="Enter state name">
+                <button id="state">Search</button>
+            </div>
+            <ul id="slist"></ul>
+        </div>
+
+        <div class="footer">
+            Built using Hipolabs Universities API
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Akshat Singh/style.css b/Akshat Singh/style.css
@@ -0,0 +1,120 @@
+/* Google Font */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* Main Container */
+.container {
+    background: #ffffff;
+    width: 100%;
+    max-width: 700px;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+/* Title */
+h1 {
+    text-align: center;
+    margin-bottom: 25px;
+    color: #333;
+}
+
+/* Search Section */
+.search-box {
+    margin-bottom: 30px;
+}
+
+.search-box h3 {
+    margin-bottom: 10px;
+    color: #555;
+}
+
+/* Input + Button */
+.search-area {
+    display: flex;
+    gap: 10px;
+}
+
+input {
+    flex: 1;
+    padding: 12px 15px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    outline: none;
+    font-size: 15px;
+}
+
+input:focus {
+    border-color: #667eea;
+}
+
+/* Buttons */
+button {
+    padding: 12px 20px;
+    background: #667eea;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 15px;
+    transition: background 0.3s ease, transform 0.2s ease;
+}
+
+button:hover {
+    background: #5a67d8;
+    transform: translateY(-2px);
+}
+
+/* Result List */
+ul {
+    margin-top: 15px;
+    max-height: 200px;
+    overflow-y: auto;
+    padding-left: 20px;
+}
+
+ul li {
+    margin-bottom: 8px;
+    color: #333;
+    line-height: 1.5;
+}
+
+/* Empty message */
+ul:empty::before {
+    content: "Results will appear here...";
+    color: #888;
+    font-style: italic;
+}
+
+/* Scrollbar */
+ul::-webkit-scrollbar {
+    width: 6px;
+}
+
+ul::-webkit-scrollbar-thumb {
+    background: #667eea;
+    border-radius: 10px;
+}
+
+/* Footer (optional) */
+.footer {
+    text-align: center;
+    margin-top: 20px;
+    font-size: 14px;
+    color: #777;
+}