JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<form id="form">
  <label>
    Sort by:
    <select name="sortBy">
      <option value="rtitle">Title</option>
      <option value="ryear">Year</option>
      <option value="stitle">Original Title</option>
      <option value="syear">Original Year</option>
      <option value="fraction">Fraction</option>
    </select>
  </label>
  <input type="submit" value="Submit"/>
</form>

JavaScript

//const DATA_URL = '//www.dcs.bbk.ac.uk/~ptw/teaching/IWT/coursework/remakes.xml';
const DATA_URL = '//gist.githubusercontent.com/soulwire/cd70343ab06b0e3b5dc664ee72c799ff/raw/a164e46883f740eb11439bb501754b21dcb60b24/remakes.xml'

const form = document.querySelector('#form');
form.addEventListener('submit', (event) => {
	event.preventDefault();
  const sortBy = form.elements['sortBy'].value;
  console.log(sortBy);
});

function parseXMLString(xmlString) {
	const parser = new DOMParser();
  return parser.parseFromString(xmlString, 'text/xml');
}

function loadData() {
	const options = { mode: 'cors' };
	return fetch(DATA_URL, options)
  	.then(response => response.text())
    .then(xmlString => parseXMLString(xmlString));
}

loadData().then(xml => {
	
  /*
  function evaluate(expression) {
  	const result = [];
    const iterator = document.evaluate('//remake[ryear<1940]/rtitle', xml, null, XPathResult.ANY_TYPE, null);
    let item = iterator.iterateNext();
    while (item) {
    	result.push(item);
      item = iterator.iterateNext();
    }
    return result;
  }*/
  
  //console.log(evaluate('//remake[ryear<1940]/rtitle'));
})