# INTA – 3. cvičení
Dnes vytvoříme následující "jednostránkovou aplikaci" pomocí [Mithril.js](https://mithril.js.org/):
## Jak začít
Aplikaci můžete začít tvořit z [těchto souborů na GitLabu](https://gitlab.fjfi.cvut.cz/18inta-2024/inta/-/tree/main/cv03/zadani?ref_type=heads).
Využijte obrázky stažené programem z [1. cvičení](https://jlk.fjfi.cvut.cz/md/NdsuReVERLi3Dht1MIgMFw).
### data.json
Skript pro vygenerování souboru se seznamem obrázků:
```python
from pathlib import Path
import json
directory = Path("images")
imgs = directory.iterdir()
data = json.dumps([str(i) for i in imgs])
with open("data.json", "w") as f:
print(f"data = {data}", file=f)
```
### gallery.js
Základní struktura aplikace může vypadat takto:
```js
var root = document.body;
var data = [];
// komponenta pro zobrazení přehledu všech obrázků
var Gallery = {
view: function() {
console.log("Gallery.view");
return m(/* ... */)
}
}
// komponenta pro zobrazení jednoho obrázku
var Image = {
view: function() {
return m(/* ... */)
}
}
m.route(root, "/gallery", {
"/gallery": Gallery,
"/image": Image,
})
// obnovení UI po kompletním načtení dat
window.onload = (event) => {
console.log("window.onload");
m.redraw();
};
```
V obou komponentách je potřeba doplnit vhodnou strukturu elementů. Abyste využili styly v připojeném CSS, snažte se přiblížit této struktuře:
1. `Gallery`:
2. `Image`:
