DailyUploads

HTML

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<div id="form">
    <form>
        <fieldset>
            <label for="day">Jour</label>
            <input type="date" id="day" name="day" data-bind="value: day" />
        </fieldset>
        <fieldset>
            <label for="category">Catégorie</label>
            <input type="text" id="category" name="category" data-bind="value: category" size="50"/>
        </fieldset>
        <button data-bind="click: updateImages">Charger</button>
        <button data-bind="click: layout">Ranger</button>
    </form>
</div>
<div id="images" data-bind="foreach: images">
    <div class="item"><a data-bind="attr: {href: descurl}" target="_blank"><img data-bind="attr: {src: thumburl, alt: title}"/></a></div>
</div>

CSS

body {
   background-color: black; 
   color: white;
    font-family: sans-serif;
}

fieldset {
    border: none;
}

.item {
    margin: 8px;
    border: 1px solid white;
    width: 320px;
}

JavaScript

function viewModel() {
    var self = this;

    self.day = ko.observable("2017-05-01");
    self.category = ko.observable("Images from Wiki Loves Earth 2017 in France");
    self.images = ko.observableArray();
    self.layout = function() {
        $("#images").isotope("destroy");
        $("#images").isotope({
            itemSelector: '.item',
            layoutMode: 'masonry'
        });
    };
    self.updateImages = function () {
        self.images.removeAll();
        var start = new Date(self.day());
        start.setHours(0);
        start.setMinutes(0);
        start.setSeconds(0);
        start.setMilliseconds(0);
        var end = new Date(self.day());
        end.setHours(23);
        end.setMinutes(59);
        end.setSeconds(59);
        end.setMilliseconds(999);
        self.continueUpdate({
            start: start,
            end: end
        });
    };
    self.continueUpdate = function (boundaries, queryContinue) {
        var data = {
            action: "query",
            prop: "imageinfo",
            iiprop: "url",
            iiurlwidth: 320,
            generator: "categorymembers",
            gcmtitle: "Category:" + self.category(),
            gcmtype: "file",
            gcmprop: "title",
            gcmlimit: 50,
            gcmsort: "timestamp",
            gcmstart: boundaries.start.toUTCString(),
            gcmend: boundaries.end.toUTCString(),
            format: "json"
        };
        if (queryContinue) {
            for (var attrname in queryContinue) {
                data[attrname] = queryContinue[attrname];
            }
        } else {
            data.continue = "";
        }
        $.getJSON("//commons.wikimedia.org/w/api.php?callback=?", data, function (data) {
            $.each(data.query.pages, function (index, file) {
                var image = {
                    title: file.title,
                    thumburl: file.imageinfo[0].thumburl,
                    descurl: file.imageinfo[0].descriptionurl
  ...