JSFiddle - React, Tailwind, and code Playground

by br1ckb0t

HTML

<div id="conversation">
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
  background-color: white;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1;
  color: #414141;
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

p {
  font-size: 1.2em;
  line-height: 1.25em;
}

.datestamp {
  display: block;
  clear: both;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
  color: #8b91a0;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
}


/** page structure **/
.container {
  margin: 0 70px;
}


/** ios1-ios6 bubbles **/
.bubble {
 ...

JavaScript

(function() {
    makeBubbles(parseChat(getChatText())); 
})();


function getChatText() {
    return prompt("chat text");
}


function parseChat(chatText) {
    return chatText.split("\n");
}


function makeBubbles(messages) {
    var displayedCount = 0;
    messages.forEach(function(message) {
        var re = /\((.+)\) (.+): (.+)\s/g;
        var match = re.exec(message);
        if (match) {
            var timestamp = match[1];
            var sender = match[2];
            var messageText = match[3];
            if (!sender.match("SYSTEM")) {
                var showTimestamp = displayedCount % 5 === 0;
                displayedCount ++;
                firstMessage = false;
                appendMessage(timestamp, sender, messageText, showTimestamp);
            }
        }
    });
}


function appendMessage(timestamp, sender, messageText, showTimestamp) {
    if (showTimestamp) {
        $("<p/>", {"class": "datestamp"})
            .text(timestamp)
            .appendTo($("#conversation"));
    }

    var bubbleClass = isQSAgent(sender) ? "bubble bubble-alt yellow" : "bubble";
    var newBubble = $("<div/>", {"class": bubbleClass})
        .text(messageText);
    newBubble.addClass(bubbleClass);
    var senderSpan = $("<span/>", {"class": "sender"}).text(sender + ": ");
    newBubble.prepend(senderSpan);

    var newContainer = $("<div/>", {"class": "container"});
    newContainer.append(newBubble);
    $("#conversation").append(newContainer);
}

function isQSAgent(sender) {
    var qsAgents = ["Anna", "Azroy", "Elisabeth", "Rick", "Victor", "Azreen", "Ben", "Bernadette", "Elka", "Emily", "Ezekiel", "Marsha", "Regie"];
    for (var i = 0; i < qsAgents.length; i++) {
        if (sender.match(qsAgents[i])) {
            return true;
        }
    }
    return false;
}