Lección : Actividades

Actividad 2-1 (Formateando)

Manipula la siguiente cita de Richard Stallman: “Compartir el conocimiento es el acto más fundamental de la amistad. Porque es una forma de dar algo sin perder nada.”

  1. Guarda el texto en una variable.
  2. Transfórmalo en mayúsculas.
  3. Imprímelo por consola (console.log).
  4. Transfórmalo en minúsculas.
  5. Imprímelo por consola (console.log).

Pro:

  • ¿Por cuantos carácteres?
  • ¿Y sin espacios?

Actividad 2-2 (Operaciones)

¿Cuantos años tiene Madonna? Te doy un dato: nació en 1958.

  1. Calcula y guarda el resultado en una variable.
  2. Imprime la edad con un formato más adecuado: “Madonna tiene xx años”.

Pro:

  • Obtén el año actual con JavaScript.

Actividad 3-1 (Adivinanza)

Ejecuta

prompt('Tengo agujas pero no sé coser, tengo números pero no sé leer, las horas te doy, ¿Sabes quién soy?')

Guarda en una variable la respuesta. Muestra por consola si ha acertado.

Respuesta: El reloj.

Actividad 3-2 (Portero)

Portero de discoteca automático

  • Pide el año de nacimiento.
  • Calcula la edad.
  • Si es mayor de edad, dile que puede pasar dentro.
  • Si es menor, tírale.
  • (PRO) Obten el año del sistema.
  • (PRO) Pide además el día y el mes de nacimiento para saber si ha complido el año actual.

Actividad 3-3 (Frases)

A partir de las siguientes constantes…

const animal = '...';
const sexo = '...';
const hijos = ...;

se genera la siguiente frase: La {'padre' o 'madre' a partir del sexo} {animal} tiene {hijos} hijos.

Por ejemplo:

const animal = 'elefante';
const sexo = 'mujer';
const hijos = 3;

Obtenemos: La mama elefante tiene 3 hijos.

Ahora cambia las variables por las siguientes combinaciones y genera las frases adecuadas usando condicionales.

1)

const animal = 'aguila';
const sexo = 'hombre';
const hijos = 7;

2)

const animal = 'ballena';
const sexo = 'mujer';
const hijos = 1;

3)

const animal = 'tigre';
const sexo = 'hombre';
const hijos = 0;

Actividad 4-1 (Calculadora)

Crea una función que sume 2 números.

Pro:

  • Crea otra función que reciba un precio y lo imprima con un impuesto añadido (21%).

Actividad 4-2 (Altura)

  1. Crea una función llamada formateadorDeAltura.
  2. Añade un argumento de entrada llamado centimetros.
  3. Cuando lo invoque con un número, por ejemplo 178, imprima 1,78 m.

Actividad 5-1 (Estrellas)

Diseña una página con el fondo negro.

  • Muestra en la esquina superior izquierda la x y la y del ratón según se mueve.
  • Ahora solo se actualizará cuando se pulse con el botón izquierdo del ratón.
  • Cuando se pulse en cualquier lugar, debe aparecer un circulo blanco.

Actividad 5-2 (Moviendo montañas)

Muestra la foto de una montaña.

  • Cuando pulses sobre ella, solo, debe cambiar sus coordenadas a la del ratón. Visualmente lo perseguirá.
  • Si vuelves a pulsar dejará de moverse, quedándose en la posición donde se hizo clic.

Actividad 6-1 (tienda)

Crea una tienda online.

  1. Crea un array con productos.
  2. Imprimelos por HTML dentro de un ul.

Actividad 6-2 (notas de clase)

Calcula la media de las siguientes notas

[1, 2, 3]
[10, 80, 10]

Actividad 6-3 (números sueltos)

A partir del siguiente array.

[2, 1, 6, 7, 6, 3]
  1. Suma todos los números.
  2. Imprime un número aleatorio de la lista.
  3. Borra el primer número.
  4. Borra el último número.
  5. Vuelve a sumarlos.
  6. Añade un 5.
  7. Vuelve a sumarlos.

Actividad 6-4 (GoMommy)

Vamos a montar una empresa para registrar dominios.

Partiremos del siguiente array.

let dominios = [];

Y un botón con el texto comprar.

  1. Crea un campo de texto donde un usuario pueda escribir el dominio que quiere comprar.
  2. Comprueba que no existe dentro de la “base de datos” (dominios).
  3. Si ya existe, pinta el campo con un color rojo.
  4. Si esta libre, añade el dominio la variable y borra el campo.
  5. Muestra las siguientes estadísticas en algún lugar.
    • Lista de dominios registrados.
    • Número de extensiones diferentes registradas.
    • Precio a pagar mensualmente (cada dominio cuesta 0,82 euros/mes).
    • Precio a pagar anualmente.
  6. (PRO) Acompaña cada dominio con un botón que permita al usuario “anularlo”, o quitarlo de la variable.
  7. (PRO) Para ir más rápido a la hora de encontrar tus dominios comprados, añade un campo de texto que filtre los campos.
  8. (PRO) Solo se permite comprar 5 dominios como máximo. Añade una barra de progreso (<progress>) que te diga cuantos tienes disponibles.

Actividad 7-1 (Lista de asistencia)

Muestra un nombre que acompañe 2 botones en su lateral: ‘Presente’, ‘Ausente’.

  • Cuando se pulse en ‘Presente’ debe colorearse el nombre de color verde y desaparecer los botones.
  • Cuando se pulse en ‘Ausente’ debe colorearse el nombre de color rojo y desaparecer los botones.
  • (PRO): Muestra una lista con varios nombres. La funcionalidad debe ser la misma.
  • (PRO): Si se pulsa en ‘Ausente’, en lugar de borrar ambos botones aparecerá un botón con el texto ‘Llega tarde’. Al apretado coloreará en amarillo.

Actividad 7-2 (Portafolio)

A partir de un JSON, donde has estructurado la información de un portafolio, muestra en contenido con un formato adecuado y complejo en HTML. Puedes apoyarte en un framework HTML.

Una posibilidad.

const portafolio = [
  {
    nombre: 'Gafas el tuerto',
    anyo: 2021,
    categoria: 'Web',
    imagen: 'foto.jpg',
    descripcion: 'Una e-commerce para la venta de monoculos baratos.'
  },
  {
    nombre: 'Ropa sucia',
    anyo: 2019,
    categoria: 'APP',
    imagen: 'foto2.jpg',
    descripcion: 'Red social de solteros que viven solos.'
  }
  ...
]
  • Crea un campo que al escribir filtre por nombre.
  • Añade botones para filtrar el contenido por categorias.
  • Acompaña el filtro de un <select> que listo todos los años en el JSON.

Actividad 7-3 (Sumador)

En 2 inputs introduce números. Al ser pulsado el botón, llamado Calcular, debe sumarlos y mostrar el resultado.

Ejercicio 7-3

Actividad 7-4 (Contador de campanas)

Cuando se pulse en el botón de la campana, debe aumentar el número que lo acompaña.

Ejercicio 7-4

Actividad 7-5 (Fondo aleatorio)

Crea una web que cambie su color de fondo cada segundo de forma aleatoria. Puedes apoyarte en la función _.random() de Lodash.

Actividad 7-6 (Desplegable)

Cuando se pulse en el elemento debe desplegar, o crecer, hasta mostrar la respuesta a la pregunta. Si es pulsado de nuevo debe esconderse, o volver al estado anterior.

Ejercicio 7-6

Actividad 7-7 (Modal)

Al ser pulsado el botón debe aparecer un mensaje (modal).

PRO: Cuando se pulse en el aspa del modal, se ocultará.

Ejercicio 7-7

Actividad 7-8 (Límite de carácteres)

Crea un textarea con un límite de carácteres es 100. Para informar al usuario, enseña los carácteres restantes.

Ejercicio 7-8

Actividad 7-9 (Cronómetro)

Cuando se pulse en el botón Inicio debe incrementarse el número cada segundo.

Ejercicio 7-9

Actividad 7-10 (Calendario)

Muestra el día actual usando Date().

PRO: Enseña el día y la hora.

Ejercicio 7-10

Actividad 7-11 (WordPressJS)

Crea un editor visual para un sencillo párrafo. En el ejemplo se usa el texto “Karate”, de color negro y tamaño 12.

Ejercicio 7-11

Actividad 7-12 (Jackpot)

Aleatoriamente, dibuja 3 números entre el 0 y el 9.

PRO:

  • Añade un campo de créditos.
  • Si coinciden los 3 números, añade 10 créditos.
  • Si pierdes, resta 1 crédito.

Ejercicio 7-12

Actividad 7-13 (Blackjack)

Cuando se pida una carta debe mover una carta aleatoria de la baraja a la mano del jugador. Si llega a 21,5 ganará. En caso contrario perdará.

Parte con la siguiente información.

const baraja = [
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
  1, 2, 3, 4, 5, 6, 7, 0.5, 0.5, 0.5
];
let mano = [];

Ejercicio 7-13

Actividad 7-14 (Carrousel)

Crea un carrousel con las siguientes características.

  • Si se pulsa en el botón derecho, debe pasar a la siguiente.
  • Si se pulsa en el botón izquierdo, debe retroceder.
  • Debe comportarse como un bucle. Si llega a la última debe volver a la primera, por ejemplo.
  • Añade un circulo, con un radio, por cada imagen. Al ser pulsada sobre ella debe cambiar a esa imagen.
  • PRO: Añade un botón que inicie un cambio automático.

Ejercicio 7-14

Actividad 7-15 (Ahorcado)

Fabrica el juego del ahorcado.

Ejercicio 7-15

  • Si no se acierta la letra, debe decrecer el contador de fallos.
  • Si se acierta la letra, debe mostrarse.
  • Cuando no existan huecos, se informa al jugador que se ha ganado.
  • En caso que no queden más fallos, también se informará al jugador.
  • PRO: En cada partida la palabra a adivinar debe cambiar.
  • PRO: Muestra un dibujo de un hombre en lugar del contador de fallos.

Actividad 7-16 (Missile command)

¡Estamos sufriendo un ataque nuclear en 8 Bits!

  1. Aleatoriamente crea un misil que descienda del cielo a la base de la página. Tendrás 3 carriles verticales donde colocarlo.
  2. Si se pulsa sobre él, debe desaparecer (evento click).
  3. Si colisiona con el suelo se destruirá la base (evento animationend).
  4. Cuando no queden bases se perderá.
  5. Al destruir 10 misiles, se ganará.

Ejercicio 7-16

Actividad 8-1 (Elefantes que se balanceaban)

En un input indica cuantos elefantes quieres en tu canción. Si, por ejemplo, indicas que quieres 3; se generarán 3 párrafos con la siguiente estructura.

<p>1 elefante se balanceaba Sobre la tela de una araña Como veía que no se caía Fue a buscar otro elefante</p>
<p>2 elefante se balanceaba Sobre la tela de una araña Como veía que no se caía Fue a buscar otro elefante</p>
<p>3 elefante se balanceaba Sobre la tela de una araña Como veía que no se caía Fue a buscar otro elefante</p>

Actividad 8-2 (Autogenerando selects)

Crea los siguientes <select> con sus respectivos <option> usando bucles.

  • Los números de los meses: de 1 al 12.
  • Los días de un mes, por ejemplo del 1 al 31.
  • (PRO) Los años desde 1900 hasta hoy, usando el año actual.
  • (PRO) Los meses en castellano.

Actividad 8-3 (Viaje)

Crea un array con 5 sitios donde hayas viajado. A continuación, imprimelos usando HTML con:

  • for/of
  • forEach
  • for

Actividad 8-4 (Árbol de navidad)

Genera un arbol de navidad usando el emoji ‘🟢’ en HTML. Ayúdate con: text-align: center.

          🟢
        🟢🟢🟢
       🟢🟢🟢🟢🟢
     🟢🟢🟢🟢🟢🟢🟢
   🟢🟢🟢🟢🟢🟢🟢🟢🟢
        🟫🟫🟫
        🟫🟫🟫
  • Con un <select> intercambia la altura. En el ejemplo tiene 5.
  • Añade una estrella en la punta.
  • (PRO) Añade bolas de colores aleatoriamente como si fuera la decoración.

Actividad 9-1 (Lugar secreto)

Crea un formulario para entrar en un lugar secreto llamado: FBI (Federación de Bajitos Irritables).

Añade los campos adecuados y valídalos.

  • Nombre: Obligatorio, solo texto.
  • Contraseña: Obligatoria.

Actividad 9-2 (Vende un producto)

Crea un formulario para publicar un producto de segunda mano.

Añade los campos adecuados y valídalos.

  • Nombre: Obligatorio, solo texto.
  • E-mail: Obligatoria, formato correcto.
  • Precio: Solo número.
  • Aceptar políticas: Obligatorio.

PRO:

Añade otro campo.

  • Imagen: Debe ser una imagen que no supere los 5Mb.

Actividad 10-1 (Componente de regleta)

Diseña un cuadrado con fondo rojo usando el siguiente HTML.

<div data-encendido="true"></div>

Si “data-encendido” es “true”, su fondo será rojo. Si “data-encendido” es “false”, será negro.

Amplia con “data-enchufes”.

<div data-encendido="true" data-enchufes="6"></div>

Genera dentro de la etiqueta x circulos dependiendo de data-enchufes. Con un <div> usando border-radius: 50% será suficiente, aunque puedes usar imágenes.

Actividad 12-1 (¿Si o no?)

Usa el siguiente API https://yesno.wtf/ para cuando se pulse un botón nos responda con un Si o No.

  • PRO: Muestra el gif.

Actividad 12-2 (Pokedex)

Usa el siguiente API https://pokeapi.co/api/v2/pokemon/ con el objetivo de mostrar todos los Pokemons en una tabla.

Actividad 12-3 (Buscador de Wikipedia)

A partir del siguiente URL intenta generar un buscador de Wikipedia.

https://es.wikipedia.org/w/api.php?action=query&list=search&srsearch=Nelson%20Mandela&utf8=&format=json

Actividad 12-4 (Fake Blog)

A partir del API de jsonplaceholder, crea un blog usando los endpoints:

  • /posts
  • /posts/1
  • /posts/1/comments

PRO: Pagina los posts de 5 en 5. PRO: Crea un scroll infinito en lugar de usar un botón. ¡Pista Usa IntersectionObserver!

Actividad 12-5 (¿Hoy va a llover?)

A partir del API de Openweathermap, muestrame en HTML si hoy va a llover.

https://openweathermap.org/api

Actividad 12-6 (Juega)

Usa una de las siguientes APIs para crear cualquier cosa. Eres libre.

https://giphy.com/
https://developer.marvel.com/
https://developer.edamam.com/
https://textdb.dev/
http://jservice.io/
https://rickandmortyapi.com/
http://avatars.adorable.io/
https://api.duckduckgo.com/?q=andros&format=json&pretty=1&no_redirect=1
https://newsapi.org/s/el-mundo-api
https://hncynic.leod.org/gen?title=java
https://unsplash.com/developers
https://api.got.show/doc/
https://github.com/javichur/geojson-arquitectura-valencia
https://raw.githubusercontent.com/javichur/geojson-arquitectura-valencia/master/arquitecturavalencia.geojson

Actividad 13-1 (Avisos importantes)

Crea un input de texto para enviar notificaciones a todos los que estén conectados. Utiliza el servidor de ejemplo de la lección.

PRO: Añade un sonido de alerta.

Ejercicio 13-1

Actividad 13-2 (Chat)

Construye un sencillo y liviano Chat. Utiliza el servidor de ejemplo de la lección.

PRO: Lamentablemente cuando refrescamos la página se pierden los mensajes. Soluciona el problema almacenando cada mensaje en un API y obteniendo todos al entrar.

Ejercicio 13-2

Actividad 13-3 (3 en raya)

Programa un juego de 3 en raya para jugar con un amigo en remoto. Utiliza el servidor de ejemplo de la lección.

¿Te ayudo?

  • 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
  • 2 cafés: Respondo a una duda en los comentarios.
  • 4 cafés: Te corrijo una actividad y te envío feedback.
Comprame un café

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario