Fusklapp 📌

<h1>My website</h1>

Den största rubriken. Bara en gång per sida – som en boks titel.

<h2>Chapter</h2>

En mindre rubrik. De går hela vägen till <h6> (den minsta).

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

Ett stycke med vanlig text.

<strong>important</strong>

Gör texten fet.

<em>interesting</em>

Kursiv (lutande) text.

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

En länk. href innehåller adressen den ska leda till.

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

En bild. src = bildfilen, alt = en beskrivning om den inte laddas.

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

En punktlista. Varje punkt är ett <li>.

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

En numrerad lista – webbläsaren sätter siffrorna själv.

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

En låda för att gruppera saker som hör ihop. Klassnamnet hittar du på själv.

<!-- note to myself -->

En kommentar. Webbläsaren ignorerar den – den är bara för dig.

h1 {
  color: red;
}

Alla <h1>-rubriker blir röda.

.card {
  background: yellow;
}

Allt med class="card" får en gul bakgrund. En punkt betyder „leta efter den här klassen“.

p {
  font-size: 20px;
}

Textstorleken på stycken. Större tal = större text.

body {
  font-family: Arial;
}

Typsnittet för hela sidan.

.card {
  padding: 16px;
}

Inre avstånd – utfyllnad mellan innehållet och lådans kant.

.card {
  margin: 16px;
}

Yttre avstånd – avstånd till sakerna runt omkring.

.card {
  border: 2px solid black;
}

En kant: tjocklek, linjestil och färg.

.card {
  border-radius: 12px;
}

Rundade hörn. Större tal = rundare.

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

Sakerna inuti står bredvid varandra med 10px mellanrum. Det magiska knepet för menyer!

img {
  width: 200px;
}

Bildens bredd. Höjden anpassar sig själv så den inte blir tillplattad.

const name = 'Kate';

En variabel – en märkt låda du sparar något i.

let points = 0;
points = points + 1;

let är en låda du kan ändra. Här lägger vi till en poäng.

alert('Hi!');

Visar en meddelanderuta. Bra för dina första experiment.

console.log('it works');

Skriver ut ett meddelande till konsolen (F12) – ett hemligt fönster för programmerare.

document.querySelector('h1')

Hittar den första <h1> på sidan så du kan jobba med den.

element.textContent = 'New text';

Byter ut texten inuti elementet du hittade.

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

När någon klickar på elementet körs det som står inuti.

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

Ett villkor: koden inuti körs bara om det i parentesen är sant.

element.classList.toggle("dark");

Lägger till en klass om den saknas – och tar bort den om den finns. Så funkar mörkt läge.

const r = await fetch(address);

Skicka en förfrågan till ett API och vänta (await) på svaret.

const data = await r.json();

Gör om svaret till ett objekt du kan jobba med.

data.current_weather.temperature

Hämta ett värde ur objektet med punkter – precis som med vilket annat objekt som helst.

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

POST = skicka data TILL servern. body innehåller objektet som text.

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

JSON – det gemensamma språket för API:er. Text i citattecken, siffror utan.

JSON.stringify(obj)

Gör om ett objekt till JSON-text (innan du skickar det).

JSON.parse(text)

Gör om JSON-text tillbaka till ett objekt (efter att du fått det).

process.env.AI_KEY

På servern: läs en hemlig nyckel från .env-filen. Nycklar hör aldrig hemma i webbläsaren!

cd my-website

Gå in i mappen my-website (cd = change directory, byt mapp).

ls

Visa vad som finns i den aktuella mappen (på Windows: dir).

node server.js

Kör filen server.js med Node.js.

npm install

Ladda ner alla paket som projektet behöver.

git status

Visa vad som ändrats i projektet sedan senaste sparningen.

git add .

Förbered alla ändringar för att sparas (punkten betyder „allt“).

git commit -m "Added a menu"

Spara ändringarna i historiken med en notis om vad du gjorde.

git push

Skicka de sparade ändringarna till GitHub.