// * * * * * PRAISE * * * * *
// FUNCTIONALITY:
// - sends number to pager
// - great hover effects!
// - audio works great!
// - responsive
// CODE FORMATTING:
// - easy to read and follow! 
// NAMING CONVENTIONS:
// -  self-explanatory
// CONSISTENCY: 
// - declaring constants globally
// SIMPLICITY:
// - short and sweet!
// * * * * * SUGGESTIONS * * * * *
// FUNCTIONALITY:
// - maybe limit the amount of numbers to be sent to pager
// - disable reset and send buttons when they've been clicked
// - then enable them again
// CODE FORMATTING: 
// - add semantic html elements to clearly define content
// - https://www.w3schools.com/accessibility/accessibility_semantic_elements.php
// CSS:
// - keep width fixed for .pager-container
// - maybe add a media query 


const numbersGridEl = document.getElementById("numbers-grid");
const senderMessageEl = document.getElementById("sender-message")
const receivedMessageEl = document.getElementById("pager-received-message")
const resetBtn = document.getElementById("reset-btn");
const sendBtn = document.getElementById("send-btn");

numbersGridEl.addEventListener("click", function(e){
    if (e.target.dataset.input) {
        senderMessageEl.innerHTML += e.target.dataset.input
    }
})

function sendMessage() {
    receivedMessageEl.innerHTML = senderMessageEl.innerHTML
    const audio = new Audio("assets/pager.wav");
    audio.play();
}

function resetMessage() {
    receivedMessageEl.innerHTML = ""
    senderMessageEl.innerHTML = ""
}

sendBtn.addEventListener("click", function() {
    setTimeout(sendMessage, 2000)
    setTimeout(resetMessage, 8000)
})
resetBtn.addEventListener("click", resetMessage)