diff --git a/beer.css b/beer.css index 0690f08..2e90099 100644 --- a/beer.css +++ b/beer.css @@ -41,3 +41,21 @@ img { margin-right: 30px; font-size: 50%; } + +.error { + text-align: center; +} + +.error h1 { + font-size: 400%; + margin-bottom: -10px; +} + +.hidden { + display: none; +} + +.refresh { + text-align: center; + font-size: 200%; +} diff --git a/beer.js b/beer.js index bf0c5df..ad035a4 100644 --- a/beer.js +++ b/beer.js @@ -2,6 +2,9 @@ define(function(require, exports, module) { module.exports = function () { var flags = require("flags.js"); var config = require("config.js"); + $(".error,.catalog").toggleClass("hidden", true); + $(".throbber").toggleClass("hidden", false); + $(".catalog ul").empty(); $.ajax({ "url": config.baseURL + "/beer?page=0" + (config.extraQueryStringSuffix != null ? "&" + config.extraQueryStringSuffix : ""), "success": function (data, status, xhr) { @@ -18,12 +21,27 @@ module.exports = function () { .text(data[i].name) .prepend($("").text(flag).toggleClass("flag")) .append($("").text(rating).toggleClass("rating")) - .appendTo($(".catalog")); + .appendTo($(".catalog ul")); } + + $(".catalog").toggleClass("hidden", false); + $(".throbber").toggleClass("hidden", true); } catch (e) { console.log(e); + $("#error_message").text(e.message); + $(".error").toggleClass("hidden", false); + $(".throbber").toggleClass("hidden", true); } }, + "error": function (xhr, status, error) { + if (xhr.status == "403") { + $("#error_message").text("API Quota reached !"); + } else { + $("#error_message").text("Sorry ! HTTP Status Code " + xhr.status); + } + $(".error").toggleClass("hidden", false); + $(".throbber").toggleClass("hidden", true); + }, "headers": config.additionalHeaders != null ? config.additionalHeaders : {} }); }; diff --git a/index.html b/index.html index 04a3739..bce74b0 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,10 @@ @@ -17,7 +18,16 @@

BEER CATALOG

- +
+
    +
+
🔄
+
+ +