apna-college · kajuu1712 · Jan 23, 2025
diff --git a/Kajal_Pandit/README.md b/Kajal_Pandit/README.md
@@ -0,0 +1,14 @@
+# University-College_Search
+
+This project is a web application that allows users to search for universities or colleges by their name, country, or state using the Hipolabs University API.
+
+ **Features**
+- Search universities/colleges by name, country, or state.
+- Display detailed information about universities, including their name, country, state, domain, and web pages.
+- Responsive design using Bootstrap.
+
+## Technologies Used
+
+- **Frontend**: HTML, CSS, JavaScript, Bootstrap
+- **API**: [Hipolabs University API](http://universities.hipolabs.com/)
+- **JavaScript Library**: Axios for API requests
diff --git a/Kajal_Pandit/app.js b/Kajal_Pandit/app.js
@@ -0,0 +1,106 @@
+let inpName = document.querySelector('.inp-name');
+let inpCountry = document.querySelector('.inp-country');
+let inpState = document.querySelector('.inp-state');
+
+let searchBtn = document.querySelector('.search-btn');
+searchBtn.addEventListener("click" , () => {
+    document.querySelector('.uni-info-name').innerHTML = '';
+    document.querySelector('.uni-list-country').innerHTML = '';
+    document.querySelector('.uni-list-state').innerHTML = '';
+    searchUniversity(inpName.value, inpCountry.value, inpState.value);
+});
+
+let h5 = document.createElement('h5');
+
+async function searchUniversity(name, country, state) {
+    let url = "http://universities.hipolabs.com/search";
+    if(name || state || country) {
+        document.querySelector('.uni-info-name').style.display = 'block';
+        document.querySelector('.uni-list-country').style.display = 'block';
+        document.querySelector('.uni-list-state').style.display = 'block';
+    }
+
+    let urlByName = `name=${name.trim().split(" ").join("%20")}`;
+    let urlByCountry = `country=${country.trim().split(" ").join("%20")}`;
+    let urlByState = `state-province=${(state.trim().split(" ").join("%20"))}`;
+
+
+    if(name) {
+        try{
+            url = url + "?" + urlByName + "&" + urlByCountry + "&" + urlByState;
+            let fetchData = await axios.get(url);
+            let uniData = fetchData.data[0];
+            let span = document.createElement('span');
+            span.innerHTML = `<p>Name : ${uniData.name}</p>
+                    <p>Country: ${uniData.country}</p>
+                    <p>State : ${uniData["state-province"]}</p>
+                    <p><b>Domains :</b> <a href="${uniData.domains[0]}">${uniData.domains[0]}</a></p> 
+                    <p><b>Web Pages :</b> <a href="${uniData.web_pages[0]}">${uniData.web_pages[0]}</a></p>`;
+            document.querySelector('.uni-info-name').appendChild(span);
+        }catch(err) {
+            h5.innerHTML = `Enter a valid university/college name! OR Refresh the page`;
+            document.querySelector('.uni-search').appendChild(h5);
+        }
+    }
+    else if(state){
+        try {
+            let uniData = await axios.get(url);
+            let arr = uniData.data;
+
+            if(arr.length == 0)
+                throw err;
+
+            let h4 = document.createElement('h4');
+            h4.innerText = `Colleges in ${state}`;
+            document.querySelector(".uni-list-state").appendChild(h4);
+            let list = document.querySelector(".uni-list-state").appendChild(document.createElement('ol'));
+
+            for(let i = 0; i < arr.length; i++) {
+                if(arr[i]["state-province"] == state){
+                    let li = document.createElement('li');
+                    list.appendChild(li);
+                    li.innerHTML = `<p>Name : ${arr[i].name}</p>
+                        <p>Country: ${arr[i].country}</p>
+                        <p>State : ${arr[i]["state-province"]}</p>
+                        <p><b>Domains :</b> <a href="${arr[i].domains[0]}">${arr[i].domains[0]}</a></p> 
+                        <p><b>Web Pages :</b> <a href="${arr[i].web_pages[0]}">${arr[i].web_pages[0]}</a></p>`;
+                }
+            }
+        } catch(err) {
+            h5.innerHTML = `Enter a valid country and state name! OR Refresh the page`;
+            document.querySelector('.uni-search').appendChild(h5);
+        }
+    }
+    else if(country) {
+        try {
+            url = url + "?" + urlByCountry;
+            let uniListCountry = await axios.get(url);
+            let arr = uniListCountry.data;
+
+            if(arr.length == 0)
+                throw err;
+
+            let h4 = document.createElement('h4');
+            h4.innerText = `Total number of colleges in ${country}: ${arr.length}`;
+            document.querySelector(".uni-list-country").appendChild(h4);
+            let list = document.querySelector(".uni-list-country").appendChild(document.createElement('ol'));
+            for(let i = 0; i < arr.length; i++) {
+                let li = document.createElement('li');
+                list.appendChild(li);
+                li.innerHTML = `<p>Name : ${arr[i].name}</p>
+                    <p>Country: ${arr[i].country}</p>
+                    <p>State : ${arr[i]["state-province"]}</p>
+                    <p><b>Domains :</b> <a href="${arr[i].domains[0]}">${arr[i].domains[0]}</a></p> 
+                    <p><b>Web Pages :</b> <a href="${arr[i].web_pages[0]}">${arr[i].web_pages[0]}</a></p>`;
+            }
+        } catch(err) {
+            h5.innerHTML = `Enter a valid country name!`;
+            document.querySelector('.uni-search').appendChild(h5);
+        }
+    }
+    else {
+        h5.innerHTML = `No result found !`;
+        document.querySelector('.uni-search').appendChild(h5);
+    }    
+}
+
diff --git a/Kajal_Pandit/index.html b/Kajal_Pandit/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <title>Universities</title>
+</head>
+<body>
+    <h1 class="topic">Search Universities / Colleges by name or country or state.</h1>
+    <div class="uni-search mt-4 container">
+        <div class="search-by-name mt-2 mb-2 row">
+            <div class="col-md-4">
+                <label for="name" class="form-label">Name of the university</label>
+                <input type="text" name="name" id="name" class="form-control inp-name">
+            </div>
+            <div class="col-md-4">
+                <label for="country" class="form-label">Country</label>
+                <input type="text" name="country" id="country" class="form-control inp-country">
+            </div>
+            <div class="col-md-4">
+                <label for="state" class="form-label">State</label>
+                <input type="text" name="state" id="state" class="form-control inp-state">
+            </div>
+        </div>
+        <button class="btn search-btn btn-success mt-2">Search</button>
+        <hr>
+        <div class="uni-info-name">
+
+        </div>
+        <div class="uni-list-country">
+
+        </div>
+        <div class="uni-list-state">
+
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Kajal_Pandit/styles.css b/Kajal_Pandit/styles.css
@@ -0,0 +1,135 @@
+.topic {
+    text-align: center;
+    font-size: 2.5rem; /* Larger font size */
+    font-weight: bold;
+    color: #136325; /* Green color */
+    margin-top: 40px;
+    margin-bottom: 20px;
+    text-transform: capitalize; /* Capitalize the first letter of each word */
+    letter-spacing: 1px;
+}
+
+/* Search form section styling */
+.search-by-name {
+    background-color: #ffffff;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Styling for individual input containers */
+.search-by-name .col-md-4 {
+    margin-bottom: 15px;
+}
+
+/* Label styling */
+.search-by-name .form-label {
+    font-size: 14px;
+    font-weight: bold;
+    color: #555;
+    margin-bottom: 8px;
+    display: block;
+}
+
+/* Input field styling */
+.search-by-name .form-control {
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    padding: 10px;
+    font-size: 14px;
+    color: #333;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.search-by-name .form-control:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+/* Search button styling */
+.search-btn {
+    display: block;
+    width: 100%;
+    max-width: 200px;
+    margin: 20px auto;
+    background-color: #28a745;
+    color: #ffffff;
+    font-weight: bold;
+    text-transform: uppercase;
+    padding: 12px;
+    border: none;
+    border-radius: 6px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.search-btn:hover {
+    background-color: #218838;
+    transform: scale(1.03);
+    cursor: pointer;
+}
+
+/* HR styling */
+.search-by-name hr {
+    border: 0;
+    height: 1px;
+    background: #ddd;
+    margin-top: 20px;
+}
+
+/* Initially hidden university info sections */
+.uni-info-name,
+.uni-list-country,
+.uni-list-state {
+    display: none;
+}
+
+/* Styling for each college block when it becomes visible */
+/* Styling for university info and list items with visible border */
+.uni-info-name span, .uni-list-country li, .uni-list-state li {
+    padding: 15px;
+    background-color: #ffffff;
+    border-radius: 8px;
+    margin-bottom: 15px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Darker shadow */
+    border: 1px solid #28a745; /* Green border color */
+    display: block; /* Ensures the border is applied to the entire block */
+}
+
+/* Optional: Add border to top, right, bottom, and left */
+.uni-info-name span, .uni-list-country li, .uni-list-state li {
+    border-top: 1px solid #28a745; /* Green border for the top */
+    border-right: 1px solid #28a745; /* Green border for the right */
+    border-bottom: 1px solid #28a745; /* Green border for the bottom */
+    border-left: 1px solid #28a745; /* Green border for the left */
+}
+
+
+/* Styling for individual elements (name, country, state, etc.) */
+.uni-info-name span p, .uni-list-country li p, .uni-list-state li p {
+    margin: 8px 0;
+    color: #555;
+}
+
+.uni-info-name span a, .uni-list-country li a, .uni-list-state li a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.uni-info-name span a:hover, .uni-list-country li a:hover, .uni-list-state li a:hover {
+    text-decoration: underline;
+}
+
+/* Header for country/state lists */
+.uni-list-country h4, .uni-list-state h4 {
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 15px;
+}
+
+/* Smooth transition for when displaying results */
+.uni-info-name span, .uni-list-country li, .uni-list-state li {
+    transition: all 0.3s ease;
+}