67 lines
1.8 KiB
HTML
67 lines
1.8 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Gatti casuali</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.centrato {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
#gatto-casuale {
|
||
|
|
height: 420px;
|
||
|
|
}
|
||
|
|
#bottone-ricarica {
|
||
|
|
font-size: 24px;
|
||
|
|
background-color: blueviolet;
|
||
|
|
padding: 6px;
|
||
|
|
border-radius: 6px;
|
||
|
|
color: white;
|
||
|
|
border: 3px solid blueviolet;
|
||
|
|
}
|
||
|
|
#bottone-ricarica:hover {
|
||
|
|
border: 3px solid black;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="centrato">
|
||
|
|
<button id="bottone-ricarica">Ricarica gatto</button></br></br>
|
||
|
|
<img id="gatto-casuale" src="" alt="Gatto casuale">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const immagine = document.getElementById("gatto-casuale");
|
||
|
|
const bottone = document.getElementById("bottone-ricarica");
|
||
|
|
|
||
|
|
async function getRandomCat() {
|
||
|
|
const url = "https://cataas.com/cat?json=true";
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(url);
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
const cat = await response.json();
|
||
|
|
immagine.src = cat.url;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (e) {
|
||
|
|
console.log(e.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
bottone.addEventListener("click", () => {
|
||
|
|
getRandomCat();
|
||
|
|
});
|
||
|
|
*/
|
||
|
|
// bottone.addEventListener("click", () => getRandomCat());
|
||
|
|
|
||
|
|
bottone.addEventListener("click", getRandomCat);
|
||
|
|
|
||
|
|
getRandomCat();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|