JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<fieldset>
    <label for="error">Błąd</label>
    <input type="radio" value="error" name="selection" /><br />
    <label for="warnirng">Ostrzeżenie</label>
    <input type="radio" value="warning" name="selection" /><br />
    <label for="info">Informacja</label>
    <input type="radio" value="info" name="selection" /><br />
</fieldset>
<input type="button" value="Wyswietl" />
<p>---</p>

CSS

p.error
{
    font-weight: bold;
    color: red;
}

p.warning {
    font-weight: bold;
    color: yellow;
}

p.info {
    color: blue;
}

JavaScript

var Message = function() {}; // define of abstract class
// declare abstract function
Message.prototype.show = function() {
    throw 'Implement abstract class!!';
};

var ErrorMessage = function() { /*parameterless constructor*/ };
ErrorMessage.prototype = new Message; // extend of abstract class
ErrorMessage.prototype.show = function() {
    // first algorithm implementation
    $('p').attr('class', '')
        .addClass('error')
        .text('Błąd!');
};

var WarningMessage = function() { /*parameterless constructor*/ };
WarningMessage.prototype = new Message; // extend of abstract class
WarningMessage.prototype.show = function() {
    // first algorithm implementation
    $('p').attr('class', '')
        .addClass('warning')
        .text('Ostrzeżenie');
};

var InfoMessage = function() { /*parameterless constructor*/ };
InfoMessage.prototype = new Message; // extend of abstract class
InfoMessage.prototype.show = function() {
    // first algorithm implementation
    $('p').attr('class', '')
        .addClass('info')
        .text('Informacja');
};

var messages = {
    error: new ErrorMessage(),
    warning: new WarningMessage(),
    info: new InfoMessage()
};

$(document).ready(function() {
    $('input:radio').change(function() {
        currentMessage = messages[$(this).val()];
        $('input[type="button"]').click(currentMessage.show);
    });
});