Create a Crowdfunding Platform using HTML CSS & JavaScript
Last Updated :
25 Jul, 2024
Improve
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.
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.
<!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>
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;
}
}
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 + "%";
}
});
Output:
