javascript-tutorial · ockley · Jun 11, 2026 · Jun 11, 2026
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md
@@ -1,8 +1,8 @@
-# Outer corners
+# Ydre hjørner

-Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).
+Ydre hjørner er det, vi får fra [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect).

-Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`:
+Koordinaterne for det øverste venstre hjørne `answer1` og det nederste højre hjørne `answer2`:

 ```js
 let coords = elem.getBoundingClientRect();
@@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top];
 let answer2 = [coords.right, coords.bottom];
 ```

-# Left-upper inner corner
+# Indre øverste venstre hjørne

-That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`:
+Det adskiller sig fra det ydre hjørne ved bredden af kanten. En pålidelig måde at få afstanden er `clientLeft/clientTop`:

 ```js
 let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop];
 ```

-# Right-bottom inner corner
+# Nederste højre indre hjørne

-In our case we need to substract the border size from the outer coordinates.
+I dette tilfælde skal vi trække bredden af kanten fra de ydre koordinater.

-We could use CSS way:
+Vi kunne bruge CSS-måden:

 ```js
 let answer4 = [
@@ -32,7 +32,7 @@ let answer4 = [
 ];
 ```

-An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better:
+En alternativ måde ville være at tilføje `clientWidth/clientHeight` til koordinaterne for det øverste venstre hjørne.

 ```js
 let answer4 = [

diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html
@@ -5,23 +5,26 @@
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <script>
-    document.onclick = function(e) { // shows click coordinates
+    document.onclick = function (e) { // shows click coordinates
      coords.innerHTML = e.clientX + ':' + e.clientY;
    };
  </script>
 </head>

 <body>

-  Click anywhere to get window coordinates.
-  <br> That's for testing, to check the result you get by JavaScript.
+  Klik hvor som helst for at få vindueskoordinaterne.
+  <br> Det er til test, for at tjekke det resultat du får fra JavaScript.
  <br>
-  <div id="coords">(click coordinates show up here)</div>
+  <div id="coords">(koordinaterne for museklikket vises her)</div>


  <div id="field">
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  </div>


@@ -56,4 +59,5 @@
  </script>

 </body>
-</html>
+
+</html>
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html
@@ -5,23 +5,26 @@
  <meta charset="utf-8">
  <link rel="stylesheet" href="index.css">
  <script>
-    document.onclick = function(e) { // shows click coordinates
+    document.onclick = function (e) { // shows click coordinates
      coords.innerHTML = e.clientX + ':' + e.clientY;
    };
  </script>
 </head>

 <body>

-  Click anywhere to get window coordinates.
-  <br> That's for testing, to check the result you get by JavaScript.
+  Klik hvor som helst for at få vindueskoordinaterne.
+  <br> Det er til test, for at tjekke det resultat du får fra JavaScript.
  <br>
-  <div id="coords">(click coordinates show up here)</div>
+  <div id="coords">(koordinaterne for museklikket vises her)</div>


  <div id="field">
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
-    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
+    . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  </div>


@@ -36,4 +39,5 @@
  </script>

 </body>
-</html>
+
+</html>
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md
@@ -2,23 +2,23 @@ importance: 5

 ---

-# Find window coordinates of the field
+# Find vindueskoordinaterne for feltet

-In the iframe below you can see a document with the green "field".
+I iframen nedenfor kan du se et dokument med det grønne "felt".

-Use JavaScript to find window coordinates of corners pointed by with arrows.
+Brug JavaScript til at finde vindueskoordinaterne for hjørnerne, der peges på med pilene.

-There's a small feature implemented in the document for convenience. A click at any place shows coordinates there.
+Der er en lille funktion implementeret i dokumentet for nemheds skyld. Et klik ethvert sted viser koordinaterne der.

 [iframe border=1 height=360 src="source" link edit]

-Your code should use DOM to get window coordinates of:
+Din kode skal bruge DOM til at finde vindueskoordinaterne for:

-1. Upper-left, outer corner (that's simple).
-2. Bottom-right, outer corner (simple too).
-3. Upper-left, inner corner (a bit harder).
-4. Bottom-right, inner corner (there are several ways, choose one).
+1. Øverste venstre, ydre hjørne (det er simpelt).
+2. Nederste højre, ydre hjørne (også simpelt).
+3. Øverste venstre, indre hjørne (lidt sværere).
+4. Nederste højre, indre hjørne (der er flere måder, vælg en).

-The coordinates that you calculate should be the same as those returned by the mouse click.
+De koordinater du beregner, skal være de samme som dem, der returneres af museklikket.

-P.S. The code should also work if the element has another size or border, not bound to any fixed values.
+P.S. Koden skal også virke, hvis elementet har en anden størrelse eller kant, der ikke er bundet til nogen faste værdier.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md
@@ -1,4 +1,4 @@
-In this task we only need to accurately calculate the coordinates. See the code for details.
+I denne opgave handler det mest om at udregne koordinaterne korrekt. Se kildekoden for detaljer.

-Please note: the elements must be in the document to read `offsetHeight` and other properties.
-A hidden (`display:none`) or out of the document element has no size.
+Bemærk: elementerne skal være i dokumentet for at kunne læse `offsetHeight` og andre egenskaber.
+Et skjult (`display:none`) eller uden for dokumentet element har ingen størrelse.
diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html
@@ -8,29 +8,33 @@

 <body>

-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt
+    voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident
+    molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>

  <blockquote>
-    Teacher: Why are you late?
-    Student: There was a man who lost a hundred dollar bill.
-    Teacher: That's nice. Were you helping him look for it?
-    Student: No. I was standing on it.
+    Underviser: Hvorfor kommer du for sent?
+    Studerende: Der var en mand der tabte en 100 kr. seddel.
+    Underviser: Det er da betænksomt at du ville hjælpe med at lede efter den?
+    Studerende: Nej, jeg stod på den!
  </blockquote>

-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt
+    voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident
+    molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>


  <script>
    /**
-     * Positions elem relative to anchor as said in position.
+     * Positioner elem relativt til anker-elementet, som angivet i position-parameteren.
     *
-     * @param {Node} anchor     Anchor element for positioning
-     * @param {string} position One of: top/right/bottom
-     * @param {Node} elem       Element to position
+     * @param {Node} anchor     Anker elementet for positioneringen
+     * @param {string} position Positionen, en af: top/right/bottom
+     * @param {Node} elem       Elementet, der skal positioneres
     *
-     * Both elements: elem and anchor must be in the document
+     * Både elem og anchor-elementet skal være en del af dokumentet
     */
    function positionAt(anchor, position, elem) {

@@ -56,9 +60,9 @@
    }

    /**
-     * Shows a note with the given html at the given position
-     * relative to the anchor element.
-     */
+    * Viser en note med den givne html på den givne position
+    * i forhold til anker-elementet.
+    */
    function showNote(anchor, position, html) {

      let note = document.createElement('div');
@@ -69,14 +73,15 @@
      positionAt(anchor, position, note);
    }

-    // test it
+    // test det
    let blockquote = document.querySelector('blockquote');

-    showNote(blockquote, "top", "note above");
-    showNote(blockquote, "right", "note at the right");
-    showNote(blockquote, "bottom", "note below");
+    showNote(blockquote, "top", "note over");
+    showNote(blockquote, "right", "note til højre for");
+    showNote(blockquote, "bottom", "note under");
  </script>


 </body>
-</html>
+
+</html>
diff --git a/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/source.view/index.html
@@ -8,37 +8,41 @@

 <body>

-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt
+    voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident
+    molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>

  <blockquote>
-    Teacher: Why are you late?
-    Student: There was a man who lost a hundred dollar bill.
-    Teacher: That's nice. Were you helping him look for it?
-    Student: No. I was standing on it.
+    Underviser: Hvorfor kommer du for sent?
+    Studerende: Der var en mand der tabte en 100 kr. seddel.
+    Underviser: Det er da betænksomt at du ville hjælpe med at lede efter den?
+    Studerende: Nej, jeg stod på den!
  </blockquote>

-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident molestias sit tempore omnis recusandae
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit sint atque dolorum fuga ad incidunt
+    voluptatum error fugiat animi amet! Odio temporibus nulla id unde quaerat dignissimos enim nisi rem provident
+    molestias sit tempore omnis recusandae
    esse sequi officia sapiente.</p>


  <script>
    /**
-     * Positions elem relative to anchor as said in position.
+     * Positioner elem relativt til anker-elementet, som angivet i position-parameteren.
     *
-     * @param {Node} anchor     Anchor element for positioning
-     * @param {string} position One of: top/right/bottom
-     * @param {Node} elem       Element to position
+     * @param {Node} anchor     Anker elementet for positioneringen
+     * @param {string} position Positionen, en af: top/right/bottom
+     * @param {Node} elem       Elementet, der skal positioneres
     *
-     * Both elements: elem and anchor must be in the document
+     * Både elem og anchor-elementet skal være en del af dokumentet
     */
    function positionAt(anchor, position, elem) {
-      // ... your code ...
+      // ... din kode ...
    }

    /**
-     * Shows a note with the given html at the given position
-     * relative to the anchor element.
+     * Viser en note med den givne html på den givne position
+     * i forhold til anker-elementet.
     */
    function showNote(anchor, position, html) {

@@ -50,14 +54,15 @@
      positionAt(anchor, position, note);
    }

-    // test it
+    // test det
    let blockquote = document.querySelector('blockquote');

-    showNote(blockquote, "top", "note above");
-    showNote(blockquote, "right", "note at the right");
-    showNote(blockquote, "bottom", "note below");
+    showNote(blockquote, "top", "note over");
+    showNote(blockquote, "right", "note til højre for");
+    showNote(blockquote, "bottom", "note under");
  </script>


 </body>
-</html>
+
+</html>
diff --git a/2-ui/1-document/11-coordinates/2-position-at/task.md b/2-ui/1-document/11-coordinates/2-position-at/task.md
@@ -2,17 +2,17 @@ importance: 5

 ---

-# Show a note near the element
+# Vis en note ved siden af elementet

-Create a function `positionAt(anchor, position, elem)` that positions `elem`, depending on `position` near `anchor` element.
+Lav en funktion `positionAt(anchor, position, elem)`, som placerer `elem`, afhængig af `position`, i nærheden af `anchor` elementet.

-The `position` must be a string with any one of 3 values:
- `"top"` - position `elem` right above `anchor`
- `"right"` - position `elem` immediately at the right of `anchor`
- `"bottom"` - position `elem` right below `anchor`
+`position` skal være en streng med en af 3 værdier:
+- `"top"` - position `elem` lige over `anchor`
+- `"right"` - position `elem` lige ved siden af `anchor` til højre
+- `"bottom"` - position `elem` lige under `anchor`

-It's used inside function `showNote(anchor, position, html)`, provided in the task source code, that creates a "note" element with given `html` and shows it at the given `position` near the `anchor`.
+Det bruges inde i funktionen `showNote(anchor, position, html)`, som leveres i opgavens kildekode, som opretter en "note"-element med den givne `html` og viser den på den givne `position` nær `anchor`.

-Here's the demo of notes:
+Her er en demonstration af notes:

 [iframe src="solution" height="350" border="1" link]
diff --git a/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md b/2-ui/1-document/11-coordinates/3-position-at-absolute/solution.md
@@ -1,4 +1,4 @@
-The solution is actually pretty simple:
+Løsningen er egentlig ret simpel:

- Use `position:absolute` in CSS instead of `position:fixed` for `.note`.
- Use the function [getCoords()](info:coordinates#getCoords) from the chapter <info:coordinates> to get document-relative coordinates.
+- Brug `position:absolute` i CSS i stedet for `position:fixed` for `.note`.
+- Brug funktionen [getCoords()](info:coordinates#getCoords) fra kapitel <info:coordinates> til at få dokument-relative koordinater.