Edis• 1,220
@edo979
Posted
Hello. Great work. I read your javascript file and add some changes. You javascript is excellent do not worry. I did this because I was bored and love javascript.
let data = [],
selectedTimeFrame = 'daily'
const buttons = Array.from(document.querySelectorAll('[data-show]'))
const currentElements = Array.from(document.querySelectorAll('.current-data'))
const previousElements = Array.from(document.querySelectorAll('.previous-data'))
fetch('../data.json')
.then((res) => res.json())
.then((result) => {
data = result
updateView()
})
// Event listeners
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
selectedTimeFrame = e.target.dataset.show
updateView()
})
})
function updateView() {
data.forEach((activity, i) => {
const currentValue = activity.timeframes[selectedTimeFrame].current
currentElements[i].textContent = currentValue + getTimeUnits(currentValue)
previousElements[i].textContent = formatTextPrevEl(
activity.timeframes[selectedTimeFrame].previous
)
})
}
// Utility
function getTimeUnits(value) {
return value > 1 ? 'hrs' : 'hr'
}
function formatTextPrevEl(number) {
const timeUnit = getTimeUnits(number)
switch (selectedTimeFrame) {
case 'daily':
return `${number}${timeUnit} - yesterday`
case 'weekly':
return `last week - ${number}${timeUnit}`
case 'monthly':
return `last month - ${number}${timeUnit}`
default:
return
}
}
Marked as helpful
1
