Syapse

by Nick Silva

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <h3 class="col-lg-12">Part 1 <small>Reverse a string</small></h3>
    <div class="form-group col-lg-6">
      <div class="input-group">
        <input id="part1a" type="text" class="form-control" placeholder="Reverse Characters">
        <span class="input-group-btn" onclick="inputs.part1ar.value = reversify(inputs.part1a.value)">
            <button class="btn btn-success" type="button">Reverse It!</button>
          </span>
      </div>
    </div>
    <div class="form-group col-lg-6">
      <input id="part1ar" class="form-control" placeholder="Result" />
    </div>
  </div>
  <div class="row">
    <div class="form-group col-lg-6">
      <div class="input-group">
        <input id="part1b" type="text" class="form-control" placeholder="Reverse Words">
        <span class="input-group-btn" onclick="inputs.part1br.value = reverseWords(inputs.part1b.value)">
            <button class="btn btn-success" type="button">Reverse It!</button>
          </span>
      </div>
    </div>
    <div class="form-group col-lg-6">
      <input id="part1br" class="form-control" placeholder="Result" />
    </div>
  </div>
  <div class="row">
    <h3 class="col-lg-12">Part 2 <small>Create a native string method: <code>String.repeatify()</code></small></h3>
    <div class="form-group col-lg-2">
      <input id="part2a" type="number" class="form-control col-lg-2" value="3">
    </div>
    <div class="form-group col-lg-4">
      <div class="input-group">
        <input id="part2b" type="text" class="form-control" placeholder="Repeat a string">
        <span class="input-group-btn" onclick="inputs.part2r.value = inputs.part2b.value.repeatify(inputs.part2a.value)">
            <button class="btn btn-success" type="button">Repeat It!</button>
          </span>
      </div>
    </div>
    <div class="form-group col-lg-6">
      <input id="part2r"...

JavaScript

// PART 1
window.reversify = function(str) {
  return str.split('').reverse().join('');
}

window.reverseWords = function(str) {
  return str.split(' ').reverse().join(' ');
}

// PART 2
String.prototype.repeatify = function(reps) {
  var val = this.valueOf(),
    str = '';
  while (reps > 0) {
    str += val;
    reps--;
  }
  return str;
}

// PART 3
String.prototype.finder = function(str) {
  var needle = this.valueOf(),
    haystack = str.toString(),
    needleRep = needle.length - 1,
    haystackRep = haystack.length - 1;

  // If needle is longer than haystack, we can skip this part
  if (needleRep >= haystackRep) {
    for (var i = 0; i <= (needle.length - 1) - haystackRep; i++) {
      var match = 0;
      if (needle[i] === haystack[0]) {
        for (var j = 0;
          (j <= haystackRep) || (match === -1); j++) {
          if (needle[i + j] === haystack[j]) {
            match++;
          } else {
            match = -1;
          }
        }
        if (match === haystack.length) {
          return i;
        }
      }
    }
  }

  return -1;
}

// PART 4
window.isPalindrome = function(str) {
  var string = str.replace(/[^0-9a-z]/gi, '').toLowerCase(),
    stringLen = string.length - 1,
    reps = Math.floor(length / 2);

  for (var i = 0; i <= reps; i++) {
    if (string[i] !== string[length - i]) {
      return false;
    }
  }

  return true;
}


// FORM INPUTS
window.inputs = {
  part1a: document.getElementById('part1a'),
  part1b: document.getElementById('part1b'),
  part1ar: document.getElementById('part1ar'),
  part1br: document.getElementById('part1br'),
  part2a: document.getElementById('part2a'),
  part2b: document.getElementById('part2b'),
  part2r: document.getElementById('part2r'),
  part3a: document.getElementById('part3a'),
  part3b: document.getElementById('part3b'),
  part3r: document.getElementById('part3r'),
  part4: document.getElementById('part4'),
  part4r: document.getElementById('part4r'),
}