-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathDonatorHome.html
116 lines (103 loc) · 4.4 KB
/
DonatorHome.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restitch - Donate More</title>
<link rel="stylesheet" href="Dontaor.css">
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<h1>ReStitch</h1>
<div>
<a href="DonatorHome.html">Donate</a>
<a href="store.html">Store</a>
<a href="index.html">Signout</a>
</div>
</div>
<!-- Welcome Text -->
<div class="welcome-text">
<h2>Thank You For Making Someone Smile</h2>
</div>
<!-- Main Content -->
<div class="signup-section">
<!-- Image -->
<div class="signup-image">
<img src="donate.jpg" alt="Donation">
</div>
<!-- Form -->
<div class="signup-right">
<h2>Donate More</h2>
<form id="donateForm">
<label for="years-of-cloth">Years of Cloth:</label>
<select required id="years-of-cloth" name="years-of-cloth">
<option value="<6months"><6 months</option>
<option value="1year">1 year</option>
<option value="2years">2 years</option>
<option value="3years">3 years</option>
<option value=">3years">>3 years</option>
</select>
<label for="original-cost">Original Cost:</label>
<input type="text" id="original-cost" name="original-cost" required placeholder="Enter the original cost">
<label for="gender-of-cloth">Gender of Cloth:</label>
<select id="gender-of-cloth" required name="gender-of-cloth">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="unisex">Unisex</option>
</select>
<label for="description">Description:</label>
<textarea id="description" name="description" placeholder="Provide a detailed description of the cloth and also add address detail"></textarea>
<label for="image-upload">Add Image link</label>
<input type="text" id="Drivelink" name="Drivelink" required placeholder="Enter the image link">
<button type="submit">Donate</button>
</form>
</div>
</div>
<!-- Footer Section -->
<div class="footer">
<p>© 2024 ReStitch. All Rights Reserved.</p>
<div class="social-media">
<a href="#" class="social-icon"><img src="fb.jpg" alt="Facebook" /> Facebook</a>
<a href="#" class="social-icon"><img src="insta.jpg" alt="Instagram" /> Instagram</a>
<a href="#" class="social-icon"><img src="in.png" alt="LinkedIn" /> LinkedIn</a>
</div>
</div>
<script>
// Handle form submission
document.getElementById('donateForm').addEventListener('submit', async (event) => {
event.preventDefault();
const yearsOfCloth = document.getElementById('years-of-cloth').value;
const originalCost = document.getElementById('original-cost').value;
const genderOfCloth = document.getElementById('gender-of-cloth').value;
const description = document.getElementById('description').value;
const imageLink = document.getElementById('Drivelink').value;
// Send data to the backend API
try {
const response = await fetch('http://localhost:3006/api/donate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
yearsOfCloth,
originalCost,
genderOfCloth,
description,
imageLink
})
});
const result = await response.json();
if (response.ok) {
alert('Thank you for your donation!');
} else {
alert(result.message || 'Something went wrong.');
}
} catch (error) {
console.error('Error:', error);
alert('An error occurred. Please try again later.');
}
});
</script>
</body>
</html>