Maxymiser task

by Vladimir

HTML

<div id="navigation">
	<a href="#" id="shuffleCats">Изменить порядок кошечек</a>
	<a href="#" id="consoleLog">Вывести в консоль массив отрицательных чисел</a>
</div>
<div id="content">
	<h2>Сонорный пласт глазами современников</h2><p>Аллегро волнообразно. Динамический эллипсис mezzo forte представляет собой неизменный кризис жанра. Линеарная фактура изящно использует паузный кризис жанра. Ретро, на первый взгляд, изящно вызывает паузный флажолет. Попса иллюстрирует мономерный рок-н-ролл 50-х. Как отмечает Теодор Адорно, фьюжн традиционен.</p><p>Ретро диссонирует разнокомпонентный громкостнoй прогрессийный период. Октавер традиционен. Мономерная остинатная педаль, как бы это ни казалось парадоксальным, продолжает позиционный контрапункт контрастных фактур, хотя это довольно часто напоминает песни Джима Моррисона и Патти Смит.</p><p>Попса представляет собой гипнотический рифф, и если в одних голосах или  пластах музыкальной ткани сочинения еще продолжаются конструктивно-композиционные процессы предыдущей части, то в других - происходит становление новых. Ревер, в том числе, изящно образует модальный флюгель-горн. Техника просветляет дискретный рок-н-ролл 50-х. Глиссандирующая ритмоформула синхронно заканчивает райдер, но если бы песен было раз в пять меньше, было бы лучше для всех. Динамический эллипсис неизменяем. Кластерное вибрато иллюстрирует контрапункт контрастных фактур, это понятие создано по аналогии с термином Ю.Н.Холопова "многозначная тональность".</p>
</div>
<div id="sidebar">
	<img src="http://placekitten.com/g/150/300" />
	<img src="http://placekitten.com/g/200/230" />
	<img src="http://placekitten.com/g/250/300" />
	<img src="http://placekitten.com/g/300/350" />
</div>

CSS

#navigation {
	text-align: right;
}
#content {
	float: left;
	width: 50%;
}
#sidebar {
	float: left;
	width: 50%;
}

JavaScript

var numbers = [1, -2, 3, -4, 5, -6, 7, -8];
window.onload = function() {
	gbi('shuffleCats').onclick = shuffleCats;
	gbi('consoleLog').onclick = logNegativeNumbers;
};

//* Alias
function gbi(id) {
	return document.getElementById(id);   
}

//* Generate array with random integers
function shuffle(length) {
	var indexes = [];
	var temp;
	var j;
	//* generate indexes
	for(var i =0; i < length; i++) {
		indexes.push(i);
	}
	//* shuffle indexes
	for(var i =0; i < length; i++) {
		j = Math.floor(length*Math.random());
		temp = indexes[j];
		indexes[j] = indexes[i];
		indexes[i] = temp;
	}
	return indexes;
}

//* Change cats order
function shuffleCats() {
	var sidebar = gbi('sidebar');
	var indexes = shuffle(sidebar.children.length);
	for(var i = 0; i < sidebar.children.length; i++) {
		sidebar.insertBefore(sidebar.children[i], sidebar.children[indexes[i]]);
	}
}

//* Log into console subarray with negative numbers
function logNegativeNumbers() {
	var negativeNumbers = [];
	for(var i=0; i < numbers.length; i++) {
		if(numbers[i] < 0) {
			negativeNumbers.push(numbers[i]);
		}
	}
	console.log(negativeNumbers);    
}