đļ Baby Name Generator
â Favorite Names (Drag to Reorder)
đĄ Suggested Names
// Sample Data
const data = {
"boy": {
"islamic": {
"A":[
{"en":"Ayaan","bn":"āĻāϝāĻŧāĻžāύ","meaning_en":"Gift of God","meaning_bn":"āĻāĻļā§āĻŦāϰā§āϰ āĻāĻĒāĻšāĻžāϰ"},
{"en":"Ahmed","bn":"āĻāĻšāĻŽā§āĻĻ","meaning_en":"Most Praised","meaning_bn":"āϏāϰā§āĻŦāĻžāϧāĻŋāĻ āĻĒā§āϰāĻļāĻāϏāĻŋāϤ"},
{"en":"Ali","bn":"āĻāϞā§","meaning_en":"Exalted, Noble","meaning_bn":"āĻāĻā§āĻ, āĻŽāĻšā§"},
{"en":"Arham","bn":"āĻāϰāĻšāĻžāĻŽ","meaning_en":"Merciful","meaning_bn":"āĻĻāϝāĻŧāĻžāϞā§"}
],
"B":[{"en":"Bilal","bn":"āĻŦāĻŋāϞāĻžāϞ","meaning_en":"Fresh Water","meaning_bn":"āϤāĻžāĻāĻž āĻĒāĻžāύāĻŋ"}]
},
"general": {
"A":[{"en":"Liam","bn":"āϞāĻŋāϝāĻŧāĻžāĻŽ","meaning_en":"Strong protector","meaning_bn":"āĻļāĻā§āϤāĻŋāĻļāĻžāϞ⧠āϰāĻā§āώāĻ"}]
}
},
"girl": {
"islamic": {
"A":[{"en":"Aisha","bn":"āĻāϝāĻŧā§āĻļāĻž","meaning_en":"Alive, Prosperous","meaning_bn":"āĻā§āĻŦāĻŋāϤ, āϏāĻŽā§āĻĻā§āϧ"}]
},
"general": {
"A":[{"en":"Emma","bn":"āĻāĻŽāĻž","meaning_en":"Universal","meaning_bn":"āϏāϰā§āĻŦāĻāύā§āύ"}]
}
}
};
let currentPage=1;
const namesPerPage=1;
let selectedAlphabet="A";
let favorites=JSON.parse(localStorage.getItem("favorites"))||[];
// Alphabet Filter
const alphabetFilterDiv=document.getElementById("alphabetFilter");
for(let i=65;i<=90;i++){ const letter=String.fromCharCode(i); const btn=document.createElement("button"); btn.innerText=letter; btn.style.margin="3px"; btn.style.padding="5px 12px"; btn.style.cursor="pointer"; btn.style.borderRadius="4px"; btn.style.border="1px solid #4CAF50"; btn.style.background="#fff"; btn.style.color="#4CAF50"; btn.onclick=()=>{ selectedAlphabet=letter; currentPage=1; displayNames(); };
alphabetFilterDiv.appendChild(btn);
}
// Display Names
function displayNames(){
const gender=document.getElementById("gender").value;
const type=document.getElementById("type").value;
const searchText=document.getElementById("searchInput").value.toLowerCase();
let list=(data[gender][type][selectedAlphabet]||[]);
if(searchText) list=list.filter(n=>n.en.toLowerCase().includes(searchText)||n.bn.includes(searchText));
if(list.length===0){
document.getElementById("output").innerText="No name found!";
document.getElementById("pagination").innerHTML="";
document.getElementById("suggested").innerHTML="";
return;
}
const totalPages=Math.ceil(list.length/namesPerPage);
if(currentPage>totalPages) currentPage=totalPages;
const start=(currentPage-1)*namesPerPage;
const end=start+namesPerPage;
const pageItems=list.slice(start,end);
// Main output cards
const outputDiv=document.getElementById("output");
outputDiv.innerHTML="";
pageItems.forEach(n=>{
const card=document.createElement("div");
card.className="name-card";
card.innerHTML=`${n.en} (${n.bn})
`;
card.addEventListener("click",()=>copyName(`${n.en} (${n.bn})`));
card.querySelector(".detail-btn").addEventListener("click",(e)=>{
e.stopPropagation();
openModal(n.en,n.bn,n.meaning_en,n.meaning_bn);
});
card.querySelector(".favorite-btn").addEventListener("click",(e)=>{
e.stopPropagation();
addToFavorites(n.en,n.bn,n.meaning_en,n.meaning_bn);
});
outputDiv.appendChild(card);
});
// Pagination
const paginationHTML=[];
if(currentPage>1) paginationHTML.push(``);
if(currentPage
document.getElementById("pagination").innerHTML=paginationHTML.join("");
// Suggested Names
const suggestedContainer=document.getElementById("suggested");
suggestedContainer.innerHTML="";
const suggestedList=list.slice(end,end+10);
suggestedList.forEach(n=>{
const card=document.createElement("div");
card.className="name-card";
card.innerHTML=`${n.en} (${n.bn})
`;
card.addEventListener("click",()=>copyName(`${n.en} (${n.bn})`));
card.querySelector(".suggested-btn").addEventListener("click",(e)=>{
e.stopPropagation();
openModal(n.en,n.bn,n.meaning_en,n.meaning_bn);
});
suggestedContainer.appendChild(card);
});
updateFavorites();
}
// Modal
function openModal(en,bn,meaning_en,meaning_bn){
document.getElementById("modalContent").innerHTML=`
${en} (${bn})
Meaning (EN): ${meaning_en}
Meaning (BN): ${meaning_bn}
`;
document.getElementById("detailModal").style.display="block";
}
function closeModal(){ document.getElementById("detailModal").style.display="none"; }
document.getElementById("detailModal").addEventListener("click", e=>{ if(e.target===document.getElementById("detailModal")) closeModal(); });
// Favorites
function addToFavorites(en,bn,meaning_en,meaning_bn){
if(!favorites.some(f=>f.en===en)){
favorites.push({en,bn,meaning_en,meaning_bn});
localStorage.setItem("favorites",JSON.stringify(favorites));
updateFavorites();
}
}
function removeFavorite(en){
favorites=favorites.filter(f=>f.en!==en);
localStorage.setItem("favorites",JSON.stringify(favorites));
updateFavorites();
}
function updateFavorites(){
const favContainer=document.getElementById("favorites");
favContainer.innerHTML="";
favorites.forEach((n,index)=>{
const card=document.createElement("div");
card.className="name-card";
card.draggable=true;
card.dataset.index=index;
card.innerHTML=`${n.en} (${n.bn})
`;
card.addEventListener("click",()=>copyName(`${n.en} (${n.bn})`));
card.querySelector(".detail-btn").addEventListener("click",(e)=>{
e.stopPropagation();
openModal(n.en,n.bn,n.meaning_en,n.meaning_bn);
});
card.querySelector(".remove-btn").addEventListener("click",(e)=>{
e.stopPropagation();
removeFavorite(n.en);
});
card.addEventListener('dragstart', dragStart);
card.addEventListener('dragover', dragOver);
card.addEventListener('drop', dropCard);
favContainer.appendChild(card);
});
}
// Drag & Drop
let draggedIndex=null;
function dragStart(e){ draggedIndex=e.target.dataset.index; }
function dragOver(e){ e.preventDefault(); }
function dropCard(e){
const targetIndex=e.target.closest('.name-card').dataset.index;
if(draggedIndex===null||targetIndex===undefined) return;
const temp=favorites[draggedIndex];
favorites[draggedIndex]=favorites[targetIndex];
favorites[targetIndex]=temp;
localStorage.setItem("favorites",JSON.stringify(favorites));
updateFavorites();
draggedIndex=null;
}
// Copy Name (no notification)
function copyName(name){
navigator.clipboard.writeText(name);
}
// Pagination
function nextPage(){ currentPage++; displayNames(); }
function prevPage(){ currentPage--; displayNames(); }
// Search
document.getElementById("searchInput").addEventListener("input", ()=>{ currentPage=1; displayNames(); });
// Initial Load
displayNames();
