diff --git a/apiProject/README.md b/apiProject/README.md new file mode 100644 index 0000000..7af2e92 --- /dev/null +++ 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 new file mode 100644 index 0000000..114ac60 --- /dev/null +++ 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 []; + } +} \ No newline at end of file diff --git a/apiProject/index.html b/apiProject/index.html new file mode 100644 index 0000000..023c1d0 --- /dev/null +++ b/apiProject/index.html @@ -0,0 +1,22 @@ + + + + + + Find Universities + + + + +
+

Search any state Universities in India

+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/apiProject/style.css b/apiProject/style.css new file mode 100644 index 0000000..8202354 --- /dev/null +++ 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; +}