JSFiddle - React, Tailwind, and code Playground

by dmitri_aleksejev

HTML

<script src="https://flat-club.com/bundles/bootstrapstyles?v=XQMWP0MSQ9W4uySvg8-S2EQKFFBm1HEAUbehggw5ah81"></script>
<script src="https://flat-club.com/bundles/styles?v=hkOY1ecyuf-I8JG6BXU8Nu_l3RdIu6qCw1eiEedj4tw1"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost:8096/Content/themes/flat-club/css/homestay-reviews.css">
<script src="http://flat-club.com/bundles/flat-view-styles?v=sl63VoS3JtLXgbZ-CkXvMzPjeHgJ8bBJunhzkYJTHVs1"></script>
<script src="https://flat-club.com/bundles/flat-view-styles?v=sl63VoS3JtLXgbZ-CkXvMzPjeHgJ8bBJunhzkYJTHVs1"></script>
<div class="span12" id="reviews">
     <h2>HomeStayReviews</h2>

    <div id="reviewDisplay">
        <iframe src="//localhost:8096/mockup/HomeStayReviews/HomeStayReviews"></iframe>
    </div>
</div>

JavaScript

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
    console.log(event);
    //if (event.origin !== "http://example.org:8080"){    return;}
    makeReviews(event.data)
}

function makeReviews(reviewsArray) {
    $("#reviewDisplay").html("");
    $.each(reviewsArray, function (i, e) {
        var start = '<div class="review clear-border"><div class="media clear-border">';
        var middle = '<div class="media-body flat-view-review-body">';
        var starRateO = '<section class="media-body  star-ratings pull-left review-rating"><div class="rating">';
        var starRateC = '</div></section>';
        var close = '</div>';

        var image;
        var nameNStay;
        var review;
        var starRating = [];

        if (e.user.image != null || e.user.image != "undefined") {
            image = '<a class="flat-view-review-user pull-left text-center" href="javascript:void(0)"><img id="" src="' + e.user.image + '"title="' + e.user.name + '"><div class="flat-view-review-user-name"><small>Externally Verified Review</small></div></a>';
        } else {
            image = '<div class="flat-view-review-user pull-left text-center"><div class="flat-view-review-user-name"><span>Externally Verified Review</span></div></div>';
        }

        if (e.user.name != null && e.date != null) {
            nameNStay = '<div class="media-body media-body-title"><a class="normal-link" href="javascript:void(0)"><span>' + e.user.name + '</span></a> <span>stayed in ' + e.date + '</span></div>';
        } else if (e.user.name != null) {
            nameNStay = '<div class="media-body media-body-title"><a class="normal-link" href="javascript:void(0)"><span>' + e.user.name + '</span></a></div>';
        } else {
            nameNStay = '';
        }

        if (e.content != null) {
            var text = e.content.replace(/<[/\w]+>/g, "");

            if (text.length > 100) {
                var showMore = '<a...