JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<ul id="list1">
<li>castle</li>
<li>bridge</li>
<li>fighting</li>
<li>boat</li>
<li>village</li>
<li>exploration</li>
<li>character</li>
<li>architecture</li>
<li>lots of people</li>
<li>transportation</li>
<li>research/science</li>
<li>dungeon</li>
<li>futuristic</li>
<li>post apoctalypse</li>
<li>magic</li>
<li>suit</li>
</ul>

<ul id="list2">
<li>meadow</li>
<li>swamp</li>
<li>cliffs</li>
<li>space</li>
<li>sky</li>
<li>water</li>
<li>caves</li>
<li>traditional asian</li>
<li>jungle</li>
<li>forest</li>
<li>volcano</li>
<li>desert</li>
<li>hell</li>
<li>spaceship</li>
<li>steampunk</li>
<li>city</li>
<li>snow</li>
</ul>

<ul id="list3">
<li>treasure/gems</li>
<li>fighting</li>
<li>lighting</li>
<li>perspective</li>
<li>creature</li>
<li>culture</li>
<li>ancient</li>
<li>writing</li>
<li>mist</li>
<li>alien</li>
<li>cloth</li>
<li>weapon</li>
<li>furniture</li>
<li>lightning</li>
</ul>
    
<div id="output"></div>

CSS

ul { width: 150px; height: 250px; overflow-y:scroll; float:left; margin:15px; }

JavaScript

$(document).ready(function() {
    var list1 = $("#list1").children().size();
    var list2 = $("#list2").children().size();
    var list3 = $("#list3").children().size();
    var ran1 = Math.floor(Math.random() * list1);
    var ran2 = Math.floor(Math.random() * list2);
    var ran3 = Math.floor(Math.random() * list3);
    var word1 = $("#list1").find("li").eq(ran1).html();
    var word2 = $("#list2").find("li").eq(ran2).html();
    var word3 = $("#list3").find("li").eq(ran3).html();
    $("#output").html(word1 + " " + word2 + " " + word3);
});