Bungie.net API in jQuery

by Cory Hughes

HTML

<div id="wrapper">
        <div id="nav">
            <div id="navTitle">Grimoire Guide</div>
            <div id="survey">Click to evaluate</div>
            <div id="navLogin" style="visibility: visible;">Join/Login</div>
            <div id="navLogout">&nbsp;</div>
            <div id="userDisplay">&nbsp;</div>
        </div>
        <div id="collection" style="top: 0px;"><div onclick="collectionPick(this.id)" class="collection tooltip" id="Guardian" style="background: url(https://www.bungie.net/common/destiny_content/grimoire/images/themes-sprites-sm_5af5d0da49f96e1ebed78cc404451d4e.jpg) -0px -0px;"><div class="tooltiptext"> Guardian </div></div><div onclick="collectionPick(this.id)" class="collection tooltip" id="Inventory" style="background: url(https://www.bungie.net/common/destiny_content/grimoire/images/themes-sprites-sm_5af5d0da49f96e1ebed78cc404451d4e.jpg) -83px -0px;"><div class="tooltiptext"> Inventory </div></div><div onclick="collectionPick(this.id)" class="collection tooltip" id="Allies" style="background: url(https://www.bungie.net/common/destiny_content/grimoire/images/themes-sprites-sm_5af5d0da49f96e1ebed78cc404451d4e.jpg) -166px -0px;"><div class="tooltiptext"> Allies </div></div><div onclick="collectionPick(this.id)" class="collection tooltip" id="Enemies" style="background: url(https://www.bungie.net/common/destiny_content/grimoire/images/themes-sprites-sm_5af5d0da49f96e1ebed78cc404451d4e.jpg) -249px -0px;"><div class="tooltiptext"> Enemies </div></div><div onclick="collectionPick(this.id)" class="collection tooltip" id="Places" style="background: url(https://www.bungie.net/common/destiny_content/grimoire/images/themes-sprites-sm_5af5d0da49f96e1ebed78cc404451d4e.jpg) -332px -0px;"><div class="tooltiptext"> Places </div></div><div onclick="collectionPick(this.id)" class="collection tooltip" id="Activities" style="background:...

CSS

body{
    background-color: #1c232b;
    font-family: sans-serif;
}
#wrapper{
    margin:auto;
    width:1000px;
}
h2{
    margin:0 0 10px 0;
    color: white;
}
#collection, #set, #card{
    width:1000px;
    margin:auto;
}
#collection{
    margin-top: 70px;
    position: relative;
    z-index: 900;
    top: -150px;
}
.collection, .set, .card{
    border:2px solid black;
    height:83px;
    width:83px;
    margin-right:10px;
    margin-bottom:10px;
    display:inline-block;
    transition:all .1s ease-in-out;
    border-radius:5px;
    zoom: 1.2;
    box-shadow: 0 0 7px #fff;
}
.collection:hover, .set:hover, .card:hover{
    transform:scale(1.1);
}
#cardView{
    width:950px;
    min-height:419px;
    margin:auto;
}
#cardImg{
    float:left;
    height:419px;
    width:323px;
    border-radius: 10px;
}
#cardText{
    float:left;
    padding: 0 10px 0 10px;
    height:419px;
    width:585px;
    margin-left:10px;
    overflow: auto;
    background-color: rgba(255,255,255,0.6);
}
#cardGuide{
    width: 918px;
    padding: 10px;
    min-height: 50px;
    background-color: rgba(255,255,255,0.6);
    float: left;
    margin-top: 20px;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #2A333E;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 115%;
    left: 50%;
    margin-left: -60px;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #2A333E transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}
#nav{
    width: 1000px;
    height: 55px;
    color: white;
    margin: auto;
    background: #2A333E;
    top: 0;
    position: fixed;
    box-shadow: 0 0 7px #fff;
    z-index: 1000;
}
#navTitle{
    display: inline-block;
    margin-left: 19px;
    margin-top:...

JavaScript

$bungie = "https://www.bungie.net";
        $collection = $('#collection');
        $set = $('#set');
        $card = $('#card');
        $viewCard = $('#viewCard');
        $carddata = [];
        $guidedata = [];
        var delay = 500;
        var zoom = 0.7;
        var log = '';
        $username = '';
        $currentcard = '';
        $currentcardid = '';
        $('#navLogin').click(function(){
            window.location = $url+log
        });
        $('#navLogout').click(function(){
            $.ajax({
                type: "POST",
                url: $url + "logout",
                async: true,
                contentType: "application/json",
                dataType: 'json',
                success: function(json) {
                    console.log(json);
                },
                error: function(e) {
                    console.log(e);
                    window.location.href = $url;
                }
            });
        });
        $('#survey').click(function () {
            var URL = 'https://www.surveymonkey.co.uk/r/QF8BQHS';
            window.open(URL,'_blank');
        });
        $('body').on('click', 'button[name=update-guide]', function () {
            var guide = $("#guideBody").val();
            var link = $("#guideLink").val();
            var check = function(string) {
                return string.indexOf(' ') === -1;
            };
            if(check(link) == false){
                alert("No spaces in link please.")
            }
            else{
                updateGuide($currentcardid, guide, link);
            }
        });
        $(document).ready(function() {
            getGrim('GET', 'grim', '');
        });
        function getGrim(method, url, data){
            $.ajax({
                type: method,
                url: $url + url,
                async: true,
                data: data,
                contentType: "application/json",
                dataType: 'json',
                success:...