let letterCloseButton = document.querySelector('.letter-close-button')
let txtBox = document.querySelector('.txtBox')
let focusBorder = document.querySelector('.focus-border')
txtBox.focus()
document.querySelector(".serachBtn").value = ""

function myFunction(x) {
    if (x.matches) {
        txtBox.addEventListener("click", () => {
            document.documentElement.scrollTop = 200
            setTimeout(() => {
                document.documentElement.scrollTop = 200
            }, 150);
        })
    } else {
        console.log("false");
    }
}
var x = window.matchMedia("(max-width: 768px)")
myFunction(x)
x.addListener(myFunction)

txtBox.addEventListener('input', (e) => {
    if (e.target.value === "") {
        letterCloseButton.style.display = "none"
        // letterCloseButton.classList.remove("close_ltr_icon")
    }
    else {
        letterCloseButton.style.display = "block"
        // letterCloseButton.classList.add("close_ltr_icon")
    }

    focusBorder.classList.remove("focus-border")
    e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "")
    let rangeOfBlankTile = 3
    if (rangeOfBlankTile === "") {
        rangeOfBlankTile = 3
    }
    e.target.value = e.target.value.replace(/ /g, '?')
    let data = []
    data = e.target.value.split('').filter((i) => i === '?')
    if (data.length > rangeOfBlankTile) {
        e.target.value = e.target.value.replace(/\?$/, '')
    }
})

letterCloseButton.addEventListener("click", () => {
    txtBox.value = ""
    letterCloseButton.style.display ="none"
})