const meter = document.getElementById("meter")

const container = document.querySelector(".container")
// Task:
// Write a function to wire up the festivity loader to reflect how many days are remaining until Christmas!

function festLoader() {
    const date = new Date() 
    const christmas = new Date('December 25, 2021 00:00:00') 
    const today = date.getDate()    
    meter.setAttribute("low", "6")
    meter.setAttribute("high", "12")
    meter.setAttribute("optimum", "18")
    meter.setAttribute("value", today)
    if (meter.value == 18) {
        container.innerHTML = `<h1>Merry Christmas!</h1>`
    }
    ukrLoader()
}
festLoader()

function ukrLoader() {   
    const date = new Date() 
    const christmas = new Date('January 7, 2022 00:00:00') 
    const today = date.getDate()  
    
    container.innerHTML += `<p class="ukr-title title">Ukrainian Christmas</p>
    <meter id="ukr-load" value="0" max="50"></meter>`
    
    const ukrLoad = document.getElementById("ukr-load")
    ukrLoad.setAttribute("low", "10")
    ukrLoad.setAttribute("high", "22")
    ukrLoad.setAttribute("optimum", "34")
    ukrLoad.setAttribute("value", today)
    if (ukrLoad.value == 50) {
        container.innerHTML += `<p>Merry Christmas!<img src="https://cdn-icons-png.flaticon.com/512/197/197572.png" width="16px"/></p>`
    }
}





// Stretch goals:
// - Animate the loader.
// - Change the colors depending on the meter's value.