Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Introduction to browser events #300

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ockley merged 1 commit into from
Jul 2, 2026
Merged

Introduction to browser events #300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions 32 2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>

<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="hider" value="Klik for at skjule teksten" />

<body>
<div id="text">Tekst</div>

<input type="button" id="hider" value="Click to hide the text" />

<div id="text">Text</div>

<script>
// Here it doesn't matter how we hide the text,
// could also use style.display:
document.getElementById('hider').onclick = function() {
document.getElementById('text').hidden = true;
}
</script>
</body>
<script>
// Her er det ikke vigtigt hvordan vi skjuler teksten,
// vi kunne også bruge style.display:
document.getElementById('hider').onclick = function () {
document.getElementById('text').hidden = true;
};
</script>
</body>
</html>
25 changes: 11 additions & 14 deletions 25 2-ui/2-events/01-introduction-browser-events/01-hide-other/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>

<head>
<meta charset="utf-8">
</head>
<body>
<input type="button" id="hider" value="Klik for at skjule teksten" />

<body>
<div id="text">Tekst</div>

<input type="button" id="hider" value="Click to hide the text" />

<div id="text">Text</div>

<script>
/* your code */
</script>

</body>
<script>
/* din kode */
</script>
</body>
</html>
6 changes: 3 additions & 3 deletions 6 2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ importance: 5

---

# Hide on click
# Skjul ved klik

Add JavaScript to the `button` to make `<div id="text">` disappear when we click it.
Tilføj JavaScript til `button` for at gøre `<div id="text">` usynlig når vi klikker på den.

The demo:
Demo:

[iframe border=1 src="solution" height=80]
4 changes: 2 additions & 2 deletions 4 2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
Can use `this` in the handler to reference "the element itself" here:
Du kan her bruge `this` i handleren til at referere til "elementet selv":

```html run height=50
<input type="button" onclick="this.hidden=true" value="Click to hide">
<input type="button" onclick="this.hidden=true" value="Klik for at skjule">
```
8 changes: 4 additions & 4 deletions 8 2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ importance: 5

---

# Hide self
# Skjul dig selv

Create a button that hides itself on click.
Opret en knap, der skjuler sig selv ved klik.

```online
Like this:
<input type="button" onclick="this.hidden=true" value="Click to hide">
Som dette:
<input type="button" onclick="this.hidden=true" value="Klik for at skjule">
```
8 changes: 4 additions & 4 deletions 8 2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
The answer: `1` and `2`.
Svaret er `1` og `2`.

The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function.
Den første handler afvikles, fordi den ikke er blevet fjernet af `removeEventListener`. For at fjerne handleren skal vi overføre præcis den funktion, der var tildelt. Og i koden bliver en ny funktion overført, som ser den samme ud, men er stadig en anden funktion.

To remove a function object, we need to store a reference to it, like this:
For at fjerne et funktionsobjekt, skal vi gemme en reference til det, sådan her:

```js
function handler() {
Expand All @@ -13,4 +13,4 @@ button.addEventListener("click", handler);
button.removeEventListener("click", handler);
```

The handler `button.onclick` works independently and in addition to `addEventListener`.
Handleren `button.onclick` virker uafhængigt og i tilføjelse til `addEventListener`.
6 changes: 3 additions & 3 deletions 6 2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ importance: 5

---

# Which handlers run?
# Hvilken handler vil blive afviklet?

There's a button in the variable. There are no handlers on it.
Der er et element i variablen (en knap). Der er ingen handlers på den.

Which handlers run on click after the following code? Which alerts show up?
Hvilke handlers afvikles ved klik efter følgende kode? Hvilke alerts vises?

```js no-beautify
button.addEventListener("click", () => alert("1"));
Expand Down
30 changes: 15 additions & 15 deletions 30 2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@

First we need to choose a method of positioning the ball.
Først skal vi vælge en metode til at positionere bolden.

We can't use `position:fixed` for it, because scrolling the page would move the ball from the field.
Vi kan ikke bruge `position:fixed` til det, fordi scrolling af siden ville flytte bolden fra plænen.

So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned.
Så vi bør bruge `position:absolute` og, for at gøre positioneringen virkelig solid, give selve `field` en `position`.

Then the ball will be positioned relatively to the field:
På den måde vil bolden blive positioneret relativt til plænen:

```css
#field {
Expand All @@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field:

#ball {
position: absolute;
left: 0; /* relative to the closest positioned ancestor (field) */
left: 0; /* relativt til den nærmeste positionerede forælder (field) */
top: 0;
transition: 1s all; /* CSS animation for left/top makes the ball fly */
transition: 1s all; /* CSS animation for left/top får bolden til at bevæge sig */
}
```

Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now.
Derefter skal vi tildele de korrekte `ball.style.left/top`. De indeholder nu koordinater relative til plænen.

Here's the picture:
Her er et billede:

![](move-ball-coords.svg)

We have `event.clientX/clientY` -- window-relative coordinates of the click.
Vi har `event.clientX/clientY` -- koordinater relativt til vinduet.

To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width:
For at få et field-relativt `left` koordinat, kan vi trække fields venstre side og border tykkelse fra:

```js
let left = event.clientX - fieldCoords.left - field.clientLeft;
```

Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor.
Normalt betyder `ball.style.left` den "venstre kant af et element" (bolden). Så hvis vi tildeler den `left`, så vil det være boldens venstre side og ikke center der vil være under musemarkøren.

We need to move the ball half-width left and half-height up to make it center.
Vi skal flytte den halve bredde af bolden til venstre og den halve højde op for at centrere den.

So the final `left` would be:
Så den endelige `left` vil være:

```js
let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2;
```

The vertical coordinate is calculated using the same logic.
Den samme logik bruges til at beregne den lodrette koordinat.

Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS.
Bemærk, at boldens bredde/højde skal være kendt på det tidspunkt, hvor vi tilgår `ball.offsetWidth`. Den skal angives i HTML eller CSS.
134 changes: 64 additions & 70 deletions 134 2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,69 @@
<!DOCTYPE HTML>
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<style>
#field {
width: 200px;
height: 150px;
border: 10px solid black;
background-color: #00FF00;
position: relative;
overflow: hidden;
cursor: pointer;
}

#ball {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
transition: all 1s;
}
</style>
</head>

<body style="height:2000px">

Click on a field to move the ball there.
<br>


<div id="field">
<img src="https://en.js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>

<script>
field.onclick = function(event) {

// window-relative field coordinates
let fieldCoords = this.getBoundingClientRect();

// the ball has position:absolute, the field: position:relative
// so ball coordinates are relative to the field inner left-upper corner
let ballCoords = {
top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2
};

// prevent crossing the top field boundary
if (ballCoords.top < 0) ballCoords.top = 0;

// prevent crossing the left field boundary
if (ballCoords.left < 0) ballCoords.left = 0;


// // prevent crossing the right field boundary
if (ballCoords.left + ball.clientWidth > field.clientWidth) {
ballCoords.left = field.clientWidth - ball.clientWidth;
<head>
<meta charset="utf-8" />
<style>
#field {
width: 200px;
height: 150px;
border: 10px solid black;
background-color: #00ff00;
position: relative;
overflow: hidden;
cursor: pointer;
}

// prevent crossing the bottom field boundary
if (ballCoords.top + ball.clientHeight > field.clientHeight) {
ballCoords.top = field.clientHeight - ball.clientHeight;
#ball {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
transition: all 1s;
}

ball.style.left = ballCoords.left + 'px';
ball.style.top = ballCoords.top + 'px';
}
</script>

</body>
</style>
</head>

<body style="height: 2000px">
Klik på plænen for at flytte bolden derhen.
<br />

<div id="field">
<img src="https://en.js.cx/clipart/ball.svg" id="ball" />
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>

<script>
field.onclick = function (event) {
// Koordinater relativt til vinduet
let fieldCoords = this.getBoundingClientRect();

// bolden har position:absolute, plænen: position:relative
// så boldens koordinater er relative til plænen's indre venstre øverste hjørne
let ballCoords = {
top: event.clientY - fieldCoords.top - field.clientTop - ball.clientHeight / 2,
left: event.clientX - fieldCoords.left - field.clientLeft - ball.clientWidth / 2,
};

// forhindrer bolden i at forlade toppen af plænen
if (ballCoords.top < 0) ballCoords.top = 0;

// forhindrer bolden i at forlade plænen til venstre
if (ballCoords.left < 0) ballCoords.left = 0;

// // forhindrer bolden i at forlade plænen til højre
if (ballCoords.left + ball.clientWidth > field.clientWidth) {
ballCoords.left = field.clientWidth - ball.clientWidth;
}

// forhindrer bolden i at forlade bunden af plænen
if (ballCoords.top + ball.clientHeight > field.clientHeight) {
ballCoords.top = field.clientHeight - ball.clientHeight;
}

ball.style.left = ballCoords.left + 'px';
ball.style.top = ballCoords.top + 'px';
};
</script>
</body>
</html>
4 changes: 2 additions & 2 deletions 4 2-ui/2-events/01-introduction-browser-events/04-move-ball-field/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@

<body style="height:2000px">

Click on a field to move the ball there.
<br> The ball should never leave the field.
Klik på plænen for at flytte bolden derhen.
<br> Bolden må ikke forlade plænen.


<div id="field">
Expand Down
20 changes: 10 additions & 10 deletions 20 2-ui/2-events/01-introduction-browser-events/04-move-ball-field/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@ importance: 5

---

# Move the ball across the field
# Flyt bolden hen over plænen

Move the ball across the field to a click. Like this:
Flyt bolden hen over plænen til det sted der klikkes. Som dette:

[iframe src="solution" height="260" link]

Requirements:
Krav:

- The ball center should come exactly under the pointer on click (if possible without crossing the field edge).
- CSS-animation is welcome.
- The ball must not cross field boundaries.
- When the page is scrolled, nothing should break.
- Boldens center skal være det sted der klikkes (hvis muligt uden at lande uden for plænen).
- CSS-animationer er velkomne.
- Bolden må ikke lande uden for plænen.
- Når siden scrolles, skal det stadig virke.

Notes:
Note:

- The code should also work with different ball and field sizes, not be bound to any fixed values.
- Use properties `event.clientX/event.clientY` for click coordinates.
- Koden skal kunne virke ved forskellige bold- og plæne-størrelser og må ikke være bundet til faste værdier.
- Brug egenskaberne `event.clientX/event.clientY` for klik-koordinater.
Loading
Morty Proxy This is a proxified and sanitized view of the page, visit original site.