document.write ( `
<head>
<style>
body {
background-image: url('uploads/adomavp2/cats.jpg');
background-size: cover;
background-position: center;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
border-radius: 4px;
}
#content {
border: 2px solid #D6BA97;
border-radius: 5px;
background-color: #F5D5AD;
opacity: 0.8;
padding: 15px;
}
</style>
</head>
<body>
<div id='content'>
<div id='title'>
<h1> Cat As A Service </h1>
</div>
<div id='starter'>
<p>
<b>Get Started:</b> <input id='randomCat' type='button' value='Get A Random Cat' onclick='getRandomCat();' />
</p>
</div>
<div id='talking'>
<p>
<b>Cat Says:</b> <input id='talkingCat' type='text' maxlength='80'></input>
<b>Font:</b> <select name='font' id='font'>
<option value='Andale%20Mono'>Andale Mono</option>
<option value='Impact'>Impact</option>
<option value='Arial'>Arial</option>
<option value='Arial%20Black'>Arial Black</option>
<option value='Comic%20Sans%20MS'>Comic Sans MS</option>
<option value='Courier%20New'>Courier New</option>
<option value='Georgia'>Georgia</option>
<option value='Times%20New%20Roman'>Times New Roman</option>
<option value='Verdana'>Verdana</option>
<option value='Webdings'>Webdings</option>
</select>
<b>Font Size:</b> <input id='fontSize' type='number' value='30' min='10' max='90'></input>
<b>Font Colour:</b> <input id='fontColour' type='color' value='#FFFFFF'></input>
<input id='talkingCat' type='button' value='Get A Talking Cat' onclick='getTalkingCat();' />
</p>
</div>
<br>
<p id='catImage'> </p>
</div>
</body>
` );
// Clear previous cat image from the page.
function imageClear() {
var element = document.getElementById('catImage');
if(element !== null) {
element.parentNode.removeChild(element);
}
}
// Get random image of a cat.
function getRandomCat() {
imageClear();
fetch ('https://cataas.com/cat?position=center', {
method: 'GET',
})
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
const image = document.createElement('img');
image.src = imageUrl;
document.body.appendChild(image).setAttribute('id', 'catImage');
})
.catch(error => console.error('Error:', error));
}
//Get image of a cat with specified parameters.
function getTalkingCat() {
imageClear();
var text = document.getElementById('talkingCat').value;
if(text.length === 0) {
text = 'hello world';
}
var font = document.getElementById('font').value;
var fontSize = document.getElementById('fontSize').value;
var fontColour = document.getElementById('fontColour').value.replace('#', '%23');
fetch('https://cataas.com/cat/says/' + text + '?font=' + font + '&fontSize=' + fontSize + '&fontColor=' + fontColour + '&fontBackground=none&position=center', {
method: 'GET',
})
.then(response => response.blob())
.then(blob => {
const imageUrl = URL.createObjectURL(blob);
const image = document.createElement('img');
image.src = imageUrl;
document.body.appendChild(image).setAttribute('id', 'catImage');
})
.catch(error => console.error('Error:', error));
}