🚀 Desafío 3 - Funciones

📖 Descripción

Este proyecto corresponde al Desafío 3 - Funciones del curso Desarrollo Full Stack JavaScript de Desafío Latam.

El objetivo es aplicar los conocimientos sobre funciones en JavaScript, Arrow Functions, manipulación del DOM, eventos y creación dinámica de elementos HTML.

---

🌐 Demo

Haz clic en el siguiente botón para ver el proyecto en funcionamiento:

---

🎯 Objetivos

• Transformar una función declarativa en una función de expresión.
• Convertir una función de expresión en una Arrow Function.
• Manipular elementos del DOM.
• Utilizar addEventListener().
• Capturar eventos del teclado.
• Crear elementos HTML dinámicamente.
• Practicar la organización de archivos JavaScript y HTML.

---

📂 Estructura del proyecto

Desafio3/
│
├── index.html
├── 1_funcion.js
├── 2_arrow.js
├── pintar.html
├── 4_colores.html
├── README.md
│
└── assets/
    ├── css/
    │   └── style.css
    │
    ├── img/
    │   ├── 1_funcion.png
    │   ├── 2_arrow.png
    │   ├── 4_colores.png
    │   └── pintar.png
    │
    └── js/
        └── script.js

---

📝 Ejercicios desarrollados

✅ Ejercicio 1

Transformación de una función declarativa en una función de expresión.

Archivo:

• 1_funcion.js

---

✅ Ejercicio 2

Transformación de una función de expresión en una Arrow Function de una línea.

Archivo:

• 2_arrow.js

---

✅ Ejercicio 3

Separación del código HTML y JavaScript.

Se modificó la función pintar() para:

• recibir el elemento clickeado.
• recibir un color como parámetro.
• utilizar green como color por defecto.
• cambiar a yellow al hacer clic.

Archivos:

• pintar.html
• assets/js/script.js

---

✅ Ejercicio 4

Creación de cuatro divs de colores.

Al hacer clic sobre cada uno:

• cambia su color a negro.

Además:

• tecla A → Rosado
• tecla S → Naranjo
• tecla D → Celeste

Y crea nuevos divs:

• tecla Q → Morado
• tecla W → Gris
• tecla E → Café

Archivo:

• 4_colores.html

---

💻 Tecnologías utilizadas

• HTML5
• JavaScript (ES6)
• DOM
• Visual Studio Code
• Live Server
• Git
• GitHub

---

▶️ Cómo ejecutar el proyecto

1. Clona este repositorio.

git clone https://github.com/jleival/desafio3-funciones.git

2. Abre la carpeta con Visual Studio Code.

3. Instala la extensión Live Server.

4. Haz clic derecho sobre index.html.

5. Selecciona:

Open with Live Server

6. Desde el menú principal podrás acceder a todos los ejercicios.

---

📸 Capturas de pantalla

Página principal

📝 Ejercicio 1 - Función de Expresión

---

⚡ Ejercicio 2 - Arrow Function

---

🎨 Ejercicio 3 - Pintar

---

⌨️ Ejercicio 4 - Colores y Teclado

---

👨‍💻 Autor

Jorge Leiva

Ingeniero Informático

Proyecto desarrollado para Desafío Latam.

---

📄 Licencia

Este proyecto fue desarrollado con fines educativos como parte del programa de formación de Desafío Latam.