Agrega README
This commit is contained in:
69
README.md
Normal file
69
README.md
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
# Clase 8 - El navegador y el DOM
|
||||||
|
|
||||||
|
## Ejercicios de la clase
|
||||||
|
|
||||||
|
0. Seguir los pasos habituales para gestionar con git estos ejercicios:
|
||||||
|
- Hacer un fork de este repositorio (noten que tiene 'marquez.juan' en la URL).
|
||||||
|
- Clonar **tu fork**. (No debería figurar `marquez.juan` en la URL).
|
||||||
|
- Crear una nueva rama con `switch -c nombre-de-tu-rama`
|
||||||
|
- Hacer `git push origin nombre-de-tu-rama`
|
||||||
|
- Desde gitea, crear el pull request, desde la rama recién creada de tu fork
|
||||||
|
hacia la rama `main` del repositorio que pertenece a `marquez.juan`. De esta
|
||||||
|
manera el docente puede ir siguiendo tu trabajo y respondiendo las consultas
|
||||||
|
más fácilmente.
|
||||||
|
- Comenzar a resolver los ejercicios, en el archivo `ejercicios-clase-8.js`.
|
||||||
|
- Hacer al menos un commit por cada uno de los ejercicios que siguen.
|
||||||
|
- Al finalizar cada sesión de trabajo, hacer `git push origin
|
||||||
|
nombre-de-tu-rama`
|
||||||
|
|
||||||
|
1. Crear una función que seleccione el primer `<h1>` de la página y cambie su
|
||||||
|
texto a otro mensaje. Verificar el resultado en el navegador invocando a la
|
||||||
|
función desde las devtools.
|
||||||
|
|
||||||
|
2. Crear otra función que, usando `querySelectorAll` y `for...of`, agregue la
|
||||||
|
clase `item-lista` a cada uno de los items de la lista. Verificar el
|
||||||
|
resultado en el navegador invocando a la función desde las devtools. Debería
|
||||||
|
observarse un cambio de estilo, intenten explicarse por qué sucede esto.
|
||||||
|
|
||||||
|
3. Crear una función `agregarItem` que reciba un texto como parámetro, cree
|
||||||
|
un nuevo `<li>` con ese texto y lo agregue al final de la lista con
|
||||||
|
`id="lista-inicial"`. Llamarla tres veces con textos distintos desde las
|
||||||
|
devtools.
|
||||||
|
|
||||||
|
4. Seleccionar todos los párrafos que estén dentro del div con `id="parrafos"`.
|
||||||
|
Si un párrafo contiene la palabra `"importante"` en su texto, agregarle la
|
||||||
|
clase `"destacado"`.
|
||||||
|
|
||||||
|
5. Crear una función que agregue un nuevo `div` a la página, que incluya comidas
|
||||||
|
típicas de la región del litoral. Este div debe incluir un `h2`, un párrafo
|
||||||
|
introductorio y una lista de comidas típicas. Probarla utilizando las devtools.
|
||||||
|
|
||||||
|
6. Crear una función `limpiarLista` que reciba por parámetro el id de una lista,
|
||||||
|
y que elimine todos los `<li>` de esa lista. Llamarla sobre la lista del
|
||||||
|
ejercicio 2. Pista: `querySelectorAll` + `for...of` + `remove`. Probarla
|
||||||
|
utilizando las devtools, tanto con la lista original de la página como con la
|
||||||
|
lista agregada en el ejercicio anterior.
|
||||||
|
|
||||||
|
7. La página contiene el siguiente HTML:
|
||||||
|
```html
|
||||||
|
<img id="foto" src="foto1.jpg" alt="Empanadas">
|
||||||
|
```
|
||||||
|
Escribir el código que cambie el `src` de la imagen a `"foto2.jpg"` y el
|
||||||
|
`alt` a `"Locro"`.
|
||||||
|
|
||||||
|
8. Crear una función `construirLista` que reciba un array de strings y
|
||||||
|
construya dinámicamente y retorne un `div` con que contenga un título y una
|
||||||
|
lista `<ul>`, con un `<li>` por cada elemento del array. Agregar esta lista a
|
||||||
|
la página desde las devtools.
|
||||||
|
|
||||||
|
```js
|
||||||
|
construirLista(["Comidas mendocinas", "Sopaipilla", "Vino tinto"]);
|
||||||
|
// Debe generar y retornar:
|
||||||
|
// <div class="grupo-comidas">
|
||||||
|
// <h2>Comidas mendocinas</h2>
|
||||||
|
// <ul>
|
||||||
|
// <li>Sopaipilla</li>
|
||||||
|
// <li>Vino tinto</li>
|
||||||
|
// </ul>
|
||||||
|
// </div>
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user