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

Revision as of 22:19, 26 August 2024

Revision as of 22:20, 26 August 2024

Line 24:

color: red;

}

#next-button, #view-article-button {

font-size: 0.9rem;

padding: 0.3rem 0.7rem;

cursor: pointer;

margin-topright: 0.5rem;

}

#debug-info {

Line 37 ⟶ 38:

margin-top: 0.5rem;

font-style: italic;

}

#article-content {

margin-top: 1rem;

max-height: 300px;

overflow-y: auto;

border: 1px solid #ccc;

padding: 10px;

}

#article-link {

display: block;

margin-top: 0.5rem;

}

`;

Line 61 ⟶ 51:

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

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

<abutton id="view-article-link" target="_blankbutton">View full articleArticle</abutton>

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

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

`;

Line 75 ⟶ 64:

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

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

this.articleLinkElementviewArticleButton = document.getElementById('view-article-linkbutton');

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

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

this.articleContentElement = document.getElementById('article-content');

this.articleLinkElement = document.getElementById('article-link');

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

this.viewArticleButton.addEventListener('click', () => this.viewWikipediaArticle());

this.fetchWords();

Line 119 ⟶ 108:

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

this.currentIndex++;

await this.loadWikipediaArticle(currentWord.articleName);

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

Line 131 ⟶ 118:

this.typoDisplayElement.textContent = '';

this.articleNameElement.textContent = '';

this.articleContentElement.textContent = '';

this.articleLinkElement.href = '';

this.articleLinkElement.textContent = '';

}

Line 139 ⟶ 123:

}

async loadWikipediaArticleviewWikipediaArticle(articleName) {

constif encodedArticleName(this.words.length => encodeURIComponent(articleName0 && this.replace(/currentIndex /g,> '_'0)); {

const currentWord = this.words[this.currentIndex - 1];

const apiUrl = `https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts&exintro=1&explaintext=1&titles=${encodedArticleName}&origin=*`;

const articleUrlencodedArticleName = `https://enencodeURIComponent(currentWord.wikipediaarticleName.orgreplace(/wiki /${encodedArticleName}`g, '_'));

const apiUrlarticleUrl = `https://en.wikipedia.org/wwiki/api.php?action=query&format=json&prop=extracts&exintro=1&explaintext=1&titles=${encodedArticleName}&origin=*`;

try { window.open(articleUrl, '_blank');

const response = await fetch(apiUrl);

if (!response.ok) {

throw new Error('Network response was not ok');

}

const data = await response.json();

const pages = data.query.pages;

const pageId = Object.keys(pages)[0];

const extract = pages[pageId].extract;

this.articleContentElement.textContent = extract || 'No extract available for this article.';

this.articleLinkElement.href = articleUrl;

this.articleLinkElement.textContent = 'View full article on Wikipedia';

} catch (error) {

console.error('Error fetching Wikipedia article:', error);

this.articleContentElement.textContent = `Error loading article: ${error.message}`;

this.articleLinkElement.href = articleUrl;

this.articleLinkElement.textContent = 'Try viewing on Wikipedia';

}

}