parent
3933247e4a
commit
8d130b1e7b
@ -0,0 +1,133 @@
|
||||
/********* CONSTANTS AND GLOBAL VARS *********/
|
||||
const SubList = [
|
||||
'LinkedIn Premium',
|
||||
'Netflix',
|
||||
'Hulu',
|
||||
'Crunchyroll',
|
||||
'Youtube Premium',
|
||||
'Skillshare',
|
||||
]
|
||||
|
||||
let subscriptions = []
|
||||
let numSubs = 0
|
||||
const pricePattern = /^(\$)?(\d+(\.\d{1,2})?)$/
|
||||
const avgDaysInMonth = 30.475
|
||||
let costOfCoffee = 2.50
|
||||
let costTotal = 0
|
||||
let addFormOpen = false
|
||||
|
||||
const PriceList = [
|
||||
'$5',
|
||||
'$10',
|
||||
'$12',
|
||||
'$15',
|
||||
'$20'
|
||||
]
|
||||
|
||||
/***************** FUNCTION DEFINITIONS **************/
|
||||
|
||||
function addSubscription(name, price) {
|
||||
// make sure no sub text is hidden
|
||||
$('.no-subs-text').hide()
|
||||
// inc. sub count
|
||||
numSubs++
|
||||
$('#addSubFormContainer').after(`
|
||||
<div class="sub-item-container" id="subscription-${numSubs}">
|
||||
<div class="sub-item">
|
||||
<p>${name}</p>
|
||||
<p>${formatPrice(price)}</p>
|
||||
</div>
|
||||
</div>`)
|
||||
costTotal += price
|
||||
|
||||
// update display
|
||||
let dailyCost = costTotal / avgDaysInMonth
|
||||
$('#cost-display').text(`${formatPrice(dailyCost)}`)
|
||||
$('#coffee-count').text(`${(dailyCost / costOfCoffee).toFixed(2)}`)
|
||||
}
|
||||
|
||||
function processSubValue() {
|
||||
let priceString = $('#subPrice').val()
|
||||
if (priceString[0] == '$') {
|
||||
priceString = priceString.slice(1)
|
||||
}
|
||||
return Number(priceString)
|
||||
}
|
||||
|
||||
function formatPrice(num) {
|
||||
return '$' + (Math.round(num * 100) / 100).toFixed(2)
|
||||
}
|
||||
|
||||
function validatePrice() {
|
||||
let priceString = $('#subPrice').val()
|
||||
if (!priceString.match(pricePattern)) {
|
||||
$('#subPrice').addClass('error')
|
||||
return false
|
||||
} else {
|
||||
$('#subPrice').removeClass('error')
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
/*************** APP INITIALIZATION *************/
|
||||
|
||||
// Populate saved subscriptions from localStorage
|
||||
|
||||
if (localStorage.getItem('subscriptions') != null) {
|
||||
subscriptions = JSON.parse(localStorage.getItem('subscriptions'))
|
||||
|
||||
for (let sub of subscriptions) {
|
||||
addSubscription(sub.name, sub.price)
|
||||
}
|
||||
}
|
||||
|
||||
/******************* EVENT LISTENERS *****************/
|
||||
|
||||
$('#addSubButton').click(() => {
|
||||
if (!addFormOpen) {
|
||||
$('#addSubFormContainer').show()
|
||||
} else {
|
||||
$('#addSubFormContainer').hide()
|
||||
}
|
||||
addFormOpen = !addFormOpen
|
||||
})
|
||||
|
||||
$('#subName').autocomplete({
|
||||
source: SubList,
|
||||
delay: 0,
|
||||
minLength: 0,
|
||||
})
|
||||
|
||||
$('#subPrice').autocomplete({
|
||||
source: PriceList,
|
||||
delay: 0,
|
||||
minLength: 0,
|
||||
})
|
||||
|
||||
$('#subPrice').on('focus', () => {
|
||||
$('#subPrice').autocomplete('search', '')
|
||||
})
|
||||
|
||||
$('#confirmSubButton').click(() => {
|
||||
if (!validatePrice()) {
|
||||
// disallow submit
|
||||
console.log('nope')
|
||||
return
|
||||
}
|
||||
|
||||
let price = processSubValue()
|
||||
|
||||
addSubscription($('#subName').val(), price)
|
||||
|
||||
subscriptions.push({
|
||||
name: $('#subName').val(),
|
||||
price: price,
|
||||
})
|
||||
localStorage.setItem('subscriptions', JSON.stringify(subscriptions))
|
||||
|
||||
$('#subPrice').val('')
|
||||
$('#subName').val('')
|
||||
|
||||
$('#addSubFormContainer').hide()
|
||||
addFormOpen = !addFormOpen
|
||||
})
|
||||
Loading…
Reference in new issue