Jukseark 📌

<h1>My website</h1>

Den største overskriften. Bare én gang per side – som tittelen på en bok.

<h2>Chapter</h2>

En mindre overskrift. De går helt ned til <h6> (den minste).

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

Et avsnitt med vanlig tekst.

<strong>important</strong>

Gjør teksten fet.

<em>interesting</em>

Kursiv (skrå) tekst.

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

En lenke. href inneholder adressen den skal føre til.

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

Et bilde. src = bildefilen, alt = en beskrivelse hvis det ikke lastes.

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

En liste med prikker. Hvert punkt er et <li>.

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

En nummerert liste – nettleseren setter inn tallene selv.

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

En boks for å gruppere ting som hører sammen. Klassenavnet finner du på selv.

<!-- note to myself -->

En kommentar. Nettleseren ignorerer den – den er bare for deg.

h1 {
  color: red;
}

Alle <h1>-overskrifter blir røde.

.card {
  background: yellow;
}

Alt med class="card" får en gul bakgrunn. En prikk betyr „finn denne klassen“.

p {
  font-size: 20px;
}

Skriftstørrelsen på avsnitt. Større tall = større tekst.

body {
  font-family: Arial;
}

Skrifttypen for hele siden.

.card {
  padding: 16px;
}

Innvendig avstand – polstring mellom innholdet og kanten på boksen.

.card {
  margin: 16px;
}

Utvendig avstand – avstand til tingene rundt.

.card {
  border: 2px solid black;
}

En kant: tykkelse, linjestil og farge.

.card {
  border-radius: 12px;
}

Avrundede hjørner. Større tall = mer rundt.

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

Tingene inni står ved siden av hverandre med 10px mellomrom. Trikset for menyer!

img {
  width: 200px;
}

Bildets bredde. Høyden tilpasser seg selv så det ikke blir flatklemt.

const name = 'Kate';

En variabel – en merket boks du lagrer noe i.

let points = 0;
points = points + 1;

let er en boks du kan endre. Her legger vi til et poeng.

alert('Hi!');

Viser en meldingsboks. Bra for dine første eksperimenter.

console.log('it works');

Skriver ut en melding til konsollen (F12) – et hemmelig vindu for programmerere.

document.querySelector('h1')

Finner den første <h1> på siden, så du kan jobbe med den.

element.textContent = 'New text';

Bytter ut teksten inne i elementet du fant.

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

Når noen klikker på elementet, kjøres det som står inni.

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

En betingelse: koden inni kjører bare hvis det i parentesen er sant.

element.classList.toggle("dark");

Legger til en klasse hvis den mangler – og fjerner den hvis den er der. Slik fungerer mørk modus.

const r = await fetch(address);

Send en forespørsel til et API og vent (await) på svaret.

const data = await r.json();

Gjør svaret om til et objekt du kan jobbe med.

data.current_weather.temperature

Hent en verdi ut av objektet med punktum – akkurat som med ethvert annet objekt.

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

POST = send data TIL serveren. body inneholder objektet som tekst.

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

JSON – det felles språket for API-er. Tekst i anførselstegn, tall uten.

JSON.stringify(obj)

Gjør et objekt om til JSON-tekst (før du sender det).

JSON.parse(text)

Gjør JSON-tekst om til et objekt igjen (etter at du har mottatt det).

process.env.AI_KEY

På serveren: les en hemmelig nøkkel fra .env-filen. Nøkler hører aldri hjemme i nettleseren!

cd my-website

Gå inn i mappen my-website (cd = change directory, bytt mappe).

ls

Vis hva som er i den nåværende mappen (på Windows: dir).

node server.js

Kjør filen server.js med Node.js.

npm install

Last ned alle pakkene prosjektet trenger.

git status

Vis hva som har endret seg i prosjektet siden sist du lagret.

git add .

Gjør alle endringene klare for lagring (punktet betyr „alt“).

git commit -m "Added a menu"

Lagre endringene i historien med en melding om hva du gjorde.

git push

Send de lagrede endringene til GitHub.