<!doctype html>
<html>
<head>
<style>

/* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */
/*
?wasfa=&wasfn=&wasfc=%238efa00&wasff=&wasfe=&wasfu=&wasfd=&wasft=&wasfm=&wasipollid=0&wastimestamp=1572914208
&fa=&fn=&fc=%23ff2f92&ff=&fe=&fu=&fd=&ft=&fm=&ipollid=0
*/

.glow {
font-size: 16px;
color: #fff;
text-align: center;
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
color: black;
}


@-webkit-keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

to {
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
</style>
<script type='text/javascript'>
var evalas=[];
var rep='', midtd='';
if (document.URL.indexOf('wastimestamp=') != -1) {
midtd='<td rowspan=9> ... versus<br> last<br> polling<br> on ...<br>' + todatetime(location.search.split('wastimestamp=')[1].split('&')[0]) + '</td>';
rep='<table border=1>';
rep+=(location.search.split('&fa=')[1] ? '<tr><td>Favourite anything</td><td>' + ourfadecodeURIComponent(location.search.split('&fa=')[1].split('&')[0],location.search.split('wasfa=')[1].split('&')[0]) + '</td></tr>' : '');
rep+=(location.search.split('&fn=')[1] ? '<tr><td>Favourite integer</td><td>' + ourfndecodeURIComponent(location.search.split('&fn=')[1].split('&')[0],location.search.split('wasfn=')[1].split('&')[0]) + '</td></tr>' : '');
rep+=(location.search.split('&fc=')[1] ? '<tr><td>Favourite colour</td><td>' + ('<font color=' + decodeURIComponent(location.search.split('&fc=')[1].split('&')[0]) + '>' + ourfcdecodeURIComponent(location.search.split('&fc=')[1].split('&')[0],location.search.split('wasfc=')[1].split('&')[0]) + '</font>').replace('<font color=></font>','').replace('<font color=></font>','') + '</td></tr>' : '');
rep+=(location.search.split('&ff=')[1] ? '<tr><td>Favourite file</td><td>' + ourffdecodeURIComponent(location.search.split('&ff=')[1].split('&')[0],location.search.split('wasff=')[1].split('&')[0]) + '</td></tr>' : '');
rep+=(location.search.split('&fe=')[1] ? '<tr><td>Favourite email</td><td>' + ourfedecodeURIComponent(location.search.split('&fe=')[1].split('&')[0],location.search.split('wasfe=')[1].split('&')[0]) + '</td></tr>' : '');
rep+=(location.search.split('&fu=')[1] ? '<tr><td>Favourite url</td><td>' + ourfudecodeURIComponent(location.search.split('&fu=')[1].split('&')[0],location.search.split('wasfu=')[1].split('&')[0]) + '</td></tr>' : '');
rep+=(location.search.split('&fd=')[1] ? '<tr><td>Favourite date</td><td>' + ourfddecodeURIComponent(location.search.split('&fd=')[1].split('&')[0],location.search.split('wasfd=')[1].split('&')[0]) + '</td></tr>' : '');
rep+=(location.search.split('&ft=')[1] ? '<tr><td>Favourite time</td><td>' + ourftdecodeURIComponent(location.search.split('&ft=')[1].split('&')[0],location.search.split('wasft=')[1].split('&')[0]) + '</td></tr>' : '');
rep+=(location.search.split('&fm=')[1] ? '<tr><td>Favourite month</td><td>' + ourfmdecodeURIComponent(location.search.split('&fm=')[1].split('&')[0],location.search.split('wasfm=')[1].split('&')[0]) + '</td></tr>' : '');
rep+='</table>';
} else {
rep=(location.search.split('fa=')[1] ? 'Favourite anything: ' + ourfadecodeURIComponent(location.search.split('fa=')[1].split('&')[0],'') + '<br>' : '');
rep+=(location.search.split('fn=')[1] ? 'Favourite integer: ' + ourfndecodeURIComponent(location.search.split('fn=')[1].split('&')[0],'') + '<br>' : '');
rep+=(location.search.split('fc=')[1] ? 'Favourite colour: ' + ('<font color=' + decodeURIComponent(location.search.split('fc=')[1].split('&')[0]) + '>' + ourfcdecodeURIComponent(location.search.split('fc=')[1].split('&')[0],'') + '</font>').replace('<font color=></font>','') + '<br>' : '');
rep+=(location.search.split('ff=')[1] ? 'Favourite file: ' + ourffdecodeURIComponent(location.search.split('ff=')[1].split('&')[0],'') + '<br>' : '');
rep+=(location.search.split('fe=')[1] ? 'Favourite email: ' + ourfedecodeURIComponent(location.search.split('fe=')[1].split('&')[0],'') + '<br>' : '');
rep+=(location.search.split('fu=')[1] ? 'Favourite url: ' + ourfudecodeURIComponent(location.search.split('fu=')[1].split('&')[0],'') + '<br>' : '');
rep+=(location.search.split('fd=')[1] ? 'Favourite date: ' + ourfddecodeURIComponent(location.search.split('fd=')[1].split('&')[0],'') + '<br>' : '');
rep+=(location.search.split('ft=')[1] ? 'Favourite time: ' + ourftdecodeURIComponent(location.search.split('ft=')[1].split('&')[0],'') + '<br>' : '');
rep+=(location.search.split('fm=')[1] ? 'Favourite month: ' + ourfmdecodeURIComponent(location.search.split('fm=')[1].split('&')[0],'') + '<br>' : '');
}

function ourfadecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('fa').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}
function ourfndecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('fn').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}
function ourfcdecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('fc').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</font></td>';
dc+=midtd;
midtd='';
if (wasv == '') {
dc+='<td><font color=' + decodeURIComponent(wasv) + '>';
dc+=decodeURIComponent(wasv);
} else {
dc+='<td><font color=' + decodeURIComponent(wasv) + '>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
}
return dc;
}
function ourffdecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('ff').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}
function ourfedecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('fe').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}
function ourfudecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl);
evalas.push("document.getElementById('fu').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}
function ourfddecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('fd').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}
function ourftdecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('ft').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}
function ourfmdecodeURIComponent(invl,wasv) {
var dc=decodeURIComponent(invl).replace(/\+/g,' ');
evalas.push("document.getElementById('fm').value='" + dc + "';");
if (document.URL.indexOf('wastimestamp=') != -1) {
dc+='</td>';
dc+=midtd;
midtd='';
dc+='<td>';
dc+=decodeURIComponent(wasv).replace(/\+/g,' ');
}
return dc;
}


function dorep() {
document.getElementById('drep').innerHTML=rep;
}

function moredetail(fn) {
var retval='';
var ins=document.getElementsByTagName('input'), jins=0;
for (jins=0; jins<ins.length; jins++) { if (ins[jins].name == fn) { ins[jins].className='glow'; } }
switch (fn) {
case 'fa':
retval='"Favourite anything"';
break;
case 'fn':
retval='"Favourite integer"';
break;
case 'fc':
retval='"Favourite colour"';
break;
case 'ff':
retval='"Favourite file"';
break;
case 'fe':
retval='"Favourite email"';
break;
case 'fu':
retval='"Favourite url"';
break;
case 'fd':
retval='"Favourite date"';
break;
case 'ft':
retval='"Favourite time"';
break;
case 'fm':
retval='"Favourite month"';
break;
}
return retval;
}

function todatetime(in_ts) { // thanks to https://stackoverflow.com/questions/847185/convert-a-unix-timestamp-to-time-in-javascript
// Create a new JavaScript Date object based on the timestamp
// multiplied by 1000 so that the argument is in milliseconds, not seconds.
var date = new Date(in_ts * 1000);
var months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var year = date.getFullYear();
var month = months[date.getMonth()];
var adate = date.getDate();
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();

// Will display time in 10:30:23 format
return adate + ' ' + month + ' ' + year + ' ' + hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
}

function getref() {
for (var ii=0; ii<evalas.length; ii++) {
eval(evalas[ii]);
}
var youremail='';
if (('' + document.referrer).indexOf('creator.php') != -1) {
if (('' + document.referrer).indexOf('?pollerquery=') != -1) {
youremail=" for Your Email [<a title='Email to yourself via default email client application' href='mailto:" + decodeURIComponent(('' + document.referrer).split('?pollerquery=')[1].split('&')[0]) + "'>" + decodeURIComponent(('' + document.referrer).split('?pollerquery=')[1].split('&')[0]) + '</a>] ';
}
document.getElementById('myh1').innerHTML='Favourites Polling';
document.getElementById('ibut').value='Poll Me';
document.getElementById('myform').action=('' + document.referrer).split('?')[0].split('#')[0];
if (document.URL.indexOf('timestamp=') != -1) {
document.getElementById('dref').innerHTML=location.search.split('timestamp=')[1] ? '<a target=_blank title="RJM Programming Favourites Polling" href="' + document.getElementById('myform').action + '">Favourites Polling</a>' + youremail + ' on ' + todatetime(location.search.split('timestamp=')[1].split('&')[0]) + ' ... <br><br>' : '';
if (evalas.length > 0) {
document.getElementById('ibut').value='Poll Me Again';
}
document.getElementById('dref').style.backgroundColor='yellow';
document.getElementById('dref').style.border='5px solid pink';
document.getElementById('dref').style.margin='5px 5px 5px 5px';
}
}
}

setTimeout(dorep, 2000);
</script>
</head>
<body onload='getref();'>
<div id=dref></div>
<div id=drep></div>
<h1 id=myh1>The oninvalid HTML form input element event</h1>
<h3>RJM Programming - July, 2019</h3><br>
<form id=myform action="./oninvalid.html" method="GET">
Favourite anything: <input placeholder="Mandatory field" id=fa name=fa type="text" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite integer: <input placeholder="Mandatory field" id=fn name=fn type="number" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" step=1 required></input><br><br>
Favourite colour: <input placeholder="Mandatory field" id=fc name=fc type="color" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite file: <input placeholder="Mandatory field" id=ff name=ff type="file" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite email: <input placeholder="Mandatory field" id=fe name=fe type="email" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite url: <input placeholder="Mandatory field" id=fu name=fu type="url" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite date: <input placeholder="Mandatory field" id=fd name=fd type="date" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite time: <input placeholder="Mandatory field" id=ft name=ft type="time" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
Favourite month: <input placeholder="Mandatory field" id=fm name=fm type="month" oninvalid="alert('You must fill out this ' + moredetail(this.name) + ' field!');" value="" required></input><br><br>
<input id=ibut type="submit" value="Report" style='background-color:yellow;'>
</form>


<input style='position:absolute;top:-200px;left:-200px;type=text value=''></input>
</body>
</html>