Create a Crowdfunding Platform using HTML CSS & JavaScript

Last Updated : 17 Nov, 2023

In this article, we will see how we can implement a Crowdfunding Platform with the help of HTML, CSS, and JavaScript. The crowdfunding platform project is a basic front-end prototype developed using HTML, CSS, and JavaScript.

Preview of final output: Let us have a loo at how the final project will look like.

Output Preview

Prerequisites:

Approach:

1. Create a new project folder and organize it with the following files: index.html, styles.css, and script.js.
2. Open index.html in a code editor and create the basic HTML structure.
3. Apply CSS for visual styling and layout.
4. The JavaScript code of the project to handle contributions and update the total funds raised as
- Set up event listeners to respond to user actions, such as clicking the “Contribute” button.
- Validate the contribution input to ensure it’s a valid amount.
- When a valid contribution is made, update the total fund raised in real-time.
- Clear the contribution input field after a successful contribution.
- Provide a user alert to acknowledge their contribution.
- Check whether gaol is reached or not, if reached then alert a message.

Example: Below is the implementation of the Crowdfunding Platform using HTML, CSS, and Javascript.

Javascript

document.addEventListener("DOMContentLoaded", function () {
    const contributionAmountInput = 
        document.getElementById("contribution-amount");
    const contributeButton = 
        document.getElementById("contribute-button");
    const totalAmount = 
        document.getElementById("total-amount");
    const progressBar = 
        document.getElementById("progress-bar");
    const projectDetails = 
        document.querySelector(".project-details"); 
    // Use querySelector to get 
    // the first element with the class
 
    const goalAmount = 1000;
    let totalRaised = 100;
 
    contributeButton.addEventListener("click", function () {
        if (totalRaised >= goalAmount) {
            alert("Thank You! Goal Already Reached!");
            return;
        }
 
        const amount = 
            parseFloat(contributionAmountInput.value);
 
        if (!isNaN(amount) && amount > 0) {
            if (totalRaised + amount > goalAmount) {
                alert(`Thank you for contributing, 
                    but we need $${goalAmount - totalRaised} 
                    only, so please contribute only 
                    $${goalAmount - totalRaised}.`);
            } else {
                totalRaised += amount;
                totalAmount.textContent = 
                    `$${totalRaised.toFixed(2)}`;
                contributionAmountInput.value = "";
                updateProgressBar();
 
                if (totalRaised >= goalAmount) {
                    projectDetails.innerHTML = 
                        `<h3>Thank You for Contributing</h3> 
                          The goal has been reached!`;
                    // Remove the contribute button
                    contributeButton.style.display = "none";
                } else {
                    alert(`Thank you for contributing $${amount}!`);
                }
            }
        } else {
            alert("Please enter a valid contribution amount.");
        }
    });
 
    // Function to update the progress bar
    function updateProgressBar() {
        const progress = (totalRaised / goalAmount) * 100;
        progressBar.style.width = progress + "%";
    }
});

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>Crowdfunding Platform</title>
</head>
 
<body>
    <header class="header">
        <div class="head-bck">
            <div class="title">
                  <h2>Crowdfunding Project</h2>
            <div>
        </div>
    </header>
    <div class="outer-div">
        <main>
            <div class="main-bck">
                <div class="project-details">
                    <h3>Unit for Change</h3>
                    <p id="goal">Goal: $1000</p>
     
                    <div class="container">
                        <div class="contribute-form">
                            <h3>Please Contribute</h3>
                            <input type="number"
                                   id="contribution-amount"
                                   placeholder="Enter amount" min="0">
                            <button id="contribute-button">
                                  Contribute
                              </button>
                        </div>
                        <div class="total-raised">
                            <h3>Total Fund Raised</h3>
                            <p id="total-amount">$100</p>
                            <div id="progress-bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <p class="cpyrght">© 
          2023 Crowdfunding. 
          All rights reserved.
    </p>
    <script src="./index.js"></script>
</body>
 
</html>

CSS

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background:linear-gradient(0deg,
    rgb(64, 192, 0) 0%, rgb(64, 192, 0));
    color: white;
}
 
header {
    margin: 8px 62px;
    padding: 0;
    /* background-color: rgb(117, 229, 61); */
    height: 14vh;
    border: 0px none rgba(100, 100, 100, 0);
    border-radius: 20px;
}
 
.outer-div{
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.title {
    font-size: 30px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.head-bck {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
 
main {
    background:
        linear-gradient(0deg,
            rgb(125, 238, 26) 0%, rgb(125, 238, 26));
    margin: 28px 60px;
    background-color: rgb(237, 190, 190);
    color: #056adc;
    padding: 20px;
    border-radius: 5px;
    height: 61vh;
    width: 50%;
    box-shadow: 0 0 10px rgba(120, 89, 89, 0.2);
 
}
 
.main-bck {
    height: 96%;
    padding: 10px 10px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
 
#goal {
    color: #ff076f;
    font-size: 30px;
    font-weight: 700;
}
 
.container {
    text-align: center;
}
 
.project-details {
    border: 0px none rgba(100, 100, 100, 0);
    border-radius: 24px;
    text-align: center;
    padding: 1px;
    font-size: 25px;
}
 
.project-details h2 {
    font-size: 45px;
    color: rgb(13, 5, 252);
}
 
.contribute-form h3 {
 
    color: crimson;
    font-weight: 100px;
    font-size: 30px;
}
 
.total-raised h2 {
    color: orangered;
    font-weight: 700;
    margin-bottom: 0;
}
 
#total-amount {
    font-weight: 700;
    font-size: 25px;
    color: rgb(223, 28, 7);
    margin-top: -15px;
}
 
input {
    border: 2px solid #8b036e;
    padding: 8px 20px;
    font-weight: 400;
    cursor: pointer;
}
 
button {
    background-color: #007bff;
    border-radius: 5px;
    color: white;
    font-size: medium;
    font-weight: 600;
    border: none;
    padding: 9px 20px;
    cursor: pointer;
}
 
button:hover {
    background-color: #0056b3;
}
 
.cpyrght {
    text-align: center;
}
 
 
@media (max-width: 510px) {
 
    header {
        height: 15vh;
 
    }
 
    .title {
        height: 60%;
        font-size: 35px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    input {
 
        margin-bottom: 10px;
    }
 
    main {
        height: 88vh;
    }
 
}
 
@media (max-width: 385px) {
    header {
        height: 10vh;
 
    }
 
    .title {
        height: 60%;
        font-size: 26px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
    main {
        height: 100vh;
    }
 
    input {
        width: 100px;
        margin-bottom: 10px;
    }
}