stevie921/donation

Recreation of a donation page

Donation

Recreation of a donation page

I came across an exercise requiring you to recreate a donation form using HTML and CSS. On the page the original is on the left and my recreation is on the right. I decided to expand on this task by using more than HTML and CSS and adding interactivity using Javascript. The first thing I added was the ability to enter an amount in the input box, click on the "Give Now" button and then have that amount subtracted from the total needed, replacing it with the new amount.

Then with each click of the button to donate I added one to the amount of people who have donated so far. I also increased the percentage within the W3.css progress bar. Once the total amount required was met, the "Give Now" button is disabled and the progress bar stops upon reaching 100%, with the amount needed paragraph changing to project is 100% funded.

I intend to add further interactivity using the buttons at the bottom. The "tell your friends" button, once clicked, will give the option to share the project on social media sites. I will add the option to bookmark the page using the "save for later" button.