JSFiddle - React, Tailwind, and code Playground

by Grant

HTML

<a id="link" href="https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi" hidden>Get this extention to enable cross-orgin resource sharing</a>

<p id="errText" hidden>Invalid URL!</p>
<div id="m" hidden>
    <table>
        <tr>
            <td id="1a" valign="middle"></td>
            <td id="2a" valign="middle"></td>
        </tr>
        <tr>
            <td id="3a" valign="middle"></td>
            <td id="4a" valign="middle"></td>
        </tr>
        <tr>
            <td id="5a" valign="middle"></td>
            <td id="6a" valign="middle"></td>
        </tr>
        <tr>
            <td id="7a" valign="middle"></td>
            <td id="8a" valign="middle"></td>
        </tr>
        <tr>
            <td id="9a" valign="middle"></td>
            <td id="10a" valign="middle"></td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <td id="2b" valign="middle"></td>
            <td id="1b" valign="middle"></td>
        </tr>
        <tr>
            <td id="4b" valign="middle"></td>
            <td id="3b" valign="middle"></td>
        </tr>
        <tr>
            <td id="6b" valign="middle"></td>
            <td id="5b" valign="middle"></td>
        </tr>
        <tr>
            <td id="8b" valign="middle"></td>
            <td id="7b" valign="middle"></td>
        </tr>
        <tr>
            <td id="10b" valign="middle"></td>
            <td id="9b" valign="middle"></td>
        </tr>
    </table>
    <br>
</div>

CSS

table {
    border-spacing: 0;
}
td {
    border:0px;
}

JavaScript

data = [];

function makeCards(arg) {
    console.log(arg)
    if (arg == "" || typeof arg != "string") {
        document.getElementById("errText").hidden = "";
    }
    var list = arg.split("js-exportData\\\">")[1].split("</textarea>")[0].split("\\n");
    for (var i = 0; i < list.length; i++) {
        data[i] = list[i].split("\\t");
    }
    for (var j = 0; j < list.length; j += 10) {
        try {
            for (var i = 1; i <= 10; i++) {
                document.getElementById(i + "a").innerHTML = data[j + i][0];
                document.getElementById(i + "b").innerHTML = data[j + i][1];
            }
        } finally {
            var m = document.createElement("div");
            m.innerHTML = document.getElementById("m").innerHTML;
            document.body.appendChild(m);
        }
    }
}

function begin() {
    quizNumber = parseInt(prompt("Insert quiz number:", "99229686"));
    if (typeof quizNumber != "number") {
        alert("Please type in a positive integer.")
        begin();
    }
}
begin();
document.getElementById("link").hidden = "";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
        document.getElementById("link").hidden = "true";
        makeCards(xhttp.responseText);
    }
}
xhttp.open("GET", "http://www.whateverorigin.org/get?url=https%3A%2F%2Fquizlet.com%2F" + quizNumber + "%2fexport", true);
xhttp.send();