MediaWiki:Test.css

Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

• Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
• Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
• Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
• Opera: Нажмите Ctrl+F5.

var ChemRecipe = (function() {
    function createBlock(data) {
        var container = document.createElement('div');
        container.style.background = '#1e1e1e';
        container.style.color = '#ddd';
        container.style.border = '1px solid #444';
        container.style.borderRadius = '8px';
        container.style.padding = '10px';
        container.style.margin = '10px';
        container.style.width = '300px';
        container.style.display = 'inline-block';
        container.style.verticalAlign = 'top';

        var title = document.createElement('div');
        title.style.fontWeight = 'bold';
        title.style.fontSize = '16px';
        title.style.marginBottom = '6px';
        title.textContent = data.name;
        container.appendChild(title);

        if (data.ingredients) {
            var ingTitle = document.createElement('div');
            ingTitle.style.fontStyle = 'italic';
            ingTitle.textContent = 'Смешайте';
            container.appendChild(ingTitle);

            var ul = document.createElement('ul');
            ul.style.paddingLeft = '20px';
            for (var i = 0; i < data.ingredients.length; i++) {
                var li = document.createElement('li');
                li.textContent = data.ingredients[i].name + ' [' + data.ingredients[i].amount + ']';
                ul.appendChild(li);
            }
            container.appendChild(ul);
        }

        if (data.effects) {
            var effTitle = document.createElement('div');
            effTitle.style.fontWeight = 'bold';
            effTitle.style.marginTop = '6px';
            effTitle.textContent = 'Эффекты';
            container.appendChild(effTitle);

            var ulEff = document.createElement('ul');
            ulEff.style.paddingLeft = '20px';
            for (var j = 0; j < data.effects.length; j++) {
                var liEff = document.createElement('li');
                liEff.textContent = data.effects[j];
                ulEff.appendChild(liEff);
            }
            container.appendChild(ulEff);
        }

        if (data.description) {
            var desc = document.createElement('div');
            desc.style.marginTop = '6px';
            desc.style.fontSize = '13px';
            desc.textContent = data.description;
            container.appendChild(desc);
        }

        return container;
    }

    return {
        render: function(recipes, targetId) {
            var target = document.getElementById(targetId);
            for (var k = 0; k < recipes.length; k++) {
                target.appendChild(createBlock(recipes[k]));
            }
        }
    };
})();