-
Notifications
You must be signed in to change notification settings - Fork 1
/
script.js
140 lines (115 loc) · 8.36 KB
/
script.js
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
function calculateAmounts(democratAmount, republicanAmount) {
const charityAmount = Math.min(democratAmount, republicanAmount) * 2;
const remainingAmount = Math.max(democratAmount, republicanAmount) - Math.min(democratAmount, republicanAmount);
return { charityAmount, remainingAmount };
}
function updateCircleSizes(democratAmount, republicanAmount, charityAmount, remainingAmount) {
const totalParties = democratAmount + republicanAmount;
const totalCharity = charityAmount + remainingAmount;
const maxAmount = Math.max(totalParties, totalCharity);
function setCircleSize(element, amount) {
const baseSize = window.innerWidth <= 767 ? Math.min(window.innerWidth * 0.4, 200) : Math.min(window.innerWidth * 0.25, 200);
const size = Math.max(baseSize, (amount / maxAmount) * baseSize * 2);
const fontSize = 24;
element.style.width = `${size}px`;
element.style.height = `${size}px`;
element.style.fontSize = `${fontSize}px`;
const amountSpan = element.querySelector('span');
if (amountSpan) {
amountSpan.style.fontSize = `${fontSize * 1.2}px`;
}
}
setCircleSize(document.querySelector('.democrat-circle'), democratAmount);
setCircleSize(document.querySelector('.republican-circle'), republicanAmount);
setCircleSize(document.querySelector('.charity-circle'), charityAmount);
setCircleSize(document.querySelector('.remaining-circle'), remainingAmount);
// Update amount text
document.getElementById('democrat-amount').textContent = `$${democratAmount.toLocaleString()}`;
document.getElementById('republican-amount').textContent = `$${republicanAmount.toLocaleString()}`;
document.getElementById('charity-amount').textContent = `$${charityAmount.toLocaleString()}`;
document.getElementById('remaining-amount').textContent = `$${remainingAmount.toLocaleString()}`;
const remainingCircle = document.querySelector('.remaining-circle');
const remainingAmountElement = document.getElementById('remaining-amount');
if (democratAmount > republicanAmount) {
remainingCircle.style.borderColor = '#0015BC';
remainingCircle.style.color = '#0015BC';
remainingAmountElement.style.color = '#0015BC';
remainingCircle.querySelector('p').innerHTML = 'Towards <br> Democratic';
} else if (republicanAmount > democratAmount) {
remainingCircle.style.borderColor = '#FF0000';
remainingCircle.style.color = '#FF0000';
remainingAmountElement.style.color = '#FF0000';
remainingCircle.querySelector('p').innerHTML = 'Towards <br> Republican';
} else {
remainingCircle.style.borderColor = '#c29d25';
remainingCircle.style.color = '#c29d25';
remainingAmountElement.style.color = '#c29d25';
remainingCircle.querySelector('p').innerHTML = ' ';
}
}
function updateDaysRemaining() {
const now = new Date();
const lastDayOfWeek = new Date(now);
const dayOfWeek = now.getDay();
const daysUntilSunday = 7 - dayOfWeek;
lastDayOfWeek.setDate(now.getDate() + daysUntilSunday);
const timeDifference = lastDayOfWeek - now;
const daysRemaining = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
const hoursRemaining = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutesRemaining = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
const daysRemainingElement = document.getElementById('days-remaining');
if (daysRemaining > 1) {
daysRemainingElement.textContent = `${daysRemaining} days`;
} else if (daysRemaining === 1) {
daysRemainingElement.textContent = `1 day`;
} else if (hoursRemaining > 0) {
daysRemainingElement.textContent = `${hoursRemaining} hours and ${minutesRemaining} minutes`;
} else {
daysRemainingElement.textContent = `${minutesRemaining} minutes`;
}
}
const fullDescriptions = [
'Feeding America is the largest hunger-relief organization in the United States, working to provide meals to individuals and families struggling with food insecurity. Through its network of food banks, Feeding America distributes millions of meals each year to those in need, ensuring that no one has to go hungry. Every dollar donated helps put food on the table for families, children, and seniors who face hunger in communities across the country.',
'Junior Achievement (JA) inspires and prepares young people to succeed in a global economy by delivering hands-on, experiential learning in financial literacy, work readiness, and entrepreneurship. Through its programs, JA equips students with the knowledge and skills they need to make smart academic and economic decisions, empowering them to own their future success.',
'GiveWell is a nonprofit dedicated to finding and recommending the most effective charities to help donors make informed decisions. Through rigorous research and analysis, GiveWell identifies high-impact giving opportunities, ensuring that donations are used efficiently to improve lives and reduce suffering globally. Their focus on evidence-based approaches makes it easier for individuals to maximize the impact of their contributions.',
'St. Jude Children’s Research Hospital is leading the way in treating and defeating pediatric catastrophic diseases such as cancer. No family ever receives a bill from St. Jude for treatment, travel, housing, or food, ensuring that financial concerns are never a barrier to life-saving care. Their groundbreaking research and commitment to saving lives have made a global impact in the fight against childhood diseases.',
'Heifer International works to end hunger and poverty around the world by empowering communities through sustainable agriculture and economic development. By providing livestock, seeds, and training, Heifer helps families lift themselves out of poverty, ensuring they can achieve self-reliance and build better futures. Your donation can transform lives by providing resources that create lasting change',
'The American Red Cross provides emergency assistance, disaster relief, and education in the United States. With a strong commitment to helping people in need, the Red Cross offers services like blood donation, disaster response, support for military families, and international relief efforts. Your donation ensures the continuation of these life-saving services.'
];
const charityLinks = [
'<a href="https://www.feedingamerica.org/" target="_blank" class="charity-link">Learn More</a>',
'<a href="https://www.juniorachievement.org" target="_blank" class="charity-link">Learn More</a>',
'<a href="https://www.givewell.org/" target="_blank" class="charity-link">Learn More</a>',
'<a href="https://www.stjude.org/" target="_blank" class="charity-link">Learn More</a>',
'<a href="https://www.heifer.org/gift-catalog/animals/index.html" target="_blank" class="charity-link">Learn More</a>',
'<a href="https://www.redcross.org" target="_blank" class="charity-link">Learn More</a>'
];
function updateCharityContent() {
const isSmallScreen = window.innerWidth < 800;
const charityItems = document.querySelectorAll('.charity-item');
charityItems.forEach((item, index) => {
const description = item.querySelector('p');
if (isSmallScreen) {
description.innerHTML = charityLinks[index];
} else {
description.textContent = fullDescriptions[index];
}
});
}
// Add this function to handle resizing
function handleResize() {
const democratAmount = parseFloat(document.getElementById("democrat-amount").textContent.replace(/[^0-9.-]+/g,""));
const republicanAmount = parseFloat(document.getElementById("republican-amount").textContent.replace(/[^0-9.-]+/g,""));
const { charityAmount, remainingAmount } = calculateAmounts(democratAmount, republicanAmount);
updateCircleSizes(democratAmount, republicanAmount, charityAmount, remainingAmount);
}
// Call handleResize on window resize
window.addEventListener('resize', handleResize);
// Call handleResize on initial load
document.addEventListener("DOMContentLoaded", handleResize);
// Call updateDaysRemaining immediately and then every minute
updateDaysRemaining();
setInterval(updateDaysRemaining, 60000);
document.addEventListener('DOMContentLoaded', updateDaysRemaining);
updateCharityContent();
window.addEventListener('resize', updateCharityContent);