Skip to content

Attributes and properties #323

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.

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 6 commits into from
Jul 30, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
<html>
<body>

<div data-widget-name="menu">Choose the genre</div>
<div data-widget-name="menu">Elige el género</div>

<script>
// getting it
// obteniéndolo
let elem = document.querySelector('[data-widget-name]');

// reading the value
// leyendo el valor
alert(elem.dataset.widgetName);
// or
// o
alert(elem.getAttribute('data-widget-name'));
</script>
</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ importance: 5

---

# Get the attribute
# Obtén en atributo

Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
Escribe el código para obtener el atributo `data-widget-name` del documento y leer su valor.

```html run
<!DOCTYPE html>
<html>
<body>

<div data-widget-name="menu">Choose the genre</div>
<div data-widget-name="menu">Elige el genero</div>

<script>
/* your code */
/* Tu código */
</script>
</body>
</html>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

First, we need to find all external references.
Primero, necesitamos encontrar todos los enlaces externos.

There are two ways.
Hay dos.

The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
El primero es encontrar todos los enlaces usando `document.querySelectorAll('a')` y luego filtrar lo que necesitamos:

```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; // no atributo

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

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

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

Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
Tenga en cuenta: nosotros usamos `link.getAttribute('href')`. No `link.href`, porque necesitamos el valor del HTML.

...Another, simpler way would be to add the checks to CSS selector:
...Otra forma más simple sería agregar las comprobaciones al selector CSS:

```js
// look for all links that have :// in href
// but href doesn't start with http://internal.com
// busque todos los enlaces que tengan: // en href
//pero href no comienza con http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<body>

<a name="list">The list:</a>
<a name="list">La lista:</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<body>

<a name="list">The list:</a>
<a name="list">La lista</a>
<ul>
<li><a href="http://google.com">http://google.com</a></li>
<li><a href="/tutorial">/tutorial.html</a></li>
Expand All @@ -13,7 +13,7 @@
</ul>

<script>
// ...your code...
// ...Tu código...
</script>

</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ importance: 3

---

# Make external links orange
# Haz los enlaces externos naranjas

Make all external links orange by altering their `style` property.
Haz todos los enlaces externos de color orange alterando su propiedad `style`.

A link is external if:
- Its `href` has `://` in it
- But doesn't start with `http://internal.com`.
Un link es externo si:
- Su `href` tiene `://`
- Pero no comienza con `http://internal.com`.

Example:
Ejemplo:

```html run
<a name="list">the list</a>
Expand All @@ -24,12 +24,12 @@ Example:
</ul>

<script>
// setting style for a single link
// establecer un estilo para un enlace
let link = document.querySelector('a');
link.style.color = 'orange';
</script>
```

The result should be:
El resultado podría ser:

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