how to render both localStorage value plus new user input without deleteing the other

Viewed 19

i'm making a countdown timer with vanilla JS. Im having trouble with rendering saved values with local storage and new input

so if the user sets a new countdown date it get displayed and if the user click save it gets saved so when the user refresh the page it will get displayed but my problem is that if theres a saved value displayed and the user tries to add new value it wont show unless the saved value gets deleted.

I want to display both saved value and new input value

know i need to use array but i couldn't get it to work! I also tried using array objects didn't work with me

github repo for the code

let inputM 
let inputDay
const inputYear = 2022
let runOrNot = 0
let interval
let countDownDate
let storedCount 

storedCount = JSON.parse(localStorage.getItem('count'))

function inputFunc() {
    runOrNot++
    if (runOrNot > 1) {
        run()
    }
}
document.getElementById('inputMonth').addEventListener('keyup', event => {
    inputM = event.target.value
    inputFunc()
})

document.getElementById('inputday').addEventListener('keyup', e => {
    inputDay = e.target.value
    inputFunc()
})

function run() {
    clearInterval(interval)
    
    //this logic is inefficient cause the user can't enter new countdown!
    //if there is saved countDown render the saved one 
    //else render the new input countdown
    if (storedCount) {
        countDownDate = storedCount
        console.log('i have value!!')
    } else {
        countDownDate = new Date(`${inputM} ${inputDay}, ${inputYear}`).getTime()
    }
    
    // Update the count down every 1 second
    interval = setInterval(function() {
    
        // Get today's date and time
        const now = new Date().getTime()
    
        // Find the distance between now and the count down date
        const distance = countDownDate - now
        
        // Time calculations for days, hours, minutes and seconds
        const days = Math.floor(distance / (1000 * 60 * 60 * 24))
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
            
        // Output the result
        document.getElementById("output").innerHTML = days + "d " + hours + "h "
        + minutes + "m "
            
        // If the count down is over, write some text 
        if (distance < 0) {
            clearInterval(interval)
            document.getElementById("output").innerText = "EXPIRED"
        }
    }, 1000)
}

if(storedCount) {

    run()
}

document.getElementById('save-btn').addEventListener('click', () => {
    localStorage.setItem('count', JSON.stringify(countDownDate) )
})

//clear localStorage
document.getElementById('delete-btn').addEventListener('click', () => {
    localStorage.removeItem("count");
    storedCount = undefined
    run()
    clearInterval(interval)
    //clear the text 
    document.getElementById('output').innerText = ''
})
0 Answers
Related