Create a Volunteer Opportunity Finder using HTML, CSS and JavaScript
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:
Contact Us