JSFiddle - React, Tailwind, and code Playground

by Hugo Lopez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form>
  <div class="row">
    <div class="col">
      <label for="lemma">Lemma</label>
      <input type="text" class="form-control" placeholder="lemma" id="lemma" maxlength="15" name="lemma" id="lemma" value="book">
    </div>
    <div class="col">
        <div class="form-group">
          <label for="source_language">Source language</label>
          <select class="form-control" id="source_language" name="source_language">
             <option value="ar">Arabic</option>
             <option value="bn">Bengali</option>
             <option value="de">German</option>
             <option value="en">English</option>
             <option value="es">Spanish</option>
             <option value="ff">Fula</option>
             <option value="fr">French</option>
             <option value="hi">Hindi</option>
             <option value="id">Indonesian</option>
             <option value="it">Italian</option>
             <option value="ja">Japanese</option>
             <option value="jv">Javanese</option>
             <option value="pa">Punjabi</option>
             <option value="pt">Portuguese</option>
             <option value="ru">Russian</option>
             <option value="tr">Turkish</option>
             <option value="ur">Urdu</option>
             <option value="vi">Vietnamese</option>
             <option value="zh">Chinese</option>
          </select>
        </div>
    </div>
    <div class="col">
        <div class="form-group">
          <label for="part_of_speech_tag">Part-of-speech tag</label>
          <select class="form-control" id="part_of_speech_tag" name="part_of_speech_tag">
            <option>Noun</option>
           ...

CSS

form {margin: 1em; }

JavaScript

// SOURCE: https://github.com/sinaahmadi/sinaahmadi.github.io/blob/master/_posts/2021-10-04-sparql-query-generator-for-lexicographical-data.md
// Author: Sina Ahmadi @sinaahmadi
// Revamp: @hugolpz 
// LICENSE: MIT
/* ********************************************************************** */
/* LANGUAGES & POS ****************************************************** */
// Current: Wikidata, Dbnary.
// List: https://www.wikidata.org/wiki/Help:Wikimedia_language_codes/lists/all
 var languages_wiki = {
    'ar': 'Q13955', // Arabic
    'bn': 'Q9610', // Bengali
    'de': 'Q188', // German
    'en': 'Q1860', // English
    'es': 'Q1321', // Spanish
    'ff': 'Q33454', // Fula
    'fr': 'Q150', // French
    'hi': 'Q1568', // Hindi
    'id': 'Q9240', // Indonesian
    'it': 'Q652', // Italian
    'ja': 'Q5287', // Japanese
    'jv': 'Q33549', // Javanese
    'pa': 'Q58635', // Punjabi
    'pt': 'Q5146', // Portuguese
    'ru': 'Q7737', // Russian
    'tr': 'Q256', // Turkish
    'ur': 'Q1617', // Urdu
    'vi': 'Q9199', // Vietnamese
    'zh': 'Q9192', // Chinese
  };

  var languages_dbnary = {
    "en": "en",
    "fr": "fr",
    "es": "es",
    "pt": "pt",
    "de": "de",
    "it": "it"
  };

  var posTags = {
    'Noun': 'Q1084',
    'Pronoun': 'Q36224',
    'Verb': 'Q24905',
    'Adverb': 'Q380057',
    'Adjective': 'Q34698',
    'Quantitative': 'Q21087400',
    'Interjection': 'Q83034',
    'Preposition': 'Q4833830',
    'Article': 'Q103184',
    'Conjunction': 'Q36484'
  };

/* ********************************************************************** */
/* QUERIES BASIS ******************************************************** */
// Current: Wikidata, Dbnary.
 var queries = {
 // Queries for Wikidata
  wikidata : 
    { 
      values :`VALUES ?word {'book'@GLWSSA}`,
      basic: `SELECT * WHERE {
      VALUESTOBEADDEDHERE
      ?l a ontolex:LexicalEntry ;
        dct:language wd:LNGCDE ;
        ontolex:lexicalForm ?form ; #test
        wikibase:lexicalCategory...