WD On this day

Fills a select box with values from the query service

by Magnus Sälgö

HTML

<script src="https://cdn.rawgit.com/wikimedia/wikidata-query-gui/master/wikibase/queryService/api/Sparql.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<h2>On this day test</h2>
<div id="explain">
Gets data from  <a href="https://byabbe.se/on-this-day/">byabbe.se/on-this-day/</a> <br /><br /> <br />
<select class="onThisDayList">
  <option value="events">Events</option>
  <option value="births">Births</option>
  <option value="deaths">Deaths</option>
</select><br /><br />API call: <span id="URL"></span><br />Wikipage: <span id="wikiPage"></span><br />
Tid API: <div id="TimeAPI"></div><br />
Tid: <div id="Time"></div>
<div id="Hits"></div> <div id="Time"></div>
<div id="Render"></div>

<div id="output"></div>
<div class="modal"></div>

CSS

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}

body {
   color: #444;
   background: #e2ff00;
   /* fallback for old browsers */
   background: -webkit-linear-gradient(to left, #000800, #e2ff00);
   /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to left, #000800, #e2ff00);
   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   font-family: 'Dosis', sans-serif;
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   font-size: 16px;
 }

 a {
   color: #444;
   cursor: pointer;
 }

 a:hover {
   color: #555;
   text-decoration: none;
 }
#URL {
   margin-top: 20px;
   padding: 0 5%;
   color: darkblue;
}

#wikiPage {
   margin-top: 20px;
   padding: 2% 6%;
   color: darkblue;
}

#Hits {
   margin-top: 20px;
   padding: 0 5%;
   color: #437746;
   font-size: 30px;
}

.more {
   color: darkgreen;
} 
#output {
   margin-top: 40px;
   padding: 0 5%;
}


#TimeAPI {
   padding: 0 7%;
   display:inline;
   color:red;
   }
#Time {
   padding: 0 10%;
   display:inline;
   color:red;
   }

.list a {
  text-decoration: none;
}
.list a:hover {
  text-decoration: none;
  background: lightgreen;
} 
li a:hover {
 ...

JavaScript

$body = $("body");

$(document).on({
    ajaxStart: function() { $body.addClass("loading");    },
    ajaxStop: function() { $body.removeClass("loading"); }    
});

$(function() {
	new WOW().init();

  var d = new Date();
	var month = d.getMonth()+1;
	var day = d.getDate();

  var urlAbbe = "https://byabbe.se/on-this-day";
//  var url = "https://byabbe.se/on-this-day/9/27/events.json";
	var url = urlAbbe + '/' + month + '/' + day + '/' + $('.onThisDayList').val() + '.json' ;

    retrieve(url);

	$( '.onThisDayList' ).change(function() {       
		var url = urlAbbe + '/' + month + '/' + day + '/' + $('.onThisDayList').val() + '.json' ;
		retrieve(url);
	});

});

  
function retrieve(url){
  start = new Date().getTime();
//console.log(start);
  $("#URL").html("<a href='" + url + "' target=_blank>" + url +"</a>");        
  let output = "";
  
  $.event.trigger("ajaxStart");

  $.ajax({
   type: "GET",
   url: url,
   complete: function(data) {
   time = new Date().getTime() - start; // millisec
	 console.log(time)
	$("#TimeAPI").html(time + " msec");   

    wikipage = data.responseJSON.wikipedia;
    $("#wikiPage").html("<a href='"+ wikipage +"' target=_blank>" + wikipage + "</a>");   
		switch( $('.onThisDayList').val()) {
    	case "births":
        	info = data.responseJSON.births;
        	break;
    	case "deaths":
        	info = data.responseJSON.deaths;
        	break;
    	default:
        	info = data.responseJSON.events;
		} 		
      let numberofHits = "Number of hits on this day " + info.length + " <div data-wow-duration='6s' data-wow-offset='10' class='wow bounceInUp more'>scroll down to learn more </div>";
          $("#Hits").html(numberofHits);   

          $.each(info, (i, val) => {
            output += `
              <div class="text-left" id="results">
                  <div class="wow slideInLeft result" data-wow-offset="100" data-wow-duration="1s">${val.year} - ${val.description}
                  </div>
              </div>`
            ...