JSFiddle - React, Tailwind, and code Playground

by Valeriy

HTML

<div class="header" id="menu">
    <ul class="hr">
        <li><a href="#" onclick="CatsChange();">Поменять порядок кошечек</a></li>
        <li><a href="#" onclick="PutsNumbers();">Вывести в консоль массив отрицательных чисел</a></li>
    </ul>
</div>

<div class="content">
    <div class="left" id='images'>
        <img src="http://placekitten.com/g/200/300"></p>
        <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg">
         <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg">
          <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg">
    </div>
    <div class="right">
        <h2> Служба Яндекс</h2>.Рефераты предназначена для студентов и школьников, дизайнеров и журналистов, создателей научных заявок и отчетов — для всех, кто относится к тексту, как к количеству знаков.

Нажав на кнопку «Написать реферат», вы лично создаете уникальный текст, причем именно от вашего нажатия на кнопку зависит, какой именно текст получится — таким образом, авторские права на реферат принадлежат только вам.

Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст Яндекс.Рефератов неповторим.

Текстами рефератов можно пользоваться совершенно бесплатно, однако при транслировании и предоставлении текстов в массовое пользование ссылка на Яндекс.Рефераты обязательна.
        
    <h2>Реферат по астрономии
        Тема: «Эпоха как дип-скай объект»</h2>
Соединение жизненно выбирает математический горизонт. Элонгация притягивает секстант. Параллакс неравномерен. Соединение прекрасно выслеживает математический горизонт, данное соглашение было заключено на 2-й международной конференции "Земля из космоса - наиболее эффективные решения". Ось, после осторожного анализа, выслеживает астероидный Южный Треугольник.

Дип-скай объект решает Южный Треугольник, день этот пришелся на двадцать шестое число месяца карнея, который у афинян называется метагитнионом. В связи с этим нужно подчеркнуть, что...

CSS

body {
    font: 8pt sans-serif;
   }
   .right, .left { 
     float: right;
     width: 50%;
   }
   ul.hr li {
    display: inline;
    margin-right: 25px; 
    padding: 5px;
   }

JavaScript

window.PutsNumbers = function() {
    var numberList = [1, -9, 0, 24, 55, -3];
console.log(numberList.filter(function(x) { return x < 0; })); 
}

window.CatsChange = function() {
     var images = document.getElementsByTagName('img');
     images = Array.prototype.slice.call(images);
     images = images.slice(0).sort(function() {return 0.5 - Math.random()})

    for (var i = 0; i < images.length; i++) {
        document.getElementById('images').appendChild(images[i]);
    }
     
}