40 lines
1.5 KiB
HTML
40 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Objects</title>
|
|
<style>
|
|
body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.9rem; }
|
|
.card {
|
|
border: 2px solid #4f46e5;
|
|
border-radius: 6px;
|
|
padding: 12px 14px;
|
|
background: #eef2ff;
|
|
margin: 10px 0;
|
|
}
|
|
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
|
|
.k { color: #7c2d12; font-weight: 700; }
|
|
.v { color: #14532d; }
|
|
.row { padding: 4px 0; display: flex; gap: 8px; }
|
|
.prompt { color: #9ca3af; }
|
|
.out { color: #6b7280; font-style: italic; }
|
|
.str { color: #15803d; }
|
|
.num { color: #1e40af; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="row"><span class="prompt">></span><span>const user = { name: <span class="str">"Max"</span>, alter: <span class="num">25</span> };</span></div>
|
|
<div class="card">
|
|
<div class="kv">
|
|
<div class="k">name:</div><div class="v str">"Max"</div>
|
|
<div class="k">alter:</div><div class="v num">25</div>
|
|
<div class="k">studiert:</div><div class="v str">"DMW"</div>
|
|
</div>
|
|
</div>
|
|
<div class="row"><span class="prompt">></span><span>user.name;</span></div>
|
|
<div class="row"><span class="prompt">←</span><span class="out str">"Max"</span></div>
|
|
<div class="row"><span class="prompt">></span><span>user[<span class="str">"alter"</span>];</span></div>
|
|
<div class="row"><span class="prompt">←</span><span class="out num">25</span></div>
|
|
</body>
|
|
</html>
|