apna-college · ashleshameshram · Apr 8, 2026 · Apr 8, 2026
diff --git a/apiProject/README.md b/apiProject/README.md
@@ -0,0 +1,22 @@
+# 🎓 UniQuest India — Statewise University Finde
+A web app that uses University API to fetch and display universities across all states of India
+
+## 📌 About The Project
+UniQuest India is a mini web project that allows users to search and explore universities statewise across India using a public REST API. Instead of manually searching, users can simply select or type a state name and instantly get a list of universities available in that region — all fetched in real-time using an API call.
+
+## 🔌 API Used
+This project uses the Hipolabs University API - GET http://universities.hipolabs.com/search?country=india
+
+## 🙌 Acknowledgements
+1. Apna College — For the Delta course and this assignment 💙
+2. Hipolabs API — For the free university data API
+
+## ✨ Features
+1. 🔍 Search universities by state name in India
+2. 🌐 Fetches live data using REST API
+3. 📋 Displays university name, state.
+4. ⚡ Dynamic rendering with JavaScript
+
+## 🙋‍♂️ Author
+Ashlesha Meshram
+GitHub: ashleshameshram
diff --git a/apiProject/app.js b/apiProject/app.js
@@ -0,0 +1,30 @@
+let url = "http://universities.hipolabs.com/search?country=india";
+
+let btn = document.querySelector("button");
+btn.addEventListener("click", async() =>{
+    let state = document.querySelector("input").value;
+    let colArr = await getCollege(state);
+    show(colArr);
+})
+function show(colArr){
+    let list = document.querySelector("ul");
+    list.innerText = "";
+    for(col of colArr){
+        let li = document.createElement("li");
+        list.appendChild(li);
+        li.innerText = col.name;
+    }
+}
+async function getCollege(state) {
+    try{
+        let res = await axios.get(url);
+        let filtered = res.data.filter(col => 
+            col["state-province"] && 
+            col["state-province"].toLowerCase().includes(state.toLowerCase())
+        );
+       return filtered;
+    }catch(e){
+        console.log(e);
+        return [];
+    }
+}
diff --git a/apiProject/index.html b/apiProject/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Find Universities</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="box">
+        <h1>Search any state Universities in India</h1>
+        <div class="container">
+            <input placeholder="Enter State">
+            <button>Search</button>
+            <ul id="list"></ul>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/apiProject/style.css b/apiProject/style.css
@@ -0,0 +1,61 @@
+body{
+    background: #72f1e6
+}
+.box{
+    width: 800px;
+    display: flex;
+    flex-direction: column;
+    justify-self: center;
+    margin-top: 100px;
+    border: 4px solid #000000;
+    border-radius: 20px;
+    background-color: rgb(207, 221, 214);
+     box-shadow: 20px 16px 26px rgb(18, 18, 18);
+}
+h1{
+    text-align: center;
+    font-size: 40px;
+}
+.container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+input{
+    width: 400px;
+    height: 40px;
+    border-radius: 16px;
+    border: none;
+    padding-left: 18px;
+    font-size: 20px;
+}
+input::placeholder{
+    padding-left: 15px;
+    color: black;
+}
+button{
+    margin-top: 20px;
+    font-size: 20px;
+    padding: 7px 35px;
+    border-radius: 10px;
+    border: none;
+    box-shadow: 4px 4px 20px rgba(255, 255, 255);
+    background-color: rgb(0, 0, 0);
+    color: #fff;
+}
+button:hover{
+    opacity: 0.9;
+    cursor: pointer;
+}
+ul{
+    width: 700px;
+    background-color: rgb(52, 51, 51);
+    border: 2px solid black;
+    color: white;
+    border-radius: 10px;
+    padding-top: 20px;
+    transition: all 0.3s ease;
+    padding-bottom: 20px;
+    font-size: 23px;
+}