JSFiddle - React, Tailwind, and code Playground
HTML
<div id="output" class="outputbox"></div>
CSS
.outputbox {
border: 1px solid #333;
}
.outputbox:before {
content: attr(id);
border-bottom: 1px groove #333;
background-color: cornsilk;
display: block;
}
.fail {
color: red;
}
.pass {
color: green;
}
JavaScript
String.prototype.rotate = function(n) {
return this.slice(n % this.length) +
this.slice(0, n % this.length);
}
String.prototype.isRotationOf = function(s) {
if (this.length != s.length) return false;
for (var i = 0; i < this.length; i++) {
if (this.rotate(i) == s) {
return true;
}
}
return false;
}
var test = [
['stackoverflow','overflowstack', true],
['stackoverflow','overflowtsack', false],
['stackoverflow','overflowstakd', false],
['stackoverflow','overflodstakd', false],
['abcd','bcda', true],
['abcd','acbd', false],
['abcd','defg', false]
];
$.each(test, function() {
var t = this[0].isRotationOf(this[1]);
$('#output').append($('<p>String "' + this[1] + '" ' +
(t?'IS':'is NOT') + ' rotated from "'+this[0]+'"</p>')
.addClass(t==this[2] ? 'pass':'fail'));
});