Skip to content

feat: Create Water Management Districts webpage #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Joeharris15 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Create Water Management Districts webpage #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harris Civil Engineers, LLC - Water Management Districts</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Harris Civil Engineers, LLC - Water Management Districts</h1>
</header>
<main>
<section id="district-selection">
<h2>Select a Water Management District</h2>
<select id="district-dropdown">
<option value="">--Please choose a district--</option>
<option value="nwfwmd">Northwest Florida Water Management District</option>
<option value="srwmd">Suwannee River Water Management District</option>
<option value="sjrwmd">St. Johns River Water Management District</option>
<option value="swfwmd">Southwest Florida Water Management District</option>
<option value="sfwmd">South Florida Water Management District</option>
</select>
</section>
<section id="district-info">
<div id="info-container">
<!-- District information will be displayed here -->
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
120 changes: 120 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
document.addEventListener('DOMContentLoaded', () => {
const districtDropdown = document.getElementById('district-dropdown');
const infoContainer = document.getElementById('info-container');

const districtData = {
nwfwmd: {
name: 'Northwest Florida Water Management District',
summary: 'The Northwest Florida Water Management District is one of five water management districts in Florida. It is responsible for managing the water resources of the Florida panhandle, covering 16 counties and serving approximately 1.5 million residents. The district\'s core missions are to ensure a sustainable water supply, protect and improve water quality, provide flood protection, and protect and restore natural systems.',
highlights: [
'Water Supply Planning',
'Environmental Resource Permitting',
'Flood Protection and Floodplain Management',
'Springs Protection and Restoration',
'Land Acquisition and Management for Water Resource Protection'
],
links: {
'Website': 'http://www.nwfwater.com/',
'Rules and References': 'https://nwfwater.com/permits/rules-and-references/',
'Permits': 'https://nwfwater.com/permits/',
'Reports & Plans': 'https://nwfwater.com/data-publications/reports-plans/',
'Ask a Question': 'mailto:public.information@nwfwater.com'
}
},
srwmd: {
name: 'Suwannee River Water Management District',
summary: 'The Suwannee River Water Management District manages water and related natural resources in north-central Florida by providing water quality and quantity monitoring, research, regulation, land acquisition and management, and flood protection.',
highlights: [
'Water Quality and Quantity Monitoring',
'Research and Data Collection',
'Permitting and Regulation',
'Land Acquisition and Management',
'Flood Protection and Floodplain Management'
],
links: {
'Website': 'http://www.mysuwanneeriver.com/',
'Permits & Rules': 'https://www.mysuwanneeriver.com/8/Permits-Rules',
'Recreation': 'https://www.mysuwanneeriver.com/62/Recreational-Opportunities',
'Water Data Portal': 'https://www.mysuwanneeriver.com/507/Water-Data-Portal',
'Ask a Question': 'https://www.mysuwanneeriver.com/FormCenter/District-7/Contact-Us-45'
}
},
sjrwmd: {
name: 'St. Johns River Water Management District',
summary: 'The St. Johns River Water Management District’s work is grouped into four core missions: ensuring a long-term supply of drinking water for the region’s residents and businesses; protecting and improving the health of aquatic systems; preserving and restoring natural systems, such as wetlands, marshes and floodplains; and protecting people and property from floods.',
highlights: [
'Water Supply',
'Water Quality',
'Natural Systems',
'Flood Protection'
],
links: {
'Website': 'http://www.sjrwmd.com/',
'Permitting': 'https://www.sjrwmd.com/permitting/',
'Data and Tools': 'https://www.sjrwmd.com/data/',
'Recreation': 'https://www.sjrwmd.com/lands/recreation/list/',
'Contact Us': 'https://www.sjrwmd.com/contact/'
}
},
swfwmd: {
name: 'Southwest Florida Water Management District',
summary: 'The Southwest Florida Water Management District is a regional agency responsible for managing water resources in west-central Florida. The District’s mission is to protect water resources, minimize flood risks and ensure the public’s water needs are met.',
highlights: [
'Water Conservation',
'Water Restrictions',
'Florida-Friendly Landscaping™',
'Recreation on District Lands',
'Minimum Flows and Levels (MFLs)'
],
links: {
'Website': 'https://www.swfwmd.state.fl.us/',
'ePermitting': 'https://www.swfwmd.state.fl.us/business/epermitting',
'Data & Maps': 'https://www.swfwmd.state.fl.us/resources/data-maps',
'Recreation': 'https://www.swfwmd.state.fl.us/recreation',
'Contact Us': 'https://www.swfwmd.state.fl.us/about/about-the-district/contact-us'
}
},
sfwmd: {
name: 'South Florida Water Management District',
summary: 'The South Florida Water Management District is the oldest and largest of the state\'s five water management districts, managing water resources in a 16-county region that stretches from Orlando to the Florida Keys, serving a population of 9 million people.',
highlights: [
'Flood Control',
'Water Supply Planning',
'Water Quality Improvement',
'Ecosystem Restoration',
'Python Elimination Program'
],
links: {
'Website': 'https://www.sfwmd.gov/',
'Permits': 'https://www.sfwmd.gov/doing-business-with-us/permits',
'Real-Time Data': 'https://www.sfwmd.gov/science-data/levels',
'Recreation': 'https://www.sfwmd.gov/community-residents/recreation',
'Contact Us': 'https://www.sfwmd.gov/contact'
}
}
};

districtDropdown.addEventListener('change', (event) => {
const selectedDistrict = event.target.value;
if (selectedDistrict) {
const data = districtData[selectedDistrict];
infoContainer.innerHTML = `
<h2>${data.name}</h2>
<h3>Code Summary</h3>
<p>${data.summary}</p>
<h3>Highlights</h3>
<ul>
${data.highlights.map(h => `<li>${h}</li>`).join('')}
</ul>
<h3>Links</h3>
<ul>
${Object.entries(data.links).map(([text, url]) => `<li><a href="${url}" target="_blank">${text}</a></li>`).join('')}
</ul>
<h3>Ask a Question</h3>
<p>Have a question about the rules? <a href="${data.links['Ask a Question'] || data.links['Contact Us'] || '#'}" target="_blank">Ask here</a>.</p>
`;
} else {
infoContainer.innerHTML = '<!-- District information will be displayed here -->';
}
});
});
57 changes: 57 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}

main {
padding: 1rem;
max-width: 800px;
margin: 0 auto;
}

#district-selection {
margin-bottom: 1rem;
}

#district-dropdown {
width: 100%;
padding: 0.5rem;
font-size: 1rem;
}

#info-container {
background-color: #fff;
padding: 1rem;
border: 1px solid #ddd;
}

#info-container h2 {
margin-top: 0;
}

#info-container ul {
list-style-type: none;
padding: 0;
}

#info-container ul li {
margin-bottom: 0.5rem;
}

#info-container a {
color: #333;
text-decoration: none;
}

#info-container a:hover {
text-decoration: underline;
}