Skip to content

Instantly share code, notes, and snippets.

@edjw
Last active December 1, 2023 15:28
Show Gist options
  • Save edjw/28ef03f3d3ca001dbcb5f3026f7dad34 to your computer and use it in GitHub Desktop.
Save edjw/28ef03f3d3ca001dbcb5f3026f7dad34 to your computer and use it in GitHub Desktop.
fundraising-box-medeor-nov-2023
// Also this in on-page CSS
// @keyframes fadeIn {
// 0% {opacity: 0;}
// 100% {opacity: 1;}
// }
// .fade-in {
// animation: fadeIn 1s;
// }
(function () {
function hideDonationAmountAndInterval() {
const amountBox = document.querySelector(`#amountBox`);
if (amountBox) {
amountBox.classList.add("hidden");
amountBox.classList.add("fade-in");
}
}
function showDonationAmountAndInterval() {
const amountBox = document.querySelector(`#amountBox`);
if (amountBox) {
amountBox.classList.remove("hidden");
}
}
function hideDonationSummarySection() {
const donationSummarySection = document.querySelector(
`#donationSummarySection`
);
if (donationSummarySection) {
donationSummarySection.classList.add("hidden");
donationSummarySection.classList.add("fade-in");
}
}
function getDonationAmount() {
const selectedDonationAmountInput = document.querySelector(
'input[name="amountChoice"]:checked'
);
let donationAmount = null; // a number
if (selectedDonationAmountInput) {
// Convert input value to floating point number
// Check if the converted value is a number (not NaN) using 'isNaN()'
// If it's not a number (isNaN is true), assign null to 'donationAmount' as this is treated as an invalid input
// If the conversion was successful (isNaN is false), use this converted number value for 'donationAmount'
donationAmount = isNaN(parseFloat(selectedDonationAmountInput.value))
? null
: parseFloat(selectedDonationAmountInput.value);
}
return donationAmount;
}
function getDonationInterval() {
const donationIntervalInput = document.querySelector(
'select[name="payment[interval]"]'
);
let donationInterval = null; // einmalig oder monatlich
if (donationIntervalInput) {
donationInterval = donationIntervalInput.selectedOptions[0].innerText;
}
return donationInterval;
}
function createDonationSummaryHTML(donationAmount, donationInterval) {
function capitaliseFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
const capitalisedDonationInterval = capitaliseFirstLetter(donationInterval);
const donationSummaryHTML = `
<section
id="donationSummarySection"
class="fade-in"
style="
display: flex;
align-items: center;
justify-content: space-between;
margin: 2rem 0;
"
>
<p style="font-size: 18px; color: #303033;">
<span style="font-weight: 700;">${capitalisedDonationInterval}e</span> Spende von <span style="font-weight: 700;">€${donationAmount}</span>
</p>
<button
id="changeDonationButton"
class="btn btn-default"
>
Ändern
</button>
</section>
`;
return donationSummaryHTML;
}
function insertDonationSummaryHTML() {
const wrapperBlock = document.querySelector(`#wrapper`);
if (!wrapperBlock) {
return;
}
const donationAmount = getDonationAmount();
const donationInterval = getDonationInterval();
if (!donationAmount || !donationInterval) {
showDonationAmountAndInterval();
}
if (donationAmount && donationInterval) {
wrapperBlock.insertAdjacentHTML(
"afterbegin",
createDonationSummaryHTML(donationAmount, donationInterval)
);
const changeDonationButton = document.querySelector(
`#changeDonationButton`
);
if (changeDonationButton) {
changeDonationButton.addEventListener("click", function () {
showDonationAmountAndInterval();
hideDonationSummarySection();
});
}
}
}
hideDonationAmountAndInterval();
insertDonationSummaryHTML();
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment