Create a Volunteer Opportunity Finder using HTML, CSS and JavaScript

Last Updated : 28 Dec, 2023

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: 100vh;
}
 
.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;
}
 
h1 {
    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;
}