Skip to content

Attributes and properties #183

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
merged 1 commit into from
Apr 9, 2020
Merged

Attributes and properties #183

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
4 changes: 2 additions & 2 deletions 2-ui/1-document/06-dom-attributes-and-properties/1-get-user-attribute/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ importance: 5

---

# Get the attribute
# Obtenez l'attribut

Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
Écrivez le code pour sélectionner l'élément avec l'attribut `data-widget-name` dans le document et pour lire sa valeur.

```html run
<!DOCTYPE html>
Expand Down
20 changes: 10 additions & 10 deletions 2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

First, we need to find all external references.
Tout d'abord, nous devons trouver toutes les références externes.

There are two ways.
Il y a deux façons.

The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
La première consiste à trouver tous les liens à l'aide de `document.querySelectorAll('a')` puis à filtrer ce dont nous avons besoin :

```js
let links = document.querySelectorAll('a');
Expand All @@ -12,23 +12,23 @@ for (let link of links) {
*!*
let href = link.getAttribute('href');
*/!*
if (!href) continue; // no attribute
if (!href) continue; // pas d'attribut

if (!href.includes('://')) continue; // no protocol
if (!href.includes('://')) continue; // pas de protocol

if (href.startsWith('http://internal.com')) continue; // internal
if (href.startsWith('http://internal.com')) continue; // interne

link.style.color = 'orange';
}
```

Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
Veuillez noter: nous utilisons `link.getAttribute('href')`. Pas `link.href`, car nous avons besoin de la valeur HTML.

...Another, simpler way would be to add the checks to CSS selector:
... Un autre moyen plus simple serait d'ajouter les contrôles au sélecteur CSS :

```js
// look for all links that have :// in href
// but href doesn't start with http://internal.com
// recherchez tous les liens qui ont :// dans href
// mais href ne commence pas par http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

Expand Down
14 changes: 7 additions & 7 deletions 2-ui/1-document/06-dom-attributes-and-properties/2-yellow-links/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ importance: 3

---

# Make external links orange
# Rendre les liens externes orange

Make all external links orange by altering their `style` property.
Mettez tous les liens externes en orange en modifiant leur propriété `style`.

A link is external if:
- Its `href` has `://` in it
- But doesn't start with `http://internal.com`.
Un lien est externe si :
- Son `href` contient `://`
- Mais ne commence pas par `http://internal.com`.

Example:
Exemple :

```html run
<a name="list">the list</a>
Expand All @@ -30,6 +30,6 @@ Example:
</script>
```

The result should be:
Le résultat devrait être :

[iframe border=1 height=180 src="solution"]
Loading