JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<div>
  <h2>Mock Case</h2>
  <img src="https://i.kym-cdn.com/entries/icons/original/000/022/940/mockingspongebobbb.jpg" alt="">
  <p id="output"></p>
  <input type="text">
</div>

CSS

h2 {
  font-family:sans-serif;
}
img {
  width:25%;
}
#prog {
  display:block;
}
input[type='text'] {
  display: block;
  margin: 10px;
}
#output {
  height: 15px;
  width: 35%;
 /*  border: 1px solid grey; */
  padding: 10px;
}

JavaScript

const text = document.querySelector('input[type="text"]');
const outp = document.getElementById('output')

text.addEventListener('keyup', mockCase);



function mockCase(e) {
  let ltrs = e.target.value.split("");

  let upLters = ltrs.map((v, i, a) => {
  	var randBool = Math.random() >= 0.5;
    let prev = isStr(a[i - 1]) ? a[i - 1] : a[i];
    let next = isStr(a[i + 1]) ? a[i + 1] : a[i];
    
    if (randBool) {
      return v.toUpperCase()
    } else {
      return v.toLowerCase();
    }
    
  }).join("");

  outp.innerText = upLters;
}

function isUpper(l) {
  if (l === l.toUpperCase()) {
    return true;
  }
  return false;
}

function isLower(l) {
  if (l === l.toLowerCase()) {
    return true;
  }
  return false;
}

function isStr(x) {
  if (typeof x === 'string') {
    return true;
  }
  return false;
}

function getWords(str) {
	return str.join(" ");
}