JSFiddle - React, Tailwind, and code Playground

by gautamadude

HTML

<script src="https://raw.github.com/chjj/marked/master/lib/marked.js"></script>
<div id="text"></div>
<textarea id="foo"></textarea>
<div id="imgs"></div>

CSS

#text {
    opacity: 0.0;
}

textarea {
    width: 400px;
    height: 200px;
}

#imgs img {
    width: 400px;
}

JavaScript

//Getting phenomenons images(and their licencing) and leading paragraph from Wikipedia, using the Wikipedia API: http://en.wikipedia.org/w/api.php

var page = "http://en.wikipedia.org/wiki/Thor";
var title = page.split("/");
title = title[title.length - 1];

//Images and their licencing
$.getJSON("http://en.wikipedia.org/w/api.php?action=parse&page=" + title + "&prop=images&format=json&callback=?", function (data) {
    var imgsHtml = "";
    for (img in data["parse"]["images"]) {
        $.getJSON("http://en.wikipedia.org/w/api.php?action=query&titles=Image:" + data["parse"]["images"][img] + "&prop=imageinfo&iiprop=url&meta=siteinfo&siprop=rightsinfo&format=json&callback=?", function (data) {
            for (n in data["query"]["pages"]) {
                imgsHtml += "<img src=\"" + data["query"]["pages"][n]["imageinfo"][0]["url"] + "\"><br><a href='http:"+data["query"]["rightsinfo"].url+"'>"+data["query"]["rightsinfo"].text+"</a><br><br><br>";
            };
            $("#imgs").html(imgsHtml);
        });
    }
    
});

//Leading paragraph
$.getJSON("http://en.wikipedia.org/w/api.php?action=parse&page=" + title + "&prop=text&section=0&format=json&callback=?", function (data) {
    $("#text").html(data["parse"]["text"]["*"]);
    var text = getInnerText(document.getElementById("text"));
    $("#text").html("");
    text = text.split(/\r\n|\r|\n/);
    var pText = "";
    for (p in text) {
        if (text[p] != "" && text[p].substring(0, 14) != "For other uses" && text[p].substring(0, 11) != "Cite error:") {
            pText += text[p];
            pText += "\n\n";
        }
    }
    pText = pText.substring(0, pText.length-2);
    document.getElementById('foo').value = pText;
});

function getInnerText(el) {
    var sel, range, innerText = "";
    if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        innerText =...