fundraising-box-medeor-nov-2023

fundraising-box-medeor-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();
})();