JSFiddle - React, Tailwind, and code Playground

by vrcca

HTML

<div ng-app="l33tConverterApp" ng-controller="SentencesCtrl as sentencesCtrl">
    <form name="sentenceForm" ng-submit="sentenceForm.$valid && sentencesCtrl.add()" novalidate> <span>Text:</span>

        <textarea name="rawText" ng-model="sentencesCtrl.rawText" required></textarea> <span ng-show="sentenceForm.rawText.$error.required">&lt;&lt;</span>
 <span ng-hide="sentenceForm.rawText.$error.required">&gt;&gt;</span>

        <input type="submit" value="Converter" />
    </form>
    <div>
        <div ng-repeat="sentence in sentencesCtrl.sentences | reverse">
            <p>{{sentence.text}} <a href="" ng-click="sentencesCtrl.remove(sentence.id)">X</a>

            </p>
            <hr/>
        </div>
    </div>
</div>

JavaScript

var app = angular.module("l33tConverterApp", []);
app.filter('reverse', function () {
    return function (items) {
        return items.slice().reverse();
    };
});
app.controller("SentencesCtrl", ['sentencesFactory', function (sentencesFactory) {
    this.rawText = "";

    this.sentences = sentencesFactory.getSentences();

    this.add = function () {
        sentencesFactory.add(this.rawText);
        this.sentences = sentencesFactory.getSentences();
        this.rawText = "";
    };

    this.remove = function (id) {
        if (confirm("Are you sure?")) {
            sentencesFactory.remove(id);
            this.sentences = sentencesFactory.getSentences();
        }
    };
}]);

app.factory("sentencesFactory", function () {
    var service = {};

    function convertText(text) {
        var replaceList = {
            "a": "4",
                "s": "5",
                "e": "3",
                "o": "0",
                "i": "1"
        };

        var convertedText = text;
        for (var letter in replaceList) {
            var pattern = new RegExp(letter, "gi");
            convertedText = convertedText.replace(pattern, replaceList[letter]);
        }
        convertedText = convertedText.replace(/(?:\r\n|\r|\n)/g, '<br />');

        return convertedText;
    }

    function persist(sentences) {
        window.localStorage.setItem("sentences", JSON.stringify(sentences));
    }

    service.getSentences = function () {
        var sentences = window.localStorage.getItem("sentences");
        if (typeof sentences === 'string') {
            sentences = JSON.parse(sentences);
        } else {
            sentences = [];
        }
        return sentences;
    };

    service.add = function (rawText) {
        var sentences = service.getSentences();
        var newSentence = new Sentence(sentences.length + 1, convertText(rawText));
        sentences.push(newSentence);
        persist(sentences);
    };

    service.remove = function (sentenceId) {
       ...