Gamertag Generator: Create Unique Gaming IDs Easily (2024)

`; const progressBar = document.getElementById('progress-bar'); const progressContainer = document.getElementById('progress-container'); progressContainer.style.display = 'block'; startProgressBar(60000, progressBar); // 60000 milliseconds (1 minutes) // Collect form data as an object const formData = new FormData(form); const data = Object.fromEntries(formData); // Create an AbortController instance and set the timeout const controller = new AbortController(); const signal = controller.signal; setTimeout(() => controller.abort(), 300000); // 300000 milliseconds (300 seconds) // Replace the URL with your API endpoint try { const response = await fetch('https://api.namegeneratorplus.com/generate', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), signal, // Add the signal to fetch options }); if (response.ok) { const generatedNames = await response.json();progressContainer.style.display = 'none'; // Hide progress bar when the response is received updateNameCard(generatedNames[0]); toggleElementById('more-names-btn'); updateMoreNamesBtn(); updateMoreNameList(generatedNames[0], generatedNames); } else { console.error('Error generating name:', response.statusText); } } catch (error) { if (error.name === 'AbortError') { console.error('Request timed out after 300 seconds'); } else { console.error('Error:', error.message); } }}); function resetNameCardAndNameList() { nameCard.style = "display: block"; nameList.style = "display: none;"; document.getElementById('more-names-btn').style.display = 'none'; nameList.innerHTML = ''; } function toggleElementById(elementId) { const element = document.getElementById(elementId); if (element.style.display === 'none') { element.style.display = 'block'; } else { element.style.display = 'none'; } } function onclickMoreNameBtn(generatedNames) { toggleElementById('name-card'); toggleElementById('name-list'); toggleMoreNamesBtn(); } function toggleMoreNamesBtn() { const element = document.getElementById("more-names-btn-txt"); if (element.innerText === 'More Names') { element.innerText = 'Back'; } else { element.innerText = 'More Names'; } } function updateNameCard(nameData) { // Clear previous results nameCard.innerHTML = ''; // Prepare sharing text with name details const sharingText = `I generated a name using namegeneratorplus.com. What do you think about it?\n\nName: ${nameData.Name}\n\nMeaning: ${nameData.Meaning}\n`; // Prepare sharing URLs (placeholders for now) const currentUrlPlaceholder = 'CURRENT_URL'; const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${currentUrlPlaceholder}&quote=${encodeURIComponent(sharingText)}`; const twitterShareUrl = `https://twitter.com/intent/tweet?url=${currentUrlPlaceholder}&text=${encodeURIComponent(sharingText)}`; const redditShareUrl = `https://www.reddit.com/submit?url=${currentUrlPlaceholder}&title=${encodeURIComponent(sharingText)}`; let meaningSection = nameData.Meaning ? `

Meaning: ${nameData.Meaning}

` : ''; let namesakesSection = nameData['Famous namesakes'] ? `

Famous Namesakes: ${nameData['Famous namesakes']}

` : ''; let sourceSection = nameData.Source ? `

Source: ${nameData.Source}

` : ''; nameCard.innerHTML = `

${nameData.Name}

${meaningSection}

${namesakesSection}

${sourceSection}

Share:

`; // Update sharing URLs with actual values const currentUrl = window.location.href; nameCard.querySelector('.share-fb').href = facebookShareUrl.replace(currentUrlPlaceholder, encodeURIComponent(currentUrl)); nameCard.querySelector('.share-twitter').href = twitterShareUrl.replace(currentUrlPlaceholder, encodeURIComponent(currentUrl)); nameCard.querySelector('.share-reddit').href = redditShareUrl.replace(currentUrlPlaceholder, encodeURIComponent(currentUrl)); } function updateMoreNamesBtn(generatedNames) { // Add an event listener to the "more-names" button const moreNamesButton = document.getElementById('more-names-btn'); moreNamesButton.addEventListener('click', onclickMoreNameBtn); }function updateNameCardAndNameListOnClick(clickedNameData, allNames) { // Update the name card with the details of the clicked name updateNameCard(clickedNameData); // Update the name list to exclude the clicked name // const updatedNameList = allNames.filter(nameData => nameData.Name !== clickedNameData.Name); updateMoreNameList(clickedNameData, allNames); // Toggle the display of the name card and name list toggleElementById('name-card'); toggleElementById('name-list'); toggleMoreNamesBtn();}function createNameBtn(nameData, allNames) { const nameDiv = document.createElement('div'); nameDiv.className = 'name-btn'; nameDiv.style = "flex: 1;"; nameDiv.innerHTML = `

${nameData.Name}

`; // Add click event listener to update name card and name list when clicked nameDiv.addEventListener('click', () => updateNameCardAndNameListOnClick(nameData, allNames)); return nameDiv;}function updateMoreNameList(clickedNameData, generatedNames) { // skip first one nameList.innerHTML = ''; // const generatedNamesExceptFirst = generatedNames.slice(1); const updatedNameList = generatedNames.filter(nameData => nameData.Name !== clickedNameData.Name); const chunkSize = 3; const nameGroups = []; for (let i = 0; i < updatedNameList.length; i += chunkSize) { nameGroups.push(updatedNameList.slice(i, i + chunkSize)); } nameGroups.forEach(nameGroup => { const nameListLine = document.createElement('div'); nameListLine.className = 'name-list-line'; nameListLine.style = "display: flex; justify-content: space-between;"; nameGroup.forEach(nameData => { // Pass all names except the first one to createNameBtn nameBtn = createNameBtn(nameData, generatedNames); nameListLine.appendChild(nameBtn); }); nameList.appendChild(nameListLine); });}function startProgressBar(duration, element) { const start = Date.now(); const end = start + duration; const widthStep = 99 / duration; function step() { const now = Date.now(); if (now >= end) { element.style.width = "99%"; return; } const progress = Math.min(99, widthStep * (now - start)); element.style.width = progress + "%"; requestAnimationFrame(step); } requestAnimationFrame(step);}});