mdibrahimk48/schools-information.html

## schools-information.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Schools Information</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <label for="location">Select City or Province:</label>
    <select id="location">
        <option value="city">City</option>
        <option value="province">Province</option>
    </select>

    <label for="locationsList">Select Location:</label>
    <select id="locationsList">
        <!-- Options will be populated dynamically using JavaScript -->
    </select>

    <div id="schoolsList">
        <!-- Schools information will be displayed here -->
    </div>

    <script src="script.js"></script>
</body>

</html>

## script.js
// Sample data
const schoolsData = [
    { name: "School 1", category: "Category A", city: "City A", province: "Province X" },
    { name: "School 2", category: "Category B", city: "City B", province: "Province Y" },
    // Add more school data here
];

const locationSelect = document.getElementById("location");
const locationsList = document.getElementById("locationsList");
const schoolsList = document.getElementById("schoolsList");

// Populate locations based on user selection
locationSelect.addEventListener("change", populateLocations);

function populateLocations() {
    const selectedValue = locationSelect.value;
    locationsList.innerHTML = "<option value=''>Select Location</option>";
    const uniqueLocations = [...new Set(schoolsData.map(school => school[selectedValue]))];
    uniqueLocations.forEach(location => {
        const option = document.createElement("option");
        option.value = location;
        option.text = location;
        locationsList.appendChild(option);
    });
}

// Display schools when location is selected
locationsList.addEventListener("change", displaySchools);

function displaySchools() {
    const selectedLocation = locationsList.value;
    schoolsList.innerHTML = "";
    schoolsData.forEach(school => {
        if (school[locationSelect.value] === selectedLocation) {
            const schoolInfo = document.createElement("div");
            schoolInfo.textContent = `School Name: ${school.name}, Category: ${school.category}`;
            schoolsList.appendChild(schoolInfo);
        }
    });
}

## styles.css
body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

select {
    margin-bottom: 10px;
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Schools Information</title>
	<link rel="stylesheet" href="styles.css">
	</head>

	<body>
	<label for="location">Select City or Province:</label>
	<select id="location">
	<option value="city">City</option>
	<option value="province">Province</option>
	</select>

	<label for="locationsList">Select Location:</label>
	<select id="locationsList">
	<!-- Options will be populated dynamically using JavaScript -->
	</select>

	<div id="schoolsList">
	<!-- Schools information will be displayed here -->
	</div>

	<script src="script.js"></script>
	</body>

	</html>
	// Sample data
	const schoolsData = [
	{ name: "School 1", category: "Category A", city: "City A", province: "Province X" },
	{ name: "School 2", category: "Category B", city: "City B", province: "Province Y" },
	// Add more school data here
	];

	const locationSelect = document.getElementById("location");
	const locationsList = document.getElementById("locationsList");
	const schoolsList = document.getElementById("schoolsList");

	// Populate locations based on user selection
	locationSelect.addEventListener("change", populateLocations);

	function populateLocations() {
	const selectedValue = locationSelect.value;
	locationsList.innerHTML = "<option value=''>Select Location</option>";
	const uniqueLocations = [...new Set(schoolsData.map(school => school[selectedValue]))];
	uniqueLocations.forEach(location => {
	const option = document.createElement("option");
	option.value = location;
	option.text = location;
	locationsList.appendChild(option);
	});
	}

	// Display schools when location is selected
	locationsList.addEventListener("change", displaySchools);

	function displaySchools() {
	const selectedLocation = locationsList.value;
	schoolsList.innerHTML = "";
	schoolsData.forEach(school => {
	if (school[locationSelect.value] === selectedLocation) {
	const schoolInfo = document.createElement("div");
	schoolInfo.textContent = `School Name: ${school.name}, Category: ${school.category}`;
	schoolsList.appendChild(schoolInfo);
	}
	});
	}
	body {
	font-family: Arial, sans-serif;
	margin: 20px;
	}

	select {
	margin-bottom: 10px;
	}