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.
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( 0 deg,
rgb ( 64 , 192 , 0 ) 0% , rgb ( 64 , 192 , 0 ));
color : white ;
} header { margin : 8px 62px ;
padding : 0 ;
/* background-color: rgb(117, 229, 61); */
height : 14 vh;
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( 0 deg,
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 : 61 vh;
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 h 2 {
font-size : 45px ;
color : rgb ( 13 , 5 , 252 );
} .contribute-form h 3 {
color : crimson;
font-weight : 100px ;
font-size : 30px ;
} .total-raised h 2 {
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 : 15 vh;
}
.title {
height : 60% ;
font-size : 35px ;
text-align : center ;
display : flex;
align-items: center ;
justify- content : center ;
}
input {
margin-bottom : 10px ;
}
main {
height : 88 vh;
}
} @media ( max-width : 385px ) {
header {
height : 10 vh;
}
.title {
height : 60% ;
font-size : 26px ;
text-align : center ;
display : flex;
align-items: center ;
justify- content : center ;
}
main {
height : 100 vh;
}
input {
width : 100px ;
margin-bottom : 10px ;
}
} |
Output: