Creating a Volunteer Opportunity Finder using HTML, CSS, and JavaScript is a great way to help people discover and participate in volunteer opportunities. In this article, we will create a Volunteer Opportunity Finder.
Prerequisite:
Approach
- The HTML structure defines the layout of Volunteer Opportunity Finder. It includes an input field for the search opportunities and a container to display the search results.
- The CSS styling provides a clean and responsive design.
- JavaScript handles the functionality of searching and displaying volunteer opportunities. It uses sample data but you can replace it with your actual opportunities.
- When a user enters a search term and clicks the “Search” button and displayOpportunities function filters and displays matching opportunities in a designated area.
Example: This example shows the implementation of the above-explained approach.
Javascript
const searchInput = document .getElementById( 'search-input' );
const searchButton = document .getElementById( 'search-button' );
const opportunities = document .getElementById( 'opportunities' );
const Opportunities = [ {
title: 'Community Cleanup' ,
location: 'Bangalore' , date: 'Oct 19, 2023'
},
{
title: 'Food Drive' ,
location: 'India' , date: 'Nov 8, 2023'
},
{
title: 'Youth Mentorship' ,
location: 'Community Center' , date: 'Dec 22, 2023'
},
{
title: 'Animal Shelter Support' ,
location: 'India' , date: 'Dec 9, 2023'
},
]; searchButton.addEventListener( 'click' , () => {
const searchTerm = searchInput.value.toLowerCase();
displayOpportunities(searchTerm);
}); function displayOpportunities(searchTerm) {
opportunities.innerHTML = '' ;
for (const opportunity of Opportunities) {
if (opportunity.title.toLowerCase()
.includes(searchTerm)) {
const opportunityCard = document
.createElement( 'div' );
opportunityCard.classList
.add( 'opportunity-card' );
opportunityCard.innerHTML = `
<h3>${opportunity.title}</h3>
<p><strong>Location:</strong>
${opportunity.location}</p>
<p><strong>Date:</strong>
${opportunity.date}</p>
`;
opportunities.appendChild(opportunityCard);
}
}
} |
HTML
<!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 = "style.css" >
< title >The Volunteer Opportunity Finder</ title >
</ head >
< body >
< div class = "container" >
< h1 >Volunteer Opportunity Finder</ h1 >
< div class = "search-section" >
< input type = "text" id = "search-input"
placeholder = "Search for opportunities..." >
< button id = "search-button" >Search</ button >
</ div >
< div class = "opportunities" id = "opportunities" >
</ div >
</ div >
< script src = "script.js" ></ script >
</ body >
</ html >
|
CSS
body { font-family : Arial , sans-serif ;
background-color : #C0C0C0 ;
margin : 0 ;
padding : 0 ;
display : flex;
justify- content : center ;
align-items: center ;
height : 100 vh;
} .container { background-color : #fff ;
border-radius: 8px ;
box-shadow: 0 2px 4px rgba( 0 , 0 , 0 , 0.1 );
padding : 20px ;
text-align : center ;
max-width : 500px ;
} h 1 {
color : #A52A2A ;
} .search-section { margin : 20px 0 ;
} input { width : 70% ;
padding : 10px ;
margin : 10px 0 ;
border : 1px solid #ccc ;
border-radius: 4px ;
} button { background-color : #007bff ;
color : #fff ;
border : none ;
border-radius: 4px ;
padding : 10px 20px ;
cursor : pointer ;
} button:hover { background-color : #0056b3 ;
} .opportunities { margin : 20px 0 ;
text-align : left ;
} |
Output: