JSFiddle - React, Tailwind, and code Playground

by MacDada

HTML

<div id="container">
    <div id="wrapper" data-bind="css: editorMode">
        <input 
            type="url" 
            placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ" 
            data-bind="value: url, valueUpdate: 'keyup'"  
        />

        <input type="text" disabled="disabled" data-bind="value: editorMode" />
        
        <span data-bind="if: 'image_mode' === editorMode()">
            obrazek
        </span>
        
        <span data-bind="if: 'youtube_mode' === editorMode()">
            <span data-bind="if: ytId">iframe z youtube</span>
            <span data-bind="ifnot: ytId">uzupełnij prawidłowego urla</span>
        </span>
    </div>
</div>

CSS

#wrapper {
    padding: 5px;
    border: 3px solid black;
}
#wrapper.image_mode {
    border-color: red;
}
#wrapper.youtube_mode {
    border-color: blue;
}

JavaScript

function getYtId(url) {
    return 'youtube' === url ? 'yt' : null;
};

var vm = {};

vm.url = ko.observable('');

vm.editorMode = ko.computed(function () {
    return '' === vm.url() ? 'image_mode' : 'youtube_mode';
});

vm.ytId = ko.computed(function () {
    return getYtId(vm.url());
});

var container = document.getElementById('container');
ko.applyBindings(vm, container);