JSFiddle - React, Tailwind, and code Playground

by dandapianoman

HTML

<h1>Contract Design Prototype</h1>
<textarea id="contractTerm" rows="10" cols="80" style="font-size:12pt">Please enter your contract term here.</textarea>
<br />
<input type="submit" value="Analyze" style="font-size:12pt;font-weight:bold;" onclick="analyzeTerm()" />
<br />
<br />
<span id="analysisResults" style="visibility:hidden;">
    <h1>Results:</h1>
    <table>
        <tr id="subterm1" />
        <tr>
            <td class="right"><b>Likelihood of enforceability:</b></td>
            <td id="percentage1" class="positive">85%</td>
            <td><input type="submit" value="Details" onclick="expand1()" /></td>
            <td style="color:white;">__________________________________________________</td>
        </tr>
        <tr id="expand1Results1" />
        <tr id="expand1Results2" />
        <tr id="expand1Results3" />
        <tr id="expand1Results4" />
        <tr>
            <td class="right"><b>Likelihood of ambiguity:</b></td>
            <td id="percentage2" class="negative">60%</td>
            <td><input type="submit" value="Details" onclick="expand2()" /></td>
            <td style="color:white;">__________________________________________________</td>
        </tr>
        <tr id="expand2Results1" />
        <tr id="expand2Results2" />
        <tr id="expand2Results3" />
        <tr id="expand2Results4" />
        <tr id="expand2Results5" />
        <tr id="expand2Results6" />
    </table>
    <br />
    <br />
    <table>
        <tr id="subterm2" />
        <tr>
            <td class="right"><b>Likelihood of enforceability:</b></td>
            <td id="percentage3" class="positive">85%</td>
            <td><input type="submit" value="Details" onclick="expand3()" /></td>
            <td style="color:white;">__________________________________________________</td>
        </tr>
        <tr id="expand3Results1" />
        <tr id="expand3Results2" />
        <tr id="expand3Results3" />
        <tr id="expand3Results4" />
        <tr>
           ...

CSS

*
{
    font-family: "Palatino Linotype", "Verdana", Serif;
}

td
{
    padding: 0px 5px 0px 5px;
    font-size: 12pt;
}

.right
{
    text-align: right;
}

.positive
{
    font-weight: bold;
    color: #009900;
}

.negative
{
    font-weight: bold;
    color: #990000;
}

JavaScript

// Contract Design Prototype 0.1

function analyzeTerm ()
{
    // Split up contract term.
    var term = document.getElementById('contractTerm').value;
    var term1 = term.substring(0, Math.floor(term.length / 2));
    var term2 = term.substring(Math.floor(term.length / 2));
    
    document.getElementById('subterm1').innerHTML = '<td colspan="4"><i>&quot;' + term1 + ' . . . &quot;</i></td>';
    document.getElementById('subterm2').innerHTML = '<td colspan="4"><i>&quot; . . . ' + term2 + '&quot;</i></td>';
    
    // Set percentages.
    var randomPercent1 = Math.floor(Math.random() * 85) + 10;
    var randomPercent2 = Math.floor(Math.random() * 85) + 10;
    var randomPercent3 = Math.floor(Math.random() * 85) + 10;
    var randomPercent4 = Math.floor(Math.random() * 85) + 10;
    
    document.getElementById('percentage1').innerHTML = randomPercent1 + '%';
    document.getElementById('percentage2').innerHTML = randomPercent2 + '%';
    document.getElementById('percentage3').innerHTML = randomPercent3 + '%';
    document.getElementById('percentage4').innerHTML = randomPercent4 + '%';
    
    if (randomPercent1 >= 50)
        document.getElementById('percentage1').setAttribute('class', 'positive');
    else
        document.getElementById('percentage1').setAttribute('class', 'negative');
    
    if (randomPercent2 >= 50)
        document.getElementById('percentage2').setAttribute('class', 'negative');
    else
        document.getElementById('percentage2').setAttribute('class', 'positive');
    
    if (randomPercent3 >= 50)
        document.getElementById('percentage3').setAttribute('class', 'positive');
    else
        document.getElementById('percentage3').setAttribute('class', 'negative');
    
    if (randomPercent4 >= 50)
        document.getElementById('percentage4').setAttribute('class', 'negative');
    else
        document.getElementById('percentage4').setAttribute('class', 'positive');
    
    var current =...