JSFiddle - React, Tailwind, and code Playground
by shrenuj
HTML
<script>
//this code fetches country. Dont change
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("getCountry").innerHTML = myObj.country_name;
document.getElementById("getCountry2").innerHTML = myObj.country_name;
var getCountry3 = myObj.country_name;
}
};
xmlhttp.open("GET", "https://geolocation-db.com/json/0f761a30-fe14-11e9-b59f-e53803842572", true);
xmlhttp.send();
</script>
<script>
//this code is for the popup which takes name as input.
// have used AlertifyJS which is known for developing pretty browser dialogs and notifications.
function promalert() {
// A prompt dialog example
alertify.prompt("Your Real Name please?", function(e, useremail) {
if (e) {
// alertify.alert("You entered: </BR>" + useremail);
document.getElementById("customname1").innerHTML = useremail;
document.getElementById("customname2").innerHTML = useremail;
} else {
alertify.alert("It takes only 3 seconds!");
promalert();
}
}, "");
}
window.onload = promalert;
</script>
<!-- This code is the CSS and js file for the popup which takes name as input.The CSS is short and straight forward -->
<script src="https://www.jquery-az.com/javascript/alert/dist/alertify.min.js"></script>
<link rel="stylesheet" href="https://www.jquery-az.com/javascript/alert/dist/alertify.core.css" />
<link rel="stylesheet" href="https://www.jquery-az.com/javascript/alert/dist/alertify.custom.css" />
<!--Date calculation codes.Dont change-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script>
var todaydates = moment().format("DD MMMM, YYYY");
var add1m = moment().add(1, 'months').format("DD MMMM, YYYY");
var add2m = moment().add(2, 'months').format("DD MMMM, YYYY");
var add3m =...