<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>API Playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial;
max-width: 800px;
margin: 40px auto;
}
select, input, button {
width: 100%;
padding: 10px;
margin: 5px 0;
}
pre {
background: #111;
color: #0f0;
padding: 15px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>🔥 API Playground</h1>
<select id="api">
<option value="joke">JokeAPI</option>
<option value="cat">Cat Fact</option>
<option value="country">Country</option>
<option value="dad">Dad Joke</option>
</select>
<input id="input" placeholder="(opsiyonel: IP gir)">
<button onclick="run()">Çalıştır</button>
<pre id="out">Hazır...</pre>
<script>
async function run(){
const api = document.getElementById("api").value;
const val = document.getElementById("input").value;
const out = document.getElementById("out");
out.textContent = "Loading...";
try{
// JokeAPI
if(api==="joke"){
const r = await fetch("https://v2.jokeapi.dev/joke/Any?safe-mode");
const j = await r.json();
out.textContent = j.joke || (j.setup + "\n" + j.delivery);
}
// Cat Fact
else if(api==="cat"){
const r = await fetch("https://catfact.ninja/fact");
const j = await r.json();
out.textContent = j.fact;
}
// Country
else if(api==="country"){
const url = val ? "https://country.is/"+val : "https://country.is/";
const r = await fetch(url);
const j = await r.json();
out.textContent = JSON.stringify(j, null, 2);
}
// Dad Joke
else if(api==="dad"){
const r = await fetch("https://icanhazdadjoke.com/", {
headers: { Accept: "application/json" }
});
const j = await r.json();
out.textContent = j.joke;
}
} catch(e){
out.textContent = "HATA:\n" + e;
}
}
</script>
</body>
</html>