ISM6225 · AkhilKrishnaSripada · Jul 23, 2025 · Jul 23, 2025 · Jul 24, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,13 @@
+# Charity Fundraiser Website
+
+Created for ISM6225 Assignment 1  
+A static website using HTML, CSS, JS, and Chart.js to support fundraising causes.
+
+## Pages:
+- `index.html`: Home
+- `aboutus.html`: About the Developer
+- `managefunds.html`: Mock CRUD Form
+- `analytics.html`: Chart Visualization
+
+GitHub Repo: [https://github.com/AkhilKrishnaSripada/Assignment_LookAndFeel/tree/assignment] 
+Hosted at: [http://myweb.usf.edu/~akhilkrishnasripada/index.html]
diff --git a/aboutus.html b/aboutus.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>About Us</title>
+  <link rel="stylesheet" href="css/style.css" />
+</head>
+<body>
+  <header>
+    <div class="container">
+      <h1>Charity Fundraiser</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="aboutus.html">About Us</a></li>
+          <li><a href="managefunds.html">Manage Funds</a></li>
+          <li><a href="analytics.html">Analytics</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <section class="impact">
+    <div class="container">
+      <h2>About the Developer</h2>
+      <p>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.</p>
+      <p>I used GitHub to manage source control and Cyberduck to deploy the site to USF web server.</p>
+      <p><strong>GitHub Repo:</strong> <a href="https://github.com/AkhilKrishnaSripada/Assignment_LookAndFeel/tree/assignment" target="_blank">View Code</a></p>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p> Charity Fundraiser | Built by Akhil</p>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/analytics.html b/analytics.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Donation Analytics</title>
+  <link rel="stylesheet" href="css/style.css" />
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <header>
+    <div class="container">
+      <h1>Charity Fundraiser</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="aboutus.html">About Us</a></li>
+          <li><a href="managefunds.html">Manage Funds</a></li>
+          <li><a href="analytics.html">Analytics</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <section class="impact">
+    <div class="container">
+      <h2>Donation Analytics</h2>
+      <canvas id="donationChart" height="100"></canvas>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p> Charity Fundraiser | Built by Akhil</p>
+    </div>
+  </footer>
+
+  <script>
+    const ctx = document.getElementById('donationChart').getContext('2d');
+    const donationChart = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: ['Education', 'Healthcare', 'Disaster Relief', 'Food', 'Others'],
+        datasets: [{
+          label: 'Funds Raised ($)',
+          data: [750, 900, 300, 600, 250],
+          backgroundColor: ['#2a9d8f', '#e76f51', '#f4a261', '#264653', '#e9c46a']
+        }]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: { display: true },
+          title: { display: true, text: 'Donations by Category' }
+        }
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/css/style.css 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
@@ -1 +1,63 @@
-<!--Your HTML code here-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Charity Fundraiser</title>
+  <link rel="stylesheet" href="css/style.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+</head>
+<body>
+  <header>
+    <div class="container">
+      <h1>Charity Fundraiser</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="aboutus.html">About Us</a></li>
+          <li><a href="managefunds.html">Manage Funds</a></li>
+          <li><a href="analytics.html">Analytics</a></li>
+        </ul>
+      </nav>
+    </div>
+  </header>
+
+  <section class="hero">
+    <div class="container">
+      <h2>Give Hope. Give Joy. Give Life.</h2>
+      <p>Your support helps us reach children, families, and communities in need through health, education, and crisis relief.</p>
+      <a href="managefunds.html" class="cta-button">Donate Now</a>
+    </div>
+  </section>
+
+  <section class="highlights">
+    <div class="container">
+      <div class="highlight">
+        <h3>Education Support</h3>
+        <p>Help fund education for underprivileged children and youth.</p>
+      </div>
+      <div class="highlight">
+        <h3>Medical Assistance</h3>
+        <p>Provide life-saving treatments and medical supplies to those in need.</p>
+      </div>
+      <div class="highlight">
+        <h3>Hunger Relief</h3>
+        <p>Support daily meals and nutrition kits for low-income families.</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="impact">
+    <div class="container">
+      <h2>Our Impact</h2>
+      <p>Thanks to donors like you, we have raised over $500,000 to support 10,000+ lives across 15 regions in the past year alone.</p>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <p> Charity Fundraiser | Built by Akhil </p>
+    </div>
+  </footer>
+</body>
+</html>
diff --git a/js/script.js 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();
+});