Šalabahter 📌

<h1>My website</h1>

Najveći naslov. Samo jednom po stranici – kao naslov knjige.

<h2>Chapter</h2>

Manji naslov. Idu sve do <h6> (najmanji).

<p>Hi, this is text.</p>

Odlomak običnog teksta.

<strong>important</strong>

Podebljava tekst.

<em>interesting</em>

Tekst kurzivom (nagnut).

<a href="https://example.com">Click</a>

Poveznica. U href je adresa kamo treba voditi.

<img src="dog.jpg" alt="My dog">

Slika. src = datoteka sa slikom, alt = opis ako se ne učita.

<ul>
  <li>first</li>
  <li>second</li>
</ul>

Popis s točkicama. Svaka stavka je <li>.

<ol>
  <li>step 1</li>
  <li>step 2</li>
</ol>

Numerirani popis – brojeve dodaje sam preglednik.

<div class="card">...</div>

Kutija za grupiranje stvari koje pripadaju zajedno. Ime klase izmišljaš sam(a).

<!-- note to myself -->

Komentar. Preglednik ga ignorira – samo je za tebe.

h1 {
  color: red;
}

Svi naslovi <h1> bit će crveni.

.card {
  background: yellow;
}

Sve s class="card" dobiva žutu pozadinu. Točka = tražim po klasi.

p {
  font-size: 20px;
}

Veličina fonta odlomaka. Veći broj = veći tekst.

body {
  font-family: Arial;
}

Font za cijelu stranicu.

.card {
  padding: 16px;
}

Unutarnji razmak – ispuna između sadržaja i ruba kutije.

.card {
  margin: 16px;
}

Vanjski razmak – udaljenost od stvari oko nje.

.card {
  border: 2px solid black;
}

Rub: debljina, stil crte i boja.

.card {
  border-radius: 12px;
}

Zaobljeni kutovi. Veći broj = zaobljenije.

.menu {
  display: flex;
  gap: 10px;
}

Stvari unutra poredaju se jedna uz drugu s razmakom od 10px. Čarolija za izbornike!

img {
  width: 200px;
}

Širina slike. Visinu sama izračuna da ne bude spljoštena.

const name = 'Kate';

Varijabla – označena kutija u koju nešto spremiš.

let points = 0;
points = points + 1;

let je kutija koju možeš mijenjati. Ovdje dodajemo bod.

alert('Hi!');

Pojavi okvir s porukom. Dobro za prve pokuse.

console.log('it works');

Ispiše poruku u konzolu (F12) – tajni prozor za programere.

document.querySelector('h1')

Pronađe prvi <h1> na stranici da možeš s njim raditi.

element.textContent = 'New text';

Zamijeni tekst unutar pronađenog elementa.

element.addEventListener('click', () => {
  alert('Clicked!');
});

Kad netko klikne element, pokrene se ono što je unutra.

if (points > 10) {
  alert('You won!');
}

Uvjet: kod unutra radi samo ako je u zagradi istinito.

element.classList.toggle("dark");

Doda klasu ako je nema – i ukloni je ako je ima. Tako radi tamni način.

const r = await fetch(address);

Pošalji zahtjev API-ju i pričekaj (await) odgovor.

const data = await r.json();

Pretvori odgovor u objekt s kojim možeš raditi.

data.current_weather.temperature

Iz objekta izvadiš vrijednost točkicama – kao i kod bilo kojeg objekta.

await fetch('/ask', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ question }),
});

POST = pošalji podatke NA poslužitelj. U body je objekt pretvoren u tekst.

{ "city": "Prague", "temperature": 21 }

JSON – zajednički jezik API-ja. Tekst u navodnicima, brojevi bez.

JSON.stringify(obj)

Pretvori objekt u JSON tekst (prije slanja).

JSON.parse(text)

Pretvori JSON tekst natrag u objekt (nakon primitka).

process.env.AI_KEY

Na poslužitelju: pročitaj tajni ključ iz .env datoteke. Ključevi nikad ne pripadaju pregledniku!

cd my-website

Uđi u mapu my-website (cd = change directory, promijeni mapu).

ls

Ispiši što je u trenutnoj mapi (u Windowsu: dir).

node server.js

Pokreni datoteku server.js pomoću Node.js.

npm install

Preuzmi sve pakete koje projekt treba.

git status

Pokaži što se promijenilo u projektu od zadnjeg spremanja.

git add .

Pripremi sve promjene za spremanje (točka = sve).

git commit -m "Added a menu"

Spremi promjene u povijest s bilješkom što si napravio(a).

git push

Pošalji spremljene promjene na GitHub.