Reverse String Order

This is a JavaScript example of reversing the string order.

by Shawn Wood

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/kiddsoftware-jsfiddle/mocha-1.9.0.css">
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/mocha-1.9.0.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/chai-1.5.0.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/chai-jquery.js"></script>
<!-- 
  This is used to test for strin
-->

<div class="container">
<h2>Reverse String</h2>
  <form>
    <div class="form-group">
      <label for="email">Reverse String:</label>
      <input type="text" class="form-control" id="forwardString" placeholder="Enter String" name="forwardString" value="Hello">
    </div>
    <div class="form-group">
      <label for="pwd">Reverse String:</label>
      <input type="text" class="form-control" id="reverseString" placeholder="Reversed String" name="reverseString" readonly>
    </div>
  </form>
</div>

<div id="mocha"></div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

// create a function to reverse a string
var reverseString = function(source, target){
	if(typeof source === undefined && source === null){
  	source = '#forwardString';
  }
  if(typeof target === undefined && target === null){
  	target = '#reverseString';
  }
  let newString = '',
      sourceString = $(source).val(),
  		sourceArray = sourceString.split(''),
  		stringLength = sourceArray.length - 1,
  		iterator = 1;

  for (let i = 0; i < sourceArray.length; i++){
  	newString += sourceArray[stringLength];
    stringLength = stringLength - iterator;
  }
  $(target).val(newString);
};
$(document).ready(function(){
	reverseString('#forwardString', '#reverseString');
	$('#forwardString').on('change input', function(event){
  	reverseString('#forwardString', '#reverseString');
  });
});

/* Run Tests */
// Configure Mocha, telling both it and chai to use BDD-style tests. 
mocha.setup("bdd");
chai.should();

describe('Mocha Tests', function(){
	// Test reverse string function
  var reversed = function(){
    var str = document.getElementById("forwardString").value;
    str = str.split(""); //convert 'jQuery' to array
    str = str.reverse(); //reverse 'jQuery' order 
    str = str.join(""); //then join the reverse order values together
    return str;
   };
   // Test for String reverse correct
    it('String Reversed?', function(){
        var convertedStr = reversed().trim();
        var reverseStr = document.getElementById("reverseString").value;
        convertedStr.should.equal(reverseStr);
    });
  });

// Run all our test suites.  Only necessary in the browser.
mocha.run();