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