API server...
... běží na adrese https://alej.alisma.cz/api/ včetně nápovědy.
Výchozí soubory
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Moje aplikace</title>
<script type="text/javascript" language="javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="cr.js"></script>
<link rel="stylesheet" type="text/css" href="cr.css" />
</head>
<body>
<div class="container">
<header>
<h1>Moje aplikace</h1>
</header>
<article>
<div id="main">
<ul id="seznam-kraju">
</ul>
<div id="uvod">
<h2>Úvodní stránka</h2>
<p>Text na úvodní stránce</p>
</div>
<div id="kraj" class="hide">
<h2></h2>
<dl>
<dt>Rozloha</dt>
<dd id="kraj-rozloha"><span></span> km<sup>2</sup></dd>
<dt>Počet obyvatel</dt>
<dd id="kraj-obyvatel"><span></span></dd>
<dt>Seznam měst</dt>
<dd id="kraj-mesta"><ul></ul></dd>
</dl>
<div class="hide">
<h3>Seznam měst</h3>
<table id="kraj-mesta-tab">
<thead>
<tr><th>Název</th><th>Počet obyvatel</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<pre id="ladeni">
</pre>
</div>
</article>
<footer>
<address>
Patička.
</address>
</footer>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
color: black;
background-color: #ffefaa;
font-family: sans-serif;
}
h1, h2, h3, h4, h5, h6 {
margin: 1.5em 0 0.5em -1em;
font-weight: bold;
line-height: 1.2;
}
h1 {
font-size: 200%;
}
h1.top {
margin-top: 0;
}
h2 {
font-size: 175%;
}
h3 {
font-size: 140%;
}
h4 {
font-size: 120%;
}
p {
margin: 0 0 0.5em 0;
line-height: 1.5;
}
a {
color: #3a1355;
text-decoration: none;
border-bottom: 1px dashed #1b7f1b;
}
a:visited {
color: #3a1355;
}
a:focus {
color: black;
border-bottom-color: black;
}
a:hover {
color: #3a1355;
border-bottom-style: solid;
}
.container {
max-width: 50em;
margin: 0 auto;
}
article {
background-color: #fff;
}
header {
color: #fff;
background: #3a1355;
background-repeat: repeat;
padding: 1.8em 3em;
margin-top: 2em;
border-radius: 1em 1em 0 0;
}
header h1 {
margin: 0;
}
header a:link, header a:visited, header a:hover, header a:active {
color: white;
text-decoration: none;
}
footer {
background: #3a1355;
padding: 2em 3em;
color: white;
border-radius: 0 0 1em 1em;
margin-bottom: 2em;
}
article {
padding: 2em 3em;
}
footer a:link, footer a:visited {
color: white;
text-decoration: none;
}
footer a:hover, footer a:active {
color: white;
text-decoration: underline;
}
table {
padding: 0;
margin: 1em;
border-collapse: collapse;
border: 0 solid black;
border-width: 2px 0 2px 0;
}
table th {
border-bottom: 1px solid;
padding: 1ex;
text-align: center;
}
table td {
padding: 0.5ex 1ex;
}
table .number {
text-align: right;
}
table tbody tr:nth-child(odd) {
background-color: #DDD;
}
table tbody tr:nth-child(even) {
background-color: #EEE;
}
.hide {
display: none;
}
JavaScript
function ladeni(x) {
$("#ladeni").text(JSON.stringify(x));
}
function pri_nacteni_kraju(kraje) {
ladeni(kraje);
for (var i in kraje) {
$("<li>" + kraje[i].jmeno + "</li>").click(kraje[i].id, function(data) {
ladeni(kraje[i]);
}).appendTo("#seznam-kraju");
}
}
$(document).ready(function() {
$.ajax({
url: "https://alej.alisma.cz/api/cr/kraje",
}).done(pri_nacteni_kraju);
});
Pokračování příště.
