<div class="row viewResult"></div>
<div class="row viewResultTwo"></div>
<div class="row viewResultThree"></div>
div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	font-family: Open Sans;
	color: #FFF;
	font-size: 2.6em;
	font-weight: 800;
	padding: 1em;
	text-shadow: 0px 4px 1px rgba(0,0,0,0.7);
}
.viewResult {
		background-color: #16a089;
}
.viewResultTwo {
		background-color: #16b089;
}
.viewResultThree {
		background-color: #16c089;
}
// basic and verbose example
function reverse(str) {
	const splitString = str.split('');
	const reversedString = splitString.reverse();
	const joinArray = reversedString.join('');
	
	return joinArray;
}

// chained methods example
function reverseTwo(str) {
	return str.split('').reverse().join('');
}

// terse, using reduce method
function reverseThree(str) {
	return str.split('').reduce((rev, char) => char + rev, '');
}

let outPut = reverse('FC Porto');
let outPutTwo = reverseTwo('Newcastle United');
let outPutThree = reverseThree('Cape Town City FC');


console.log(reverse(outPut));
console.log(reverseTwo(outPutTwo));
console.log(reverseThree(outPutThree));


// for displaying result on screen, you can ignore this.
let display = document.querySelector('.viewResult');
let displayTwo = document.querySelector('.viewResultTwo');
let displayThree = document.querySelector('.viewResultThree');
display.insertAdjacentHTML('afterbegin', JSON.stringify(outPut));
displayTwo.insertAdjacentHTML('afterbegin', JSON.stringify(outPutTwo));
displayThree.insertAdjacentHTML('afterbegin', JSON.stringify(outPutThree));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.