SXP - maker - peter code

by Lio Fleishman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.3/chance.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <div class="title">
        <p>SXP - Multiple Tasks Generator</p>
    </div>
    <div class="container">
        <div class="inputs">
                <input type="text" id="CallID" placeholder="CallID">
                <input type="text" id="Priority" placeholder="Priority">
                <input type="text" id="Region" placeholder="Region">
                <input type="text" id="District" placeholder="District">
                <input type="number" id="Duration" placeholder="Duration (s)">
                <input type="text" id="TaskType" placeholder="TaskType">
                <input type="text" id="EarlyStart" placeholder="EarlyStart">
                <input type="text" id="LateStart" placeholder="LateStart">
                <input type="text" id="DisplayDate" placeholder="DisplayDate">
                <input type="text" id="DueDate" placeholder="DueDate">
                <input type="number" id="Latitude" placeholder="Latitude">
                <input type="number" id="Longitude" placeholder="Longitude">
                <input type="text" id="GISDataSource" placeholder="GISDataSource">
                <input type="text" id="Customer" placeholder="Customer">
                <p class="howmany">How Many?</p>
                <input type="text" id="HowMany" placeholder="1" maxlength="3">
                <br>
        </div>
        <div class="buttons">
            <button id="myBtn" onclick="createTasks()">Generate</button>
            <button id="slctBtn" onclick="selectAll()">Copy to Clipboard</button>
            <button id="random" class="random" onclick="randomize()">I'm lazy</button>
        </div>
        <textarea id="result" readonly=""></textarea>
    </div>

CSS

.title {
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
}
.container {
    margin: 0 auto;
}
input[type=text], textarea {}
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.buttons {
    text-align: center;
    margin-top: 30px;
}
.inputs {
    text-align: center;
    margin: 30px;
    max-width: 400px;
    float: left;

}
input {
    height: 30px;
    padding: 3px;
}
#myBtn {
    height: 50px;
    width: 150px;
    background-color: #F9B117;
    border: none;
    outline: none;
    color: #004b7a;
    margin-bottom: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.5s
}
#myBtn:hover {
    background-color: #ffd47f;
    transition: 0.5s
}
#myBtn:active {
    background-color: #ad7505;
    transition: 0.5s
}
#myBtn:visited {
    background-color: #F9B117;
    transition: 0.5s
}
#result {
    display: block;
    margin: 0 auto;
    width: 500px;
    height: 250px;
    text-align: left;
    font-size: 15px;
    background-color: black;
    color: white;
    border: none;
    resize: none;
}
#slctBtn {
    height: 50px;
    width: 150px;
    background-color: #30db77;
    margin-bottom: 20px;
    border: none;
    outline: none;
    color: #004b7a;
    font-size: 12px;
    cursor: pointer;
    transition: 0.5s
}
#slctBtn:hover {
    background-color: #33ea7f;
    transition: 0.5s
}
#slctBtn:active {
    background-color: #239350;
    transition: 0.5s
}
#slctBtn:visited {
    background-color: #30db77;
    transition: 0.5s
}
.howmany {
    font-size: 12px;
    margin-top: 20px;
}
#random {
    height: 50px;
    width: 100px;
    margin-left: 90px;
    background-color: #e54537;
    margin-bottom: 20px;
    border: none;
    outline: none;
    font-size: 12px;
    cursor: pointer;
    color: white;
    transition: 0.5s
}
#random:hover {
    background-color: #f44c3d;
    transition: 0.5s
}
#random:active {
    background-color: #84281f;
    transition: 0.5s
}
#random:visited {
    background-color:...

JavaScript

(function(){

var d = new Date();
var year = d.getFullYear();
var month = function() {
    if (d.getMonth() < 10) {
        return "0" + (d.getMonth() + 1);
    } else if (d.getMonth() <= 11) {
        return (d.getMonth() + 1);
    } else {
        return chance.integer({
            min: 01,
            max: 03
        });;
    }
}
var monthDue = function() {
    if (d.getMonth() < 10) {
        return "0" + (d.getMonth() + 2);
    } else if (d.getMonth() == 10) {
        return (d.getMonth() + 2);
    } else {
      return chance.integer({
          min: 01,
          max: 03
      });
    }
}

var monthEarly = function() {
    if (d.getMonth() < 10) {
        return "0" + d.getMonth();
    } else {
        return d.getMonth();
    }
}
var day = function() {
    if (d.getDate() < 10) {
        return "0" + d.getDate();
    } else {
        return d.getDate();
    }
}
var hour = function() {
    if (d.getHours() < 10) {
        return "0" + d.getHours();
    } else {
        return d.getHours();
    }
};
var min = function() {
    if (d.getMinutes() < 10) {
        return "0" + d.getMinutes();
    } else {
        return d.getMinutes();
    }
};
var sec = function() {
    if (d.getSeconds() < 10) {
        return "0" + d.getSeconds();
    } else {
        return d.getSeconds();
    }
};
var today = year + "-" + month() + "-" + day() + " " + hour() + ":" + min() + ":" + sec();
var due = year + "-" + monthDue() + "-" + day() + " " + hour() + ":" + min() + ":" + sec();
var early = year + "-" + monthEarly() + "-" + day() + " " + hour() + ":" + min() + ":" + sec();

//random
function randomize() {
    document.getElementById('CallID').value = chance.word();
    document.getElementById('Priority').value = "2";
    document.getElementById('Region').value = "Florida";
    document.getElementById('District').value = "Miami";
    document.getElementById('Customer').value = chance.name();
    document.getElementById('Duration').value = "3600";
   ...