61 lines
1.6 KiB
HTML
61 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Fetch</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; padding: 1.5rem; }
|
|
.url {
|
|
font-family: ui-monospace, monospace;
|
|
background: #f3f4f6;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
color: #4a4a6a;
|
|
margin-bottom: 1rem;
|
|
display: inline-block;
|
|
}
|
|
.arrow {
|
|
margin: 0.6rem 0;
|
|
color: #d63384;
|
|
font-style: italic;
|
|
font-size: 0.85rem;
|
|
}
|
|
.json {
|
|
background: #0f0f23;
|
|
color: #d63384;
|
|
padding: 14px;
|
|
border-radius: 6px;
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 0.82rem;
|
|
line-height: 1.5;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.json .k { color: #86efac; }
|
|
.json .s { color: #fde68a; }
|
|
.json .n { color: #93c5fd; }
|
|
.rendered {
|
|
border: 1px solid #e5e7eb;
|
|
border-radius: 6px;
|
|
padding: 14px;
|
|
background: #f9fafb;
|
|
}
|
|
.rendered h3 { margin: 0 0 6px; }
|
|
.rendered p { margin: 3px 0; color: #4a4a6a; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="url">GET https://api.example.com/user/1</div>
|
|
<div class="json">{<br>
|
|
<span class="k">"id"</span>: <span class="n">1</span>,<br>
|
|
<span class="k">"name"</span>: <span class="s">"Max"</span>,<br>
|
|
<span class="k">"email"</span>: <span class="s">"max@hdm.de"</span><br>
|
|
}</div>
|
|
<div class="arrow">↓ await response.json() → ins DOM rendern</div>
|
|
<div class="rendered">
|
|
<h3>Max</h3>
|
|
<p>max@hdm.de</p>
|
|
</div>
|
|
</body>
|
|
</html>
|