JS Append Text and Sweetalert demo

A simple way to append text and count typed characters using js. also a cool alert js called sweetalert

by Musale Martin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-lg-3"></div>
        <div class="col-lg-6">
            <div>
					<textarea class='form-control' placeholder="Write something..." id="message"
                              name="message" size='20'></textarea>
                <span id="characters">0</span>
            </div>
            <div>
                <div class="checkbox">
                    <label for="deptCheck"><input type="checkbox" value="" class="checkbox-inline"
                                                  id="deptCheck">Select a department to add at the end
                        of the text

                        <select class="form-control" id="departments">
                            <option>Dept 1</option>
                            <option>Dept 2</option>
                            <option>Dept 3</option>
                            <option>Dept 4</option>
                            <option>Dept 5</option>
                            <option>Dept 6</option>
                            <option>Dept 7</option>
                            <option>Dept 8</option>
                        </select>
                    </label>
                </div>
                <div class="checkbox">
                    <label for="usernameText">
                        <p id="from-txt" hidden>FROM ADMIN:</p>
                        <input type="checkbox" id="usernameText">Attach the text
                        "FROM ADMIN: " at the beginning of the...

JavaScript

var minLength = 0;
        $('#message').keyup(function () {
            var length = $(this).val().length;
            var length = minLength + length;
            var texting;
            //get the extra characters when you divide the typed characters by 140
            // i.e. 285 % 140 = 5
            var extra_one = length % 140;

            // remove the extra characters and the divide this value by 140 to get
            // the amount to pay for the characters i.e. (285 - 5)/140 = 2 that means
            // the 1st charge is KES. 2
            var extra_exact = (length - extra_one) / 140;

            // and then add 1 for the extra_one (5 characters) thus charge is 3
            var charge = extra_exact + 1;
            texting = "You have typed "+length+" characters. SMS CHARGE FOR EACH NUMBER: "+ charge;
            $('#characters').text(texting)
        });
        
        $('#deptCheck').click(function () {

            var theMessage = $("#message").val();
            var theDepartment = $("#departments").find(":selected").text();

            if ($(this).is(":checked")) {

                console.log(theMessage + theDepartment);
                $("#message").val(theMessage + " --" + theDepartment);
            }
            else {
                swal({
                    title: "Added Department",
                    text: "You have added " + theDepartment + " at the end of your SMS. Please remove it to avoid extra charges on your SMS",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Cool",
                    closeOnConfirm: true
                });
            }
        });
        $('#usernameText').click(function () {
            var theMessage = $("#message").val();
            var fromTxt = $('#from-txt').text();
            console.log(fromTxt);

            if ($(this).is(":checked")) {

                console.log(fromTxt);
               ...