User:Acagastya/searchWP.js

// function doSomeThing() {
//   const word = prompt('Check on enwp for:');
//   if (!word.length) return;
//   getDataFromENWP(word);
// }

async function getDataFromENWP(word = '') {
  const APIURL = `https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&origin=*&srsearch=`;
  const URL = APIURL + word;
  const fetchedData = await fetch(URL);
  const parsed = await fetchedData.json();
  const res = parsed.query.search;
  if (res.length) {
    const titles = res.map(el => el.title);
    const message = `The following pages are available on ENWP:\n\n${titles.join(
      ',\n'
    )}`;
    alert(message);
  }
}

// looks like
//    <div id="wpSearchForm">
//      <input id="wpSearch" type="text" placeholder="Search WP">
//      <button type="submit" value="Search" onclick="searchWP()>Search</button>
//   </div>
//

function searchWP() {
  const word = document.getElementById('wpSearch').value;
  console.log(word);
  if (!word.length) return;
  getDataFromENWP(word);
  return false;
}

function showForm() {
  const bodyContent = document.getElementById('bodyContent');
  const form = createForm();
  bodyContent.prepend(form);
}

function createFormInput() {
  // create input
  const formInput = document.createElement('input');
  // create type = 'input'
  const formInputType = document.createAttribute('type');
  formInputType.value = 'text';
  // create id = 'wpSearch'
  const formInputId = document.createAttribute('id');
  formInputId.value = 'wpSearch';
  // create placeholder = 'Search WP'
  const formInputPlaceHolder = document.createAttribute('placeholder');
  formInputPlaceHolder.value = 'Search WP';
  // add type, id, placeholder to input
  formInput.setAttributeNode(formInputType);
  formInput.setAttributeNode(formInputId);
  formInput.setAttributeNode(formInputPlaceHolder);
  return formInput;
}

function createFormSubmit() {
  // create input
  const formInputSubmit = document.createElement('button');
  // create type = 'submit'
  const formInputSubmitType = document.createAttribute('type');
  formInputSubmitType.value = 'submit';
  // create value = 'Submit'
  const formInputSubmitValue = document.createAttribute('value');
  formInputSubmitValue.value = 'Search';
  // create onsubmit = 'searchWP()'
  const formInputSubmitONSUBMIT = document.createAttribute('onclick');
  formInputSubmitONSUBMIT.value = 'searchWP()';
  // add type, value, onsubmit to input
  formInputSubmit.setAttributeNode(formInputSubmitType);
  formInputSubmit.setAttributeNode(formInputSubmitValue);
  formInputSubmit.setAttributeNode(formInputSubmitONSUBMIT);
  formInputSubmit.innerText = 'Search';
  return formInputSubmit;
}

function createForm() {
  // create form
  const form = document.createElement('div');
  // create id = 'wpSearchForm'
  const formId = document.createAttribute('id');
  formId.value = 'wpSearchForm';
  // add id to form
  form.setAttributeNode(formId);
  // append formInput
  const formInput = createFormInput();
  form.appendChild(formInput);
  // append formSubmit
  const formInputSubmit = createFormSubmit();
  form.appendChild(formInputSubmit);
  return form;
}

setTimeout(showForm, 0);