diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md index 31bb8e4b5..d2c469482 100644 --- a/2-ui/1-document/07-modifying-document/article.md +++ b/2-ui/1-document/07-modifying-document/article.md @@ -546,7 +546,7 @@ Så hvis vi har brug for at tilføje en masse tekst til HTML dynamisk, OG vi er Alle disse metoder returnerer `node`. -- Givet nogle HTML i `html`, indsætter `elem.insertAdjacentHTML(where, html)` det afhængigt af værdien af `where`: +- Givet noget HTML i `html`, indsætter `elem.insertAdjacentHTML(where, html)` det afhængigt af værdien af `where`: - `"beforebegin"` -- indsætter `html` lige før `elem`, - `"afterbegin"` -- indsætter `html` inde i `elem`, i begyndelsen, - `"beforeend"` -- indsætter `html` inde i `elem`, i slutningen, diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html index dc4eeec9f..f75734d56 100755 --- a/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html +++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/solution.view/index.html @@ -1,49 +1,41 @@ - + - - - + + + - + +

Notifikationen er til højre

-

Notification is on the right

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad.

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum - magnam consequatur sit laboriosam velit excepturi laborum sequi eos placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta - temporibus. Tempore dicta ullam delectus numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo cumque voluptates quidem repellendus maiores unde earum molestiae ad. -

+ + notification.innerHTML = html; + document.body.append(notification); + setTimeout(() => notification.remove(), 1500); + } - + // test it + let i = 1; + setInterval(() => { + showNotification({ + top: 10, + right: 10, + html: 'Hejsa! ' + i++, + className: 'welcome', + }); + }, 2000); + + diff --git a/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html index b5e2f83f7..d27605903 100755 --- a/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html +++ b/2-ui/1-document/08-styles-and-classes/2-create-notification/source.view/index.html @@ -6,7 +6,7 @@ -

Notification is on the right

+

Notifikationen er til højre

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime necessitatibus beatae labore soluta voluptatum @@ -16,16 +16,16 @@

Notification is on the right

@@ -84,9 +84,9 @@ Besides, `classList` is iterable, so we can list all classes with `for..of`, lik ## Element style -The property `elem.style` is an object that corresponds to what's written in the `"style"` attribute. Setting `elem.style.width="100px"` works the same as if we had in the attribute `style` a string `width:100px`. +Egenskaben `elem.style` er et objekt, der svarer til det, der er skrevet i `"style"`-attributten. At sætte `elem.style.width="100px"` virker på samme måde som hvis vi havde strengen `width:100px` sat i attributten `style`. -For multi-word property the camelCase is used: +For egenskaber sammensat af flere ord bruges camelCase i stedet for bindestreger. Det betyder, at bindestreger i CSS erstattes af store bogstaver i JavaScript.: ```js no-beautify background-color => elem.style.backgroundColor @@ -94,16 +94,16 @@ z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth ``` -For instance: +For eksempel: ```js run document.body.style.backgroundColor = prompt('background color?', 'green'); ``` -````smart header="Prefixed properties" -Browser-prefixed properties like `-moz-border-radius`, `-webkit-border-radius` also follow the same rule: a dash means upper case. +````smart header="Præfikserede egenskaber" +Browser-præfiks egenskaber som `-moz-border-radius`, `-webkit-border-radius` følger også samme regle: en bindestreg betyder stort bogstav. -For instance: +For eksempel: ```js button.style.MozBorderRadius = '5px'; @@ -111,41 +111,41 @@ button.style.WebkitBorderRadius = '5px'; ``` ```` -## Resetting the style property +## Nulstilling af en `style` egenskab -Sometimes we want to assign a style property, and later remove it. +Nogle gange vil vi tildele en værdi til en style egenskab, andre gange vil vi fjerne den. -For instance, to hide an element, we can set `elem.style.display = "none"`. +For eksempel, for at skjule et element, kan vi sætte `elem.style.display = "none"`. -Then later we may want to remove the `style.display` as if it were not set. Instead of `delete elem.style.display` we should assign an empty string to it: `elem.style.display = ""`. +Senere vil vi måske ønske at fjerne værdien fra `style.display` som om den ikke var sat. I stedet for `delete elem.style.display` bør vi tildele en tom streng til den: `elem.style.display = ""`. ```js run -// if we run this code, the will blink +// hvis vi kører denne kode, vil blinke document.body.style.display = "none"; // hide -setTimeout(() => document.body.style.display = "", 1000); // back to normal +setTimeout(() => document.body.style.display = "", 1000); // tilbage til normal ``` -If we set `style.display` to an empty string, then the browser applies CSS classes and its built-in styles normally, as if there were no such `style.display` property at all. +Hvis vi sætter `style.display` til en tom streng, så anvender browseren egne indbyggede CSS-klasser og stil, som om der ikke var nogen sådan `style.display`-egenskab overhovedet. -Also there is a special method for that, `elem.style.removeProperty('style property')`. So, We can remove a property like this: +Der er også en speciel metode til det, `elem.style.removeProperty('style property')`. Så kan vi fjerne en egenskab sådan her: ```js run -document.body.style.background = 'red'; //set background to red +document.body.style.background = 'red'; //sæt background til red -setTimeout(() => document.body.style.removeProperty('background'), 1000); // remove background after 1 second +setTimeout(() => document.body.style.removeProperty('background'), 1000); // fjern background efter 1 sekund ``` -````smart header="Full rewrite with `style.cssText`" -Normally, we use `style.*` to assign individual style properties. We can't set the full style like `div.style="color: red; width: 100px"`, because `div.style` is an object, and it's read-only. +````smart header="Fuld omskrivning med `style.cssText`" +Normalt bruger vi `style.*` til at tildele individuelle style-egenskaber. Vi kan ikke sætte et samlet udseende (flere enkelte styles) i stil med `div.style="color: red; width: 100px"`, fordi `div.style` er et objekt, og det er read-only. -To set the full style as a string, there's a special property `style.cssText`: +For at sætte den samlede style som en enkelt streng, er der en speciel egenskab `style.cssText`: ```html run -
Button
+
Knap
``` -This property is rarely used, because such assignment removes all existing styles: it does not add, but replaces them. May occasionally delete something needed. But we can safely use it for new elements, when we know we won't delete an existing style. +Denne egenskab er sjældent brugt, fordi en sådan tildeling fjerner alle eksisterende styles: det tilføjer ikke, men erstatter dem. Det kan betyde, at du kommer til at slette noget, der er nødvendigt. Men vi kan trygt bruge den for nye elementer, når vi ved, at vi ikke vil slette en eksisterende style. -The same can be accomplished by setting an attribute: `div.setAttribute('style', 'color: red...')`. +Det samme kan opnås ved at sætte en attribut: `div.setAttribute('style', 'color: red...')`. ```` -## Mind the units +## Vær opmærksom på enheder -Don't forget to add CSS units to values. +Glem ikke at tilføje CSS-enheder til værdier. -For instance, we should not set `elem.style.top` to `10`, but rather to `10px`. Otherwise it wouldn't work: +For eksempel skal vi ikke sætte `elem.style.top` til `10`, men til `10px` - ellers virker det ikke: ```html run height=100