JSFiddle - React, Tailwind, and code Playground

by zoldello

HTML

<p>DNA Nucleotides-Counter</p>
<div>
<span>Input</span>
    <textarea id='stringInput'  class="input"></textarea>
</div>
<div> <span>Output</span>
    <textarea id='nucleotidesCount' rows="5" class="output"></textarea>
    <span class="error" style="display:none;">Input is empty</span>
</div>
<div>
    <button id="count" type="button">Count DNA Nucleotides</button>
</div>

CSS

.input {
    width:70%
}

.output {
        width:20%
}

.error {
    color: red;
}
}

JavaScript

(function ($) {
    $('#count').on('click', function () {
        var string = $.trim($('#stringInput').val()),
            nucleotides = [{
                'character': 'A',
                count: 0
            }, {
                'character': 'C',
                count: 0
            }, {
                'character': 'G',
                count: 0
            }, {
                'character': 'T',
                count: 0
            }],
            result = '';
        
        if (!string) {
            $('.error').show();
            return;
        }
        
        $('.error').hide();
        
        for (i = 0; i < string.length; i++) {
            for (j = 0; j < nucleotides.length; j++) {
                if (string[i] === nucleotides[j].character) {
                    ++nucleotides[j].count;
                    break;
                }
            }
        }

        for (i = 0; i < nucleotides.length; i++) {
            result = result + nucleotides[i].character + ': ' + nucleotides[i].count + '\n';
        }

        $('#nucleotidesCount').text($.trim(result));

    });
})(window.jQuery);

/* Sample: 
...