Tahák 📌

<h1>My website</h1>

Najväčší nadpis. Na stránke len raz – ako názov knihy.

<h2>Chapter</h2>

Menší nadpis. Existujú až po <h6> (najmenší).

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

Odstavec obyčajného textu.

<strong>important</strong>

Zvýrazní text tučne.

<em>interesting</em>

Text kurzívou (naklonený).

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

Odkaz. Do href patrí adresa, kam má viesť.

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

Obrázok. src = súbor s obrázkom, alt = popis, keby sa nenačítal.

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

Zoznam s bodkami. Každá položka je <li>.

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

Číslovaný zoznam – čísla doplní prehliadač sám.

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

Krabica na zoskupenie vecí, ktoré patria k sebe. Názov v class si vymýšľaš sám(a).

<!-- note to myself -->

Komentár. Prehliadač ho ignoruje – je len pre teba.

h1 {
  color: red;
}

Všetky nadpisy <h1> budú červené.

.card {
  background: yellow;
}

Všetko, čo má class="card", dostane žlté pozadie. Bodka = hľadám podľa class.

p {
  font-size: 20px;
}

Veľkosť písma odstavcov. Väčšie číslo = väčšie písmo.

body {
  font-family: Arial;
}

Písmo pre celú stránku.

.card {
  padding: 16px;
}

Vnútorný okraj – výplň medzi obsahom a okrajom krabice.

.card {
  margin: 16px;
}

Vonkajší okraj – odstup od ostatných vecí okolo.

.card {
  border: 2px solid black;
}

Rámček: hrúbka, typ čiary a farba.

.card {
  border-radius: 12px;
}

Zaoblené rohy. Čím väčšie číslo, tým okrúglejšie.

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

Veci vnútri sa zoradia vedľa seba s medzerou 10px. Kúzlo na menu!

img {
  width: 200px;
}

Šírka obrázka. Výšku si dopočíta sama, aby nebol rozpláchnutý.

const name = 'Kate';

Premenná – krabička s menom, do ktorej si niečo uložíš.

let points = 0;
points = points + 1;

let je krabička, ktorú môžeš meniť. Tu pripočítavame bod.

alert('Hi!');

Vyskočí okienko so správou. Dobré na prvé pokusy.

console.log('it works');

Vypíše správu do konzoly (F12) – tajné okno pre programátorov.

document.querySelector('h1')

Nájde na stránke prvý <h1>, aby si s ním mohol(a) pracovať.

element.textContent = 'New text';

Vymení text vnútri nájdeného prvku.

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

Keď niekto na prvok klikne, stane sa to, čo je vnútri.

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

Podmienka: kód vnútri sa spustí, len keď platí to v zátvorke.

element.classList.toggle("dark");

Pridá class, keď tam nie je – a odoberie, keď tam je. Presne takto funguje tmavý režim.

const r = await fetch(address);

Pošli požiadavku na API a počkaj (await) na odpoveď.

const data = await r.json();

Preveď odpoveď na objekt, s ktorým vieš pracovať.

data.current_weather.temperature

Z objektu vytiahneš hodnotu bodkami – ako pri obyčajnom objekte.

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

POST = pošli dáta NA server. Do body patrí objekt prevedený na text.

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

JSON – spoločný jazyk API. Texty v úvodzovkách, čísla bez nich.

JSON.stringify(obj)

Preveď objekt na JSON text (pred odoslaním).

JSON.parse(text)

Preveď JSON text späť na objekt (po prijatí).

process.env.AI_KEY

Na serveri: prečítaj tajný kľúč zo súboru .env. Kľúče nikdy nepatria do prehliadača!

cd my-website

Prejdi do priečinka my-website (cd = change directory, zmeň priečinok).

ls

Vypíš, čo je v aktuálnom priečinku (vo Windows: dir).

node server.js

Spusti súbor server.js pomocou Node.js.

npm install

Stiahni všetky balíčky, ktoré projekt potrebuje.

git status

Ukáž, čo sa v projekte zmenilo od posledného uloženia.

git add .

Priprav všetky zmeny na uloženie (bodka = všetko).

git commit -m "Added a menu"

Ulož zmeny do histórie so správou, čo si urobil(a).

git push

Odošli uložené zmeny na GitHub.