User:Polygnotus/Scripts/GetAPIBatch.js: Difference between revisions

Revision as of 22:11, 26 August 2024

Latest revision as of 00:25, 9 September 2024

(5 intermediate revisions by the same user not shown)

Line 1:

(function() {

'use strict';

Line 15 ⟶ 14:

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

z-index: 9999;

max-width: 300px;

}

#word-display, #typo-display {

font-size: 1.2rem;

margin-bottom: 0.5rem;

min-height: 1.5rem;

}

#typo-display {

color: red;

}

#next-button {

Line 31 ⟶ 33:

font-size: 0.7rem;

color: #666;

}

#article-name {

margin-top: 0.5rem;

font-style: italic;

}

`;

Line 40 ⟶ 46:

container.id = 'word-fetcher-container';

container.innerHTML = `

<div id="word-display">ClickCorrect: 'Next Word' to start</div>

<div id="typo-display">Typo: </div>

<div id="article-name"></div>

<button id="next-button">Next Word</button>

<div id="debug-info"></div>

Line 51 ⟶ 59:

this.words = [];

this.currentIndex = 0;

this.displayElementwordDisplayElement = document.getElementById('word-display');

this.typoDisplayElement = document.getElementById('typo-display');

this.nextButton = document.getElementById('next-button');

this.debugElement = document.getElementById('debug-info');

this.articleNameElement = document.getElementById('article-name');

this.nextButton.addEventListener('click', () => this.displayNextWorddisplayNextWordAndNavigate());

this.fetchWords();

Line 63 ⟶ 73:

try {

const response = await fetch('http://localhost:8082/output', {

mode: 'cors', // This line is added to explicitly request CORS

});

if (!response.ok) {

Line 69 ⟶ 79:

}

const newWords = await response.json();

this.words = [...this.words, ...newWords.map(this.parseWordString)];

this.updateDebugInfo();

} catch (error) {

console.error('Error fetching words:', error);

this.debugElement.textContent = `Error: ${error.message}. CORS issue likely. Check console and ensure server allows CORS.`;

this.displayElementwordDisplayElement.textContent = 'Unable to fetch words. See debug info.';

}

}

async displayNextWordparseWordString(wordString) {

const [correct, typo, articleName] = wordString.split('|');

return { correct, typo, articleName };

}

async displayNextWordAndNavigate() {

if (this.currentIndex >= this.words.length) {

await this.fetchWords();

Line 84 ⟶ 99:

if (this.words.length > 0) {

this.displayElement.textContentconst currentWord = this.words[this.currentIndex];

this.wordDisplayElement.textContent = `Correct: ${currentWord.correct}`;

this.typoDisplayElement.textContent = `Typo: ${currentWord.typo}`;

this.articleNameElement.textContent = `Article: ${currentWord.articleName}`;

this.navigateToWikipedia(currentWord.articleName);

this.currentIndex++;

Line 93 ⟶ 114:

}

} else {

this.displayElementwordDisplayElement.textContent = 'No words available. Check debug info.';

this.typoDisplayElement.textContent = '';

this.articleNameElement.textContent = '';

}

this.updateDebugInfo();

}

navigateToWikipedia(articleName) {

const encodedArticleName = encodeURIComponent(articleName.replace(/ /g, '_'));

const articleUrl = `https://en.wikipedia.org/wiki/${encodedArticleName}`;

window.open(articleUrl, '_blank');

}