JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<div ng-app='App'>
    <div ng-controller="MyCtrl">
        <div class="sample"><span>Normal:</span> {{word}}</div>
        <div class="sample"><span>Pluralize:</span> {{word | ucf | pluralize:items}}</div>
        <div class="sample"><span>Upper Case Word:</span> {{word | ucf}}</div>
        <div class="sample"><span>Upper Case Sentence:</span> {{sentence | ucf_sentence}}</div>
        <div class="sample"><span>Unreadable:</span> {{sentence | unreadable}}</div>
        <div class="sample"><span>Almost readable:</span> {{sentence | almost_readable}}</div>

CSS

.sample
{
    margin: 20px;
}
span
{
    padding: 5px;
    background-color: #F1F1F1;
}

JavaScript

var app = angular.module('App',[]);

app.filter('ucf', function()
{
    return function(word)
    {
        return word.substring(0,1).toUpperCase() + word.slice(1);
    }
});

app.filter('pluralize', function()
{
    return function(word, items)
    {
        for (i in items)
        {
            if (word == items[i].word) return items[i].plural;   
        }
    }
});

app.filter('ucf_sentence', function()
{
    return function(sentence)
    {
        var word_arr = sentence.split(" ");
        var new_sentence = '';
        
        for (i in word_arr)
        {
            new_sentence += word_arr[i].substring(0,1).toUpperCase()+word_arr[i].slice(1) + " ";
        }
        return new_sentence;
    }
});

app.filter('unreadable', function()
{
    return function(text)
    {
        var letters = ['a','b','c','d','e','f','g','h','i','j','k','l','m',
                       'n','o','p','q','r','s','t','u','v','w','x','y','z'];
        var sentence_final = '';
        var middle_tmp = '';
        var sentence_arr = text.split(" ");
        
        for (i in sentence_arr)
        {
            last = sentence_arr[i].substr(sentence_arr[i].length-1,sentence_arr[i].length-2);
            
            if (last == '.' || last == ',' || last == ':' || last == ';')
            {
                last = sentence_arr[i].substr(sentence_arr[i].length-2, sentence_arr[i].length-3);
                middle = sentence_arr[i].substr(1,sentence_arr[i].length-3).split("");
            } else {
                middle = sentence_arr[i].substr(1,sentence_arr[i].length-2).split("");
            }
            
            middle_tmp = '';
            
            for (j in middle)
            {
                middle[j] = letters[Math.floor(Math.random() * letters.length)];
                middle_tmp += middle[j];
            }
            
            sentence_final += sentence_arr[i].substr(0,1) + middle_tmp + last + " ";   
        }
        return sentence_final;
   ...