# Naloga 1
Izdelali boste spletno stran, ki iz strežnika naloži seznam uporabnikov in jih prikaže v tabeli.
Če se vam vmes kdaj zatakne, je vsa koda na voljo na tem repozitoriju.
## Navodila za izdelavo
### Osnovna postavitev
- Ustvarimo datoteke `index.html`, `style.css` in `script.js`.
- Generiramo osnovno postavitev spletne strani (v VS Code pritisnemo `!` in `Enter`).
```html
Naloga 1
```
- V datoteko `index.html` povežemo `style.css` tako, v `` dodamo vrstico
```html
```
- Nato na enak način povežemo še `script.js`:
```html
```
### HTML
- V `` spletne strani dodamo naslov `
` in tabelo (`
`) z idjem `id="users"`.
- Nato v tabelo dodamo še znački za glavo (``) in telo (``) tabele.
- Podatki, ki jih bomo prikazovali o uporabnikih so `id`, `ime`, `uporabniško ime` in `email`, zato v glavo tabele dodamo `
` za vsakega od njih.
- Zaženite `Live Server` ali pa odprite `index.html` v brskalniku in spletna stran bi morala izgledati tako:
### JavaScript
V `script.js` bomo napisali kodo, ki bo iz strežnika naložila seznam uporabnikov in jih dodala v html tabelo.
- Ustvarimo novo asinhrono funkcijo `getUsers()`:
```js
async function getUsers() {}
```
#### Nalaganje podatkov s strežnika
- Za nalaganje podatkov s strežnika uporablajmo vgrajeno funkcijo `fetch()`.
- Beseda `await` počaka na odgovor s strežnika, medtem ko ostala koda na spletni strani še vedno teče.
- Naložimo podatke s strežnika in odgovor shranimo v konstanto `response`:
```js
const response = await fetch('https://jsonplaceholder.typicode.com/users');
```
- Odgovor dobimo v obliki JSONa (JavaScript Object Notation):
- Kvadratni oklepaji `[ ]` predstavljajo **seznam**
- Zaviti oklepaji `{ }` predstavljajo **objekt**
```json
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz"
},
{
"id": 2,
"name": "Ervin Howell",
"username": "Antonette",
"email": "Shanna@melissa.tv"
},
{
"id": 3,
"name": "Clementine Bauch",
"username": "Samantha",
"email": "Nathan@yesenia.net"
},
...
]
```
- Pretvorimo JSON v JavaScript objekt s klicom funkcije `json()` in ga shranimo v konstanto `users`:
```js
const users = await response.json();
```
- `users` sedaj izgleda tako:
```js
const users = [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: 'Sincere@april.biz',
},
{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: 'Shanna@melissa.tv',
},
{
id: 3,
name: 'Clementine Bauch',
username: 'Samantha',
email: 'Nathan@yesenia.net',
},
...
];
```
- Vsebino spremenljivke lahko izpišete v konzolo z funkcijo
```js
console.log(users);
```
- Do konzole dostopate: `Desni klik` > `inspect` > `console`
#### Vstavljanje podatkov v tabelo
Sedaj ko imamo želene podatke v spremenljivki `users`, jih moramo vstaviti v tabelo.
- Z zanko `for` zaženemo kodo za vsakega uporabnika
- Spremenljivka `user` se vsak krog spremeni na naslednjega v seznamu `users`
```js
for (const user of users) {
// Vso nadalnjo kodo pišite sem notri
}
```
- Da ustvarimo novo vrstico v tabeli uporabimo funkcijo
```js
const row = document.createElement('tr');
```
- Enaka stvar v html-ju:
```html
```
- Nato dodamo vsebino z `innerHTML`
- Da lahko besedilo napišemo v več vrstic, namesto navadnih narekovajev uporabimo backticke `` ` `` (AltGr + 7).
- Poleg tega lahko spremenljivke vstavljamo direktno v besedilo z `${spremenljivka}`.
```js
row.innerHTML = `
${user.id}
${user.name}
${user.username}
${user.email}
`;
```
- Enaka stvar v html-ju:
```html
(vrednost user.id)
(vrednost user.name)
(vrednost user.username)
(vrednost user.email)
```
- Poiščemo telo tabele z idjem `users` (to kodo dodamo čisto na vrhu `script.js`):
```js
const table = document.querySelector('table#users > tbody');
```
- Na koncu dodamo vrstico v `tbody`:
```js
table.appendChild(row);
```
- Spletna stran bi sedaj morala izgledati tako:
### CSS
- Pojdite na spletno stran [fonts.google.com](https://fonts.google.com) in si izberite pisavo.
- Kliknite nanjo in potem kliknite na `Select Regular 400`
- Kopirajte vrstico, ki se začne z `@import url('...');` in jo prilepite na vrh `style.css`.
- Nato dodajte vrstico, ki se začne s `font-family: ...;` v značko `body`
```css
@import url('...');
body {
font-family: ...;
}
```
- Bodyju nastavite `margin` na `0` in višino na `100vh` (100% višina zaslona)
- Sledi najtežja stvar v css-su - centriranje elementov na spletni strani
- Eden on načinov, kako lahko to dosežemo je s pomočjo flexboxa (še vedno v znački body)
```css
body {
...
display: flex; // Nastavimo prikaz na flex
flex-direction: column; // Elementi naj bojo v stolpcu - en nad drugim
align-items: center; // Elemente centriramo levo-desno
justify-content: center; // Elemente centriramo gor-dol
}
```
- Celicam tabele dodamo obrobe (td - celice v telesu, th - celice v glavi) in `6px` prostora v vsebini celic
```css
#users td,
th {
border: 1px solid black;
padding: 6px;
}
```
- Nazadnje še centriramo id-je uporabnikov v prvem stolpcu in jih naredimo krepke
```css
#users td:first-child {
text-align: center;
font-weight: bold;
}
```
- Če spletna stran izgleda podobna tej na sliki, potem vam je uspelo
