From c7009a8bba35b7282b1556c4b65eae6c1a006468 Mon Sep 17 00:00:00 2001 From: Akhil Krishna Sripada Date: Wed, 23 Jul 2025 19:22:42 -0400 Subject: [PATCH 1/3] Assignment 1 - Charity Fundraiser --- aboutus.html | 39 +++++++++++++++++ analytics.html | 60 ++++++++++++++++++++++++++ css/style.css | 107 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 64 +++++++++++++++++++++++++++- js/script.js | 18 ++++++++ managefunds.html | 98 +++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 385 insertions(+), 1 deletion(-) create mode 100644 aboutus.html create mode 100644 analytics.html create mode 100644 css/style.css create mode 100644 js/script.js create mode 100644 managefunds.html diff --git a/aboutus.html b/aboutus.html new file mode 100644 index 000000000..68ae96967 --- /dev/null +++ b/aboutus.html @@ -0,0 +1,39 @@ + + + + + + About Us + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

About the Developer

+

Hi! I’m Akhil, a web development student passionate about using technology for social good. This website was created as part of ISM6225 to demonstrate user interface design, responsiveness, and interactivity using HTML, CSS, JavaScript, and Chart.js.

+

I used GitHub to manage source control and Cyberduck to deploy the site to USF’s web server.

+

GitHub Repo: View Code

+
+
+ + + + diff --git a/analytics.html b/analytics.html new file mode 100644 index 000000000..19e412815 --- /dev/null +++ b/analytics.html @@ -0,0 +1,60 @@ + + + + + + Donation Analytics + + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

Donation Analytics

+ +
+
+ + + + + + diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..1f3d1c169 --- /dev/null +++ b/css/style.css @@ -0,0 +1,107 @@ +/* style.css - modern, responsive styling */ + +body { + margin: 0; + font-family: 'Inter', sans-serif; + background-color: #f4f4f4; + color: #333; +} + +header { + background-color: #2d6a4f; + color: white; + padding: 1rem 0; +} + +header .container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 2rem; +} + +nav ul { + list-style: none; + display: flex; + gap: 1.5rem; + padding: 0; + margin: 0; +} + +nav ul li a { + color: white; + text-decoration: none; + font-weight: 600; + transition: color 0.3s; +} + +nav ul li a:hover { + color: #ffd166; +} + +.hero { + background: url('../images/charity_banner.jpg') center/cover no-repeat; + color: white; + padding: 6rem 2rem; + text-align: center; + background-color: #1d3557; +} + +.hero .cta-button { + display: inline-block; + margin-top: 1.5rem; + background-color: #ffd166; + color: #1d3557; + padding: 0.75rem 1.5rem; + text-decoration: none; + font-weight: 600; + border-radius: 5px; + transition: background-color 0.3s; +} + +.hero .cta-button:hover { + background-color: #f4a261; +} + +.highlights, .impact { + padding: 3rem 2rem; + background-color: #ffffff; +} + +.highlights .container, .impact .container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; +} + +.highlight h3 { + color: #2d6a4f; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 1rem; +} + +.container { + max-width: 1200px; + margin: auto; +} + +/* Responsive */ +@media (max-width: 768px) { + header .container { + flex-direction: column; + text-align: center; + } + + nav ul { + flex-direction: column; + gap: 1rem; + margin-top: 1rem; + } +} diff --git a/index.html b/index.html index fbae197cd..55bcd7ec9 100644 --- a/index.html +++ b/index.html @@ -1 +1,63 @@ - \ No newline at end of file + + + + + + Charity Fundraiser + + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

Give Hope. Give Joy. Give Life.

+

Your support helps us reach children, families, and communities in need through health, education, and crisis relief.

+ Donate Now +
+
+ +
+
+
+

Education Support

+

Help fund education for underprivileged children and youth.

+
+
+

Medical Assistance

+

Provide life-saving treatments and medical supplies to those in need.

+
+
+

Hunger Relief

+

Support daily meals and nutrition kits for low-income families.

+
+
+
+ +
+
+

Our Impact

+

Thanks to donors like you, we’ve raised over $500,000 to support 10,000+ lives across 15 regions in the past year alone.

+
+
+ + + + diff --git a/js/script.js b/js/script.js new file mode 100644 index 000000000..b8e3fe9bd --- /dev/null +++ b/js/script.js @@ -0,0 +1,18 @@ +document.getElementById('donationForm').addEventListener('submit', function (e) { + e.preventDefault(); + + const name = document.getElementById('donorName').value; + const amount = document.getElementById('amount').value; + + const entry = document.createElement('li'); + entry.textContent = `${name} donated $${amount}`; + entry.style.cursor = 'pointer'; + + // Delete on click + entry.addEventListener('click', function () { + this.remove(); + }); + + document.getElementById('donationList').appendChild(entry); + this.reset(); +}); diff --git a/managefunds.html b/managefunds.html new file mode 100644 index 000000000..b7124d366 --- /dev/null +++ b/managefunds.html @@ -0,0 +1,98 @@ + + + + + + Manage Donations + + + +
+
+

Charity Fundraiser

+ +
+
+ +
+
+

Manage Donations (CRUD)

+
+ + + +
+ + + + + + + + + +
DonorAmountActions
+
+
+ + + + + + From 022edbeb011dbe4e1640fed84571880790002f82 Mon Sep 17 00:00:00 2001 From: Akhil Krishna Sripada Date: Wed, 23 Jul 2025 19:44:01 -0400 Subject: [PATCH 2/3] made changes --- aboutus.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aboutus.html b/aboutus.html index 68ae96967..a175e251d 100644 --- a/aboutus.html +++ b/aboutus.html @@ -26,7 +26,7 @@

Charity Fundraiser

About the Developer

Hi! I’m Akhil, a web development student passionate about using technology for social good. This website was created as part of ISM6225 to demonstrate user interface design, responsiveness, and interactivity using HTML, CSS, JavaScript, and Chart.js.

I used GitHub to manage source control and Cyberduck to deploy the site to USF’s web server.

-

GitHub Repo: View Code

+

GitHub Repo: View Code

From c7fb1fc9406cf70da81d4a38e81fcda6dc4241d7 Mon Sep 17 00:00:00 2001 From: Akhil Krishna Sripada Date: Wed, 23 Jul 2025 20:27:33 -0400 Subject: [PATCH 3/3] added README.md file --- .DS_Store | Bin 0 -> 6148 bytes README.md | 13 +++++++++++++ aboutus.html | 4 ++-- index.html | 2 +- 4 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .DS_Store create mode 100644 README.md diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..fa35c28336c292c2bc3630cd840a8d53a66735ec GIT binary patch literal 6148 zcmeHKJx{|x4D~e~!pG1F7;j?lz#giwATf1gLj6zxHAFIIL$U-(=_K^<6#6z;{78 zWlg@9n<`W1Ti)O9KkX=AsLP9rubpl3y)s{iF4s>NoqojYT-OID%S_G|YU)huxh9Wi z9y3$G6fgz;iUPQ^+2Soh8%+UIz!X?1z~2WCXG|1J!SLz85Ly6W7vW%-b1%U)UNKQD z1(AU{DFsTY(-y-?IpSW|C5ok>l#|ou!zr`V4#fp_?C-;Ja*3dgrhqBXR3MVa9^d~* zU-$pbB6~6gOo4x;fa|8ibbur2-P$@F-?bio24~}SrQoUrlW-MdEnmfZ@L-60o&XcY SQVCharity Fundraiser

About the Developer

-

Hi! I’m Akhil, a web development student passionate about using technology for social good. This website was created as part of ISM6225 to demonstrate user interface design, responsiveness, and interactivity using HTML, CSS, JavaScript, and Chart.js.

-

I used GitHub to manage source control and Cyberduck to deploy the site to USF’s web server.

+

Hi! I am Akhil, a web development student passionate about using technology for social good. This website was created as part of ISM6225 to demonstrate user interface design, responsiveness, and interactivity using HTML, CSS, JavaScript, and Chart.js.

+

I used GitHub to manage source control and Cyberduck to deploy the site to USF web server.

GitHub Repo: View Code

diff --git a/index.html b/index.html index 55bcd7ec9..233c35d60 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,7 @@

Hunger Relief

Our Impact

-

Thanks to donors like you, we’ve raised over $500,000 to support 10,000+ lives across 15 regions in the past year alone.

+

Thanks to donors like you, we have raised over $500,000 to support 10,000+ lives across 15 regions in the past year alone.