JSFiddle - React, Tailwind, and code Playground

by justi

HTML

<div class="wrapper">
    
    <h1>Ten Simple JavaScript Exercises </h1>
    
    <div>1.
        <p><input id="input1a" value="99"></p>
        <p><input id="input1b" value="3"></p>
        <p><button id="submit1">Find max</button> <button class="clear" data-number="1">Clear console</button></p>
        <div id="console1"></div>
    </div>
</div>

CSS

body {
    font-family: sans-serif;
}

.wrapper {
    background: linen;
    padding: 2em;
    
    & > div {
      background: rgba(0,0,0,0.1);
      margin-bottom: 2em;
      padding: 2em;
    }
}

[id^="console"] {
    background: #fff;
    font-family: monospace;
    padding: 1em;
    word-break: break-word;
}

input {
    width: 100%;
}

JavaScript

function max(a, b) {
    if (parseInt(a,  10) > parseInt(b, 10)) {
        return a;
    } else {
        return b;
    }
}
$('.clear').on('click', function () {
    $('#console' + $(this).data('number')).text('');
});
function f1() {
    $('#console1').append('<p>' + max($('#input1a').val(), $('#input1b').val()) + '</p>');
}
$('#submit1').on('click', f1);
f1();