document.addEventListener('DOMContentLoaded', () => {
const categoriesContainer = document.querySelector('.categories');
const generateNameBtn = document.getElementById('generateNameBtn');
const generatedNamesContainer = document.getElementById('generatedNames');
const favoriteNamesContainer = document.getElementById('favoriteNames');
const themeToggle = document.getElementById('checkbox');
const categoryHint = document.querySelector('.category-hint');
const noNameMessage = document.querySelector('.no-name-message');
const noFavMessage = document.querySelector('.no-fav-message');
const currentYearSpan = document.getElementById('currentYear');
const toggleBulkGenerateBtn = document.getElementById('toggleBulkGenerate');
const bulkGenerateContainer = document.getElementById('bulkGenerateContainer');
const numNamesInput = document.getElementById('numNames');
const bulkGenerateBtn = document.getElementById('bulkGenerateBtn');
const suggestCategorySelect = document.getElementById('suggestCategory');
const suggestNameForm = document.getElementById('suggestNameForm');
const suggestedNameInput = document.getElementById('suggestedName');
const suggestReasonInput = document.getElementById('suggestReason');
const suggestionMessage = document.getElementById('suggestionMessage');
const shareFacebook = document.getElementById('shareFacebook');
const shareTwitter = document.getElementById('shareTwitter');
const shareWhatsApp = document.getElementById('shareWhatsApp');
let selectedCategory = null;
let nameData = {}; // Will be populated with categories and names
// Define categories with icons and sample names (ideally loaded from JSON)
const categories = [
{ id: 'personal-boy', name: 'Boy Names', icon: '', explanation: 'A classic boy\'s name suitable for a child.' },
{ id: 'personal-girl', name: 'Girl Names', icon: '', explanation: 'A beautiful girl\'s name perfect for a child.' },
{ id: 'personal-gender-neutral', name: 'Gender-Neutral', icon: '', explanation: 'A modern gender-neutral name for various uses.' },
{ id: 'social-youtube', name: 'YouTube Channel', icon: '', explanation: 'Great for a creative YouTube channel name.' },
{ id: 'social-facebook', name: 'Facebook Page', icon: '', explanation: 'An engaging name for a Facebook page or profile.' },
{ id: 'social-instagram', name: 'Instagram Handle', icon: '', explanation: 'A catchy Instagram handle to stand out.' },
{ id: 'social-tiktok', name: 'TikTok Username', icon: '', explanation: 'A fun and memorable TikTok username.' },
{ id: 'social-gaming', name: 'Gaming ID', icon: '', explanation: 'An epic gaming ID for online adventures.' },
{ id: 'pets-dog', name: 'Dog Names', icon: '', explanation: 'A charming name for your canine companion.' },
{ id: 'pets-cat', name: 'Cat Names', icon: '', explanation: 'A cute name for your feline friend.' },
{ id: 'pets-other', name: 'Other Pet Names', icon: '', explanation: 'A unique name for any kind of pet.' },
{ id: 'city', name: 'City/Place Names', icon: '', explanation: 'An imaginative name for a fictional city or place.' },
{ id: 'fantasy', name: 'Fantasy/Fictional', icon: '', explanation: 'Ideal for characters, realms, or magical items in fantasy stories.' },
{ id: 'business', name: 'Business/Brand', icon: '', explanation: 'A professional and memorable name for a business or brand.' },
{ id: 'unique', name: 'Unique/Creative', icon: '', explanation: 'A truly unique and creative name for various innovative projects.' },
];
// Placeholder names (in a real app, these would be extensive and loaded from JSON)
nameData = {
'personal-boy': {
names: ['Arthur', 'Leo', 'Milo', 'Finn', 'Caleb', 'Ethan', 'Oliver', 'Liam', 'Noah', 'Elijah'],
explanation: 'A classic boy\'s name suitable for a child.'
},
'personal-girl': {
names: ['Willow', 'Luna', 'Hazel', 'Aria', 'Chloe', 'Sophia', 'Olivia', 'Ava', 'Isabella', 'Mia'],
explanation: 'A beautiful girl\'s name perfect for a child.'
},
'personal-gender-neutral': {
names: ['Kai', 'Dakota', 'Rowan', 'Jamie', 'Alex', 'Riley', 'Jordan', 'Taylor', 'Casey', 'Peyton'],
explanation: 'A modern gender-neutral name for various uses.'
},
'social-youtube': {
names: ['VentureVision', 'PixelPulse', 'CreativeCrafter', 'TheDailyStream', 'FusionFocus', 'EpicExplorer', 'GameGlimpse', 'TechTrekker', 'ArtificeArcade', 'MindMeld'],
explanation: 'Great for a creative YouTube channel name.'
},
'social-facebook': {
names: ['ConnectHub', 'CommunitySphere', 'InfoStream', 'TheSocialLink', 'GatherGrid', 'FriendFinds', 'DailyDigests', 'EchoExchange', 'PortalPath', 'InsightInteract'],
explanation: 'An engaging name for a Facebook page or profile.'
},
'social-instagram': {
names: ['VividLens', 'AestheticFlow', 'DailyGlow', 'InstaMuse', 'PixelPerfection', 'FrameFancy', 'VisualVibe', 'ShutterSense', 'FilterFables', 'MomentMagic'],
explanation: 'A catchy Instagram handle to stand out.'
},
'social-tiktok': {
names: ['ClipCraze', 'DanceDose', 'VibeViral', 'SoundSway', 'ByteBurst', 'RhythmReel', 'TrendTrail', 'GrooveGenie', 'SpinSync', 'FlickFlow'],
explanation: 'A fun and memorable TikTok username.'
},
'social-gaming': {
names: ['ShadowSpecter', 'PixelPhantom', 'AuraBlast', 'VortexViper', 'CyberSlayer', 'GlitchGuardian', 'CrimsonKnight', 'StormBreaker', 'ZenithZephyr', 'NovaNomad'],
explanation: 'An epic gaming ID for online adventures.'
},
'pets-dog': {
names: ['Buddy', 'Max', 'Luna', 'Daisy', 'Charlie', 'Bella', 'Cooper', 'Lucy', 'Rocky', 'Sophie'],
explanation: 'A charming name for your canine companion.'
},
'pets-cat': {
names: ['Whiskers', 'Mittens', 'Tiger', 'Shadow', 'Smokey', 'Salem', 'Cleo', 'Oreo', 'Kitty', 'Jasper'],
explanation: 'A cute name for your feline friend.'
},
'pets-other': {
names: ['Pip', 'Gizmo', 'Sparky', 'Patches', 'Noodle', 'Squiggle', 'Flicker', 'Mochi', 'Zippy', 'Pebble'],
explanation: 'A unique name for any kind of pet.'
},
'city': {
names: ['Silverwood', 'Skyhaven', 'Oakhaven', 'Stonebridge', 'Aethelgard', 'Veridian', 'Cinderfall', 'Brightwater', 'Solara', 'Moonstone'],
explanation: 'An imaginative name for a fictional city or place.'
},
'fantasy': {
names: ['Elara', 'Thornwick', 'Aethelred', 'Gryphonheart', 'Mysticglade', 'Aurion', 'Shadowfen', 'Runestone', 'Dragon\'s Peak', 'Whisperwind'],
explanation: 'Ideal for characters, realms, or magical items in fantasy stories.'
},
'business': {
names: ['InnovateHub', 'Proton Solutions', 'Apex Ventures', 'Synergy Works', 'Veridian Labs', 'OptiServe', 'Elevate Innovations', 'Quantum Edge', 'Nexus Dynamics', 'Zenith Collective'],
explanation: 'A professional and memorable name for a business or brand.'
},
'unique': {
names: ['Luminary', 'Echoora', 'Stellara', 'Quasar', 'Zephyrin', 'Kaleido', 'Aethera', 'Velora', 'Chrysalis', 'Orionix'],
explanation: 'A truly unique and creative name for various innovative projects.'
}
};
// --- Initial Setup Functions ---
// Set current year in footer
currentYearSpan.textContent = new Date().getFullYear();
// Populate categories and suggest name dropdown
function populateCategories() {
categories.forEach(cat => {
const button = document.createElement('button');
button.className = 'category-btn';
button.dataset.categoryId = cat.id;
button.innerHTML = `${cat.icon || '✨'} ${cat.name}`;
categoriesContainer.appendChild(button);
// Add to suggest name dropdown
const option = document.createElement('option');
option.value = cat.id;
option.textContent = cat.name;
suggestCategorySelect.appendChild(option);
});
}
// Load favorites from local storage
function loadFavorites() {
const favorites = JSON.parse(localStorage.getItem('favoriteNames')) || [];
favorites.forEach(nameObj => displayFavoriteName(nameObj.name, nameObj.category, nameObj.explanation));
updateNoFavMessage();
}
// Initialize theme
function initializeTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
themeToggle.checked = true;
} else {
document.documentElement.setAttribute('data-theme', 'light');
themeToggle.checked = false;
}
}
// --- UI Update Functions ---
function updateNoNameMessage() {
if (generatedNamesContainer.children.length === 0) {
noNameMessage.style.display = 'block';
} else {
noNameMessage.style.display = 'none';
}
}
function updateNoFavMessage() {
if (favoriteNamesContainer.children.length === 0) {
noFavMessage.style.display = 'block';
} else {
noFavMessage.style.display = 'none';
}
}
// --- Core Functionality ---
// Handle category selection
categoriesContainer.addEventListener('click', (e) => {
const button = e.target.closest('.category-btn');
0 Comments