JSFiddle - React, Tailwind, and code Playground

by dariusk

HTML

<p>How many minutes do you want to read a bunch of stuff about a topic?</p>
<input id="minutes" type="text" placeholder="2"></input>
<br><input id="topic" type="text" placeholder="Tomato"></input>
<br><button onclick="generate()">Okay give me stuff</button>
<div id="out"></div>

CSS

body {
    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
    letter-spacing: 0.01rem;
    font-weight: 400;
    font-style: normal;
}
div {
    margin: 0 auto;
    max-width: 600px;
    font-size: 22px;
    line-height: 1.5;
}
h2 {
    font-family: "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
    letter-spacing: -0.02em;
    font-weight: 700;
    font-style: normal;
    font-size: 36px;
    margin-left: -1.8px;
    line-height: 1.2;
    margin-top: 40px;
    margin-bottom: 4px;
}
img {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto
}
.thumbcaption {
    position: relative;
    width: 100%;
    text-align: center;
    left: 0;
    margin-top: 10px;
    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
    letter-spacing: 0.01rem;
    font-weight: 400;
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(0,0,0,0.6);
    outline: 0;
    z-index: 300;
}

JavaScript

var wpm = 300;
var wpp = 30;
var passageCount = 0;
var passageMax;
var minutes = 2, topic = 'Tomato';

var wikipediaHTMLResult = function (data) {
    var readData = $('<div class="top">' + data.parse.text['*'] +'</div>');

    // handle redirects
    var redirect = readData.find('.redirectMsg a').text();
    console.log('re',redirect, redirect.length);
    if (redirect != '') {
        callWikipediaAPI(redirect);
        return;
    }
    // handle disambiguation
    var disambig = readData.find('#disambigbox').length;
    if (disambig) {
        console.log('DISAMBIG', readData.html());
        var dislinks = readData.find('a[title]').not('[href*=":"]').not('[href*="wiktionary"]').not('[href*="wikimedia"]').not('[class="external"]').not('[class="new"]');
        var dislink = dislinks[Math.floor(Math.random()*dislinks.length)];
        var distitle = dislink.href.match(/wiki\/(.*)$/)[1].replace(/\#.*/,'');
        callWikipediaAPI(distitle);
        return;
    }

    var first = readData.children('p').has('a[title]');
    first = first.eq(Math.floor(Math.random()*Math.min(first.length),5));
    var links;
    // no paragraphs in the article
    if (!first.html().match) {
        links = readData.find('a[title]').not('[href*=":"]').not('[href*="wiktionary"]').not('[href*="wikimedia"]').not('[class="external"]').not('[class="new"]').not('[title*="Edit"]');
    }
    else {
        console.log(first.html())
        first = first.html().match(/.*?title=.*?\.(\s|\n|$)/) ? first.html().match(/.*?title=.*?\.(\s|\n|$)/)[0] : '';
        console.log(first);
       links = $('<p>'+first+'</p>').find('a[title]').not('[href*=":"]').not('[href*="wiktionary"]').not('[href*="wikimedia"]').not('[class="external"]').not('[class="new"]').not('[title*="Edit"]');
    }
    console.log(links);
    // if we still can't find a valid link, find any old valid link
    if (links.length === 0) {
     links  =...