JSFiddle - React, Tailwind, and code Playground

by Cameron Bernhardt

HTML

<script src="//dl.dropboxusercontent.com/u/56017856/Mandrill%20Sender/mandrill.min.js"></script>
<input type="text" id="name" placeholder="Your Name" required="required" />
<input type="email" id="email" placeholder="Your Email" required="required" />
<br/>
<input type="text" id="subject" placeholder="Subject" />
<br/>
<br/>
<textarea rows="4" cols="30" id="html" placeholder="HTML"></textarea>
<br/>
<span>OR</span>

<br/>
<textarea rows="4" cols="30" id="text" placeholder="Text"></textarea>
<br/>
<button onclick="send(); return false;">Send</button>
<br/>
<div id="recipients">
     <h3>Recipients</h3>

    <input type="checkbox" name="recipients" checked="true" />&nbsp;Cameron
    <br/>
    <input type="checkbox" name="recipients" checked="true" />&nbsp;Jonah
    <br/>
    <input type="checkbox" name="recipients" checked="true" />&nbsp;Anton
    <br/>
    <input type="checkbox" name="recipients" checked="true" />&nbsp;Yiyi
    <br/>
    <input type="checkbox" name="recipients" checked="true" />&nbsp;Kevin
    <br/>
</div>
<div id="sent"></div>

CSS

input[type="text"], input[type="email"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#text, #html {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
span {
    display: block;
    text-align: center;
}
.ast {
    color: red;
    display: inline;
}
#sent {
    text-align: center;
}
#recipients {
    position: absolute;
    top: 10%;
    right: 5%;
}

JavaScript

var names = ["Cameron Bernhardt", "Jonah Langlieb", "Anton Pozharskiy", "Yiyi Kuang", "Kevin Wang"];
var emails = ["[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]"];
var limit = 5;
var sends = 0;

function send() {
    if (sends < limit) {
        var m = new mandrill.Mandrill('INnYaaWz1GAZSqMg5qy-zA');

        var html = document.getElementById("html").value;
        var text = document.getElementById("text").value;
        var subject = document.getElementById("subject").value;
        var recipientsList = document.getElementsByName("recipients");
        var recipients = [];
        for (var j = 0; j < recipientsList.length; j++) {
            recipients[j] = recipientsList[j].checked;
        }

        var message = {
            "from_email": document.getElementById("email").value,
                "from_name": document.getElementById("name").value,
                "to": [],
                "subject": "No Subject",
                "track_opens": true,
                "track_clicks": true,
        };

        for (var i = 0; i < names.length; i++) {
            if (recipients[i]) {
                message.to.push({
                    "name": names[i],
                        "email": emails[i]
                });
            }
        }

        if (html) {
            message.html = html;
        } else {
            message.text = text;
        }

        if (subject) {
            message.subject = subject;
        }

        m.messages.send({
            "message": message,
        });
        sends++;
        document.getElementById("sent").innerHTML = "Sent email #" + sends + ": " + (limit - sends) + " remaining.";
    } else {
        alert("Sorry, you've already sent " + limit + " emails.");
    }
}