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 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.
¿Te ha gustado? 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