script.js

let brand = document.querySelector("#brand")
let generate = document.querySelector("#generate")
let display = document.querySelector("#display")
let reset = document.querySelector("#reset")
let clipboard = document.querySelector(".clipboard")
let brandName;

/**
 *  Brand Suffixes
 */
const BRANDSUFFIXES = [
    "Hub", 
    "Forge", 
    "HQ", 
    "Zone", 
    "Gen", 
    "Works", 
    "Creative", 
    "Solutions", 
    "Legacy", 
    "Zilla", 
    "Serve", 
    "Ant",
    "Land",
    "Scape",
    "Labs",
    "Age",
]

/**
 *  Random number generator
 */
function getRandomNumber() {
    return Math.floor(Math.random() * 15) + 1;
}

/**
 *  Event Listener
 */
generate.addEventListener("click", ()=>{
    let brandTitle = brand.value
    let randomNumber = getRandomNumber()

    display.style.padding = "5px 10px"

    if(brandTitle == ""){
        display.innerHTML = "Kindly enter brand title"
    }
    else{

        brandName = BRANDSUFFIXES[randomNumber + 1] != undefined 
            ? `${brandTitle} ${BRANDSUFFIXES[randomNumber + 1]}`
            : `${brandTitle} Gen` 
        
        display.innerHTML = brandName + `<div class="clipboard"><i class="fa-solid fa-clipboard"></i></div>`
    }
})

reset.addEventListener("click", ()=> {
    brand.value = ""
})

display.addEventListener("click", ()=> {
    navigator.clipboard.writeText(display.innerText)
    
    display.innerHTML = brandName + `<div class="clipboard"><i class="fa-solid fa-check"></i></div>`
    
    alert("Copied!")
})