JSFiddle - React, Tailwind, and code Playground

by Iván Nokonoko

HTML

<body>
<h1>RatefromLP</h1>

    <p>A panel like the one below appears on the bottom of each result page opened by <a href=https://chrome.google.com/webstore/detail/nocdlcgkdeopogoldfeahdneobfaiggd target=_blank><b style="color:#FF4500">LBTimer</b></a>. You can use the panel to rate each landing page, so you don't have to switch constantly between LPs and the task page. Besides, this way you can rate what you are seeing in the moment you are seeing it!<br>The panel indicates the block label, in this example L0, and the query of the task (in the example, "Click on the query words"). you can also use the checkboxes for the flags and even write your comments from the LP (to display the comment box click on the @ sign). The ratings, flags and comments will be <b>automatically</b> updated on the tasks rating page. You can also click on the query words to highlight them in the page. Try it out! </p><br>

<div style="position:relative;max-width:550px;padding:5px;margin:0 auto;border:solid 1px grey;background-color:#e5e5e5;">
<div style="position:absolute;left:0;top:0;color:#00F;cursor:pointer;"><span title="Reload this LP">&#x27f3;</span></div>
<div style="position:absolute;right:0;top:0;color:#00F;cursor:pointer;"><span id="lb-say" title="Hide/show comment" data-on="0">&#64;</span><span title="Hide/show panel">&#x25bc;</span></div>
 <div style="font-family:arial;text-align:center;color:#000;">
  <span style="font:bold 15px arial;color:#000;cursor:pointer" id="lb-lbl">L0</span> - <span style="font:bold 15px arial;color:#000;">
  <span style="font:bold 15px arial;color:#000;display:none;cursor:pointer;" id="lb-srchbfr">&lt; </span>
  <span style="display:inline;cursor:pointer;" data-on="0" class="lb-qws">Click</span>
  <span style="display:inline;cursor:pointer;" data-on="0" class="lb-qws">on</span>
  <span style="display:inline;cursor:pointer;" data-on="0" class="lb-qws">the</span>
  <span style="display:inline;cursor:pointer;" data-on="0" class="lb-qws">query</span>
 ...

CSS

p{font:15px arial;}
h1{font-family:arial}
#lb-us,#lb-qs{-webkit-appearance:none;width:200px;min-width:200px;max-width:200px;height:6px;min-height:6px;max-height:6px;background:#CCC;padding:0px;margin:auto;}input#lb-us::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:20px;background-color:#095;}input#lb-qs::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:20px;background-color:#88C;}input:focus{outline:none;}.lb-tbl{border:none;text-align:center;padding:4px;}

JavaScript

(function(){var d=document,Ulbl=d.getElementById("lb-Ulbl"),Qlbl=d.getElementById("lb-Qlbl"),cmnt=d.getElementById("lb-cmnt"),wrds=d.getElementsByClassName("lb-qws"),ur="N/A FailsM FailsM+ SM SM+ MM MM+ HM HM+ FullyM".split(" "),qr="N/A Lowest Lowest+ Low Low+ Medium Medium+ High High+ Highest".split(" "),
skipthese=/^(?:SCRIPT|FORM|STYLE|TEXTAREA)$/i,col='#ff9 #9ff #99f #9f9 #f99 #f9f #ff6 #6ff #66f #6f6 #f66 #f6f'.split(' '),wcol={},icol=0,srchIdx=-1,matchRX="",
hilite=function(){this.dataset.on=("0"==this.dataset.on)?"1":"0";hiliteall();},
/* hiliteall and hiliteWords are based on original Javascript code by Chirp Internet: www.chirp.com.au
* HEY YOU! GIVE CREDIT WHEN CREDIT IS DUE!*/
hiliteall=function(){var words=d.getElementsByClassName("lb-qws"),wl=words.length,warr=[],prnt,elmnt;
for(;wl--;)if("1"==words[wl].dataset.on)warr.push(words[wl].textContent);
if (warr.length)matchRX=new RegExp("("+warr.join("|")+")","i");else matchRX="";
words=d.getElementsByClassName("lb-hltd");while (words.length && (elmnt=words[0])){
prnt=elmnt.parentNode;prnt.replaceChild(elmnt.firstChild,elmnt);prnt.normalize();}
d.getElementById("lb-srchbfr").style.display=matchRX?"inline":"none";d.getElementById("lb-srchaft").style.display=matchRX?"inline":"none";matchRX&&hiliteWords(d.body);},
hiliteWords=function(el){var nv,regs;if(!el||!matchRX||skipthese.test(el.nodeName)||"lb-hltd"==el.className)return;
if(el.hasChildNodes()) for(var i=0;i<el.childNodes.length;i++)hiliteWords(el.childNodes[i]);
if(3==el.nodeType) if((nv=el.nodeValue) && (regs=matchRX.exec(nv))) {
var wclue=regs[0].toLowerCase();if(!wcol[wclue]) wcol[wclue]=col[icol++%12];
var hltd=d.createElement("span");hltd.appendChild(d.createTextNode(regs[0]));
hltd.style.backgroundColor=wcol[wclue];hltd.className="lb-hltd";
hltd.style.fontStyle="inherit";hltd.style.color="#000";
var...