Pebble Hearts

Displays the number of hearts a given application has on the Pebble Appstore.

by Cameron Bernhardt

HTML

<h1>Pebble Hearts</h1>

<div id="init">
     <h2>Enter your Pebble ID</h2>  <sup><span id="help">?</span></sup>

    <br>
    <input type="text" id="id" />
    <button id="sub">Go!</button>
    <br>
    <div id="message" hidden>Please enter an ID.</div>
    <br>
    <br>
    <br>
    <div id="helper" hidden> <em>Where's that?</em>

        <br>Why, the Developer Portal, of course! The URL of your app's page should read:
        <br> <code>https://dev-portal.getpebble.com/applications/YOUR_ID/</code>
        <br>
        <img src="https://dl.dropboxusercontent.com/u/56017856/ID_Screenshot.png" />
    </div>
</div>
<div id="hearts"></div>

CSS

body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: Sans-Serif;
}
img {
    width: 600px;
}
h2 {
    display: inline-block;
}
#help {
    border-radius: 100%;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    background-color: grey;
    cursor: default;
}
#help:hover {
    background-color: lightgrey;
    cursor: pointer;
}
#num {
    color: red;
}
}
#hearts {
    position: fixed;
}
#message {
    color: red;
}

JavaScript

var helper = true;
var first = true;
$("#help").click(function () {
    if (helper) {
        $("#helper").fadeIn();
        helper = false;
    } else {
        $("#helper").fadeOut();
        helper = true;
    }

});

$("#sub").click(find);

function find() {
    if (first) {
        if ($("#id").val()) {
            var req = new XMLHttpRequest();
            var url = "http://pblweb.com/api/v1/hearts/" + $("#id").val() + ".json";

            req.open('GET', url, true);
            req.onload = function (e) {
                if (req.readyState == 4 && req.status == 200) {
                    if (req.status == 200) {
                        var response = JSON.parse(req.responseText);
                        $("#init").remove();
                        $("#hearts").html("<h2>This app has <span id='num'>" + response.hearts + "</span> hearts</h2><br><br>Another?<br><input id='id'/><button id='sub' onclick='find()'>Go!</button><br><div id='message' hidden>Please enter an ID.</div>");
                        $("#hearts").fadeIn(2000);
                        $("#sub").click(find);
                    } else {
                        alert("Sorry; it appears that there has been an error. Check to make sure that the ID you've entered is valid.");
                    }
                }
            };
            req.send(null);
            first = false;
        } else {
            $("#message").fadeIn(1000).delay(500).fadeOut(1000);
        }
    } else {
        if ($("#id").val()) {
            var req = new XMLHttpRequest();
            var url = "http://pblweb.com/api/v1/hearts/" + $("#id").val() + ".json";

            req.open('GET', url, true);
            req.onload = function (e) {
                if (req.readyState == 4 && req.status == 200) {
                    if (req.status == 200) {
                        var response = JSON.parse(req.responseText);
                        $("#num").html(response.hearts);
                    } else {
             ...