Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Castos Monthly Annual Price Table Toggle JS
/* Get Our Elements */
const starterPrice = document.querySelector('.starter-price');
const starterUom = document.querySelector('.starter-uom');
const growthPrice = document.querySelector('.growth-price');
const growthUom = document.querySelector('.growth-uom');
const proPrice = document.querySelector('.pro-price');
const proUom = document.querySelector('.pro-uom');
const btnMonthly = document.querySelector('.btn-monthly');
const btnAnnual = document.querySelector('.btn-annual');
const planDescription = document.querySelector('.plan-description');
/* Build out functions */
function toggleToMonthly() {
btnMonthly.classList.add('active');
btnAnnual.classList.remove('active');
starterPrice.innerHTML = '$19';
growthPrice.innerHTML = '$49';
proPrice.innerHTML = '$99';
starterUom.innerHTML = '/ month';
growthUom.innerHTML = '/ month';
proUom.innerHTML = '/ month';
planDescription.innerHTML = "No contracts, no cancellation fees. <br />Let's get started."
}
function toggleToAnnual() {
btnMonthly.classList.remove('active');
btnAnnual.classList.add('active');
starterPrice.innerHTML = '$190';
growthPrice.innerHTML = '$490';
proPrice.innerHTML = '$990';
starterUom.innerHTML = '/ year';
growthUom.innerHTML = '/ year';
proUom.innerHTML = '/ year';
planDescription.innerHTML = "Save 20% automatically. Get two months FREE when you choose an annual plan."
}
/* Hook up the event listeners */
btnMonthly.addEventListener('click', toggleToMonthly);
btnAnnual.addEventListener('click', toggleToAnnual);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment