Trifulcas

Vamos a crear una web que nos pida dos números y nos muestre en un h1 la suma entre el primero y el último.

Numero1: [___] NUmero2: [____]
[Calcular]
La suma es…

Hacedlo con el evento click del botón pero podéis probar a hacerlo con el change de los inputs.

	<div id="contenedor" class="container ">
		<div class="form-group">
			<label for="num1">Número 1:</label>
			<input type="text" class="form-control" maxlength="10" id="num1" placeholder="Introduce un número">
			<p id="mensaje"></p>
			<label for="num2">Número 2:</label>
			<input type="text" class="form-control" id="num2" placeholder="Introduce un número">
		</div>

		<button id="sumar">Sumar</button>
		<div id="resultados">
		</div>
		<script src="js/test.js"></script>
	</div>

// Capturo el evento click del botón
document.getElementById('sumar').addEventListener('click', sumar)

// Capturo el evento change de los inputs
document.getElementById('num1').addEventListener('change', sumar)
document.getElementById('num2').addEventListener('change', sumar)

// Capturo el evento keyup
document.getElementById('num1').addEventListener('keyup', comprobar)

function sumar () {
  // Recupero los valores de los números
  const num1 = parseFloat(document.getElementById('num1').value)
  const num2 = parseFloat(document.getElementById('num2').value)
  // Los sumo
  const suma = num1 + num2
  // Si el resultado es un número, o lo que es lo mismo 'no es cierto que no es un número'
  if (!isNaN(suma)) {
    // Creo un párrafo
    const parrafo = document.createElement('p')
    // Le pongo un texto
    parrafo.innerHTML = 'El resultado es: ' + suma
    // Lo añado al div 'resultados'
    document.getElementById('resultados').appendChild(parrafo)
  }
}

function comprobar () {
  const cadena = document.getElementById('num1').value
  if (cadena.length == 10) {
    document.getElementById('mensaje').innerHTML = 'No puedes escribir más'
  } else {
    document.getElementById('mensaje').innerHTML = ''
  }
}

Vamos a tener una web que nos va a preguntar cuantos nombres queremos introducir. Al darle al botón generar nos creará tantos inputs como nos haya dicho el usario.
Pista: document.createElement(‘input’)

	<div id="contenedor" class="container ">
		<div class="form-group">
			<label for="cadena">¿Cuántos nombres vas a introducir?:</label>
			<input type="text" class="form-control" id="cantidad" placeholder="Introduce un número">
		</div>
		<button id="normalizar">Normalizar</button>
		<script src="js/test.js"></script>
	</div>

document.getElementById('normalizar').addEventListener('click', procesar)

function procesar () {
  // Recupero la cantidad introducida
  const cantidad = parseFloat(document.getElementById('cantidad').value)
  // Recupero el contenedor
  const contenedor = document.getElementById('contenedor')
  // Hago un bucle por el número de veces introducido
  for (let i = 0; i < cantidad; i++) {
    // Creo un div para agrupar los dos elementos
    const elemento = document.createElement('div')
    // Un párrafo como etiqueta
    const parrafo = document.createElement('p')
    parrafo.innerHTML = 'Nombre ' + (i + 1) + ':'
    // Y el input
    const miInput = document.createElement('input')
    // Añado un evento para que veáis que se puede hacer
    miInput.addEventListener('change', mostrar)
    // Añado el párrafo y el input al div
    elemento.appendChild(parrafo)
    elemento.appendChild(miInput)
    // Añado el div al contenedor
    contenedor.appendChild(elemento)
  }
}

function mostrar () {
  console.log(this.value)
}

// Selecciono el contenedor
const contenedor = document.querySelector('.container')
console.log('Contenedor')
console.log(contenedor)
// El primer hijo que es un elemento (no texto)
const primer_hijo = contenedor.firstElementChild
console.log('Primer hijo')
console.log(primer_hijo)

// El úlitmo hijo que es un elemento (no texto)
const ultimo_hijo = contenedor.lastElementChild
console.log('Último  hijo')
console.log(ultimo_hijo)

// Los hijos
const hijos = contenedor.children

// Recorriendo los hijos
for (let i = 0; i < hijos.length; i++) {
  console.log('Hijo en posición ' + i)
  console.log(hijos[i])
}

// Cogemos el segundo hijo
const boton = hijos[1]

// El hermano de después
const hermano_despues = boton.nextElementSibling
console.log('Hermano después')
console.log(hermano_despues)
// El hermano de antes
const hermano_antes = boton.previousElementSibling
console.log('Hermano anterior')
console.log(hermano_antes)

Vamos a crear una web con un input para introducir una cadena y un botón normalizar.
Cuando le demos al botón en un texto aparte vamos a mostrar la cadena normalizada utilizando la función que hemos visto a primera hora de la mañana de normalizar.

Pasos a dar:

Crear el HTML (Mínimo un input, un button y un h1 para mostrar)
En JS:
Añadir la función normalizar (copiada de trifulcas)

Añadir al botón evento click -> llamamos a la función normalizar? NO. Llamamos a una función que se
encargue de recuperar la cadena,llamar a la función normalizar y mostrar el valor
function procesar()–>
1.- Recuperar el valor que nos han introducido en el input
2.- Llamar a la función normalizar con ese valor
3.- El resultado ponerlo en el HTML

<div class="container ">

		<div class="form-group">
			<label for="cadena">Cadena:</label>
			<input type="text" class="form-control" id="cadena" placeholder="Introduce una cadena">
		</div>
		<button id="normalizar">Normalizar</button>
		<h1 id="texto"></h1>

		<script src="js/test.js"></script>
	</div>

// Añado el evento click al botón, llamando a procesar
document.getElementById('normalizar').addEventListener('click', procesar)

// Esta función se encarga de hacer de intermediario entre el HTML
// Y los cálculos que yo necesito
function procesar () {
  // Recupero el valor
  const cadena = document.getElementById('cadena').value
  // Hago el cálculo
  const resultado = normalizar(cadena)
  // Muestro el valor
  document.getElementById('texto').innerHTML = resultado
}

// Recupero la función normalizar de un ejercicio anterior
function normalizar (direccion) {
  const cod = ['cp', 'c.p.']
  for (const v of cod) {
    const pos = direccion.indexOf(v)
    if (pos > -1) {
      direccion = direccion.slice(0, pos)
    }
  }
  return direccion.trim()
}

<div class="container ">

		<div class="form-group">
			<label for="cadena">Cadena:</label>
			<input type="text" class="form-control" id="cadena" placeholder="Introduce una cadena">
		</div>

		<h1 id="texto"></h1>

		<script src="js/test.js"></script>
	</div>

document.getElementById('cadena').addEventListener('change', comprobar)

function comprobar () {
  const cadena = document.getElementById('cadena').value

//Uso el operador ternario para que veais un ejemplo de como funciona
  document.getElementById('texto').innerHTML = palindromo(cadena) ? 'Es palíndromo' : 'No es palíndromo'
}

function palindromo (cadena) {
  cadena = cadena.replace(/ /g, '').toLowerCase()
  const invertida = cadena.split('').reverse().join('')
  return cadena == invertida
}

	<div class="container ">
		<img src="img/gato1.jpg" id="gato" width="300">
		<div class="form-group">
			<label for="cadena">Nombre:</label>
			<input type="text" class="form-control" id="cadena">
		</div>

		<h1 id="texto">Esto es un texto</h1>
		<button type="button" class="btn btn-success" id="anadir">Añadir</button>
		<button type="button" class="btn btn-success" id="contar">Contar</button>

		<script src="js/test.js"></script>
	</div>

// Cuando tengamos el ratón encima de la imagen pon el gato2
document.getElementById('gato').addEventListener('mouseenter', ponGato)
// Cuando tengamos el ratón fuera de la imagen pon el gato1
document.getElementById('gato').addEventListener('mouseleave', ponGato2)

function ponGato () {
  document.getElementById('gato').src = 'img/gato2.jpg'
}
function ponGato2 () {
  document.getElementById('gato').src = 'img/gato1.jpg'
}

document.getElementById('cadena').addEventListener('change', invertir)

function invertir () {
  let cadena = document.getElementById('cadena').value
  cadena = cadena.split('').reverse().join('')
  document.getElementById('texto').innerHTML = cadena
}

document.getElementById('anadir').addEventListener('click', anadir)

function anadir () {
  const cadena = document.getElementById('cadena').value
  document.getElementById('texto').innerHTML += cadena
}

document.getElementById('contar').addEventListener('dblclick', contar)

function contar () {
  const cadena = document.getElementById('cadena').value
  document.getElementById('texto').innerHTML = cadena.length
}

/*

1.- Pensar: buscar la manera de resolver el problema.
Si no tenemos una dirección no nos pongamos a andar

2.- Estoy pensando y no se me ocurre nada ¿Qué hago?
Divide y vencerás: Todo problema grande se componde problemas pequeños.
Intento dividir el problema en partes

3.- ¿Cómo lo haría yo? Busco MI algoritmo (mi manera de resolver el problema)
Y miro si me da una pista de cómo decirle al ordenador que lo resuelva

Dado un número saber si es capicua. EJ: 2002 es capicua 2020 no es capicua
¿Como sé si un número es capicua?
Definición que es igual de alante atrás que de atrás alante
Si el número y el número invertido son iguales es capicua y si no no
¿Se yo invertir una cadena?
Buscando en internet lo he conseguido:
cadena.split('').reverse().join('')

let cadena='hola que tal'
let res=''
for(let i=cadena.length-1;i>=0;i--){
  res+=cadena.substring(i,1)
}

let res=''
for(let i=0;i<cadena.length;i++){
  res=cadena.substring(i,1)+res
}
res tengo la cadena invertida
*/
function capicua (numero) {
  const invertido = numero.split('').reverse().join('')
  if (invertido == numero) {
    return true
  } else {
    return false
  }
}
function capicuaShort (numero) {
  const invertido = numero.split('').reverse().join('')
  return (invertido == numero)
}

/*
SI una frase es capicua o palíndromo

ej: 'isaac no ronca asi'

Lo mismo que antes pero quitando espacios
¿Se quitar espacios? .replace('/ /g,'')

*/
function palindromo (cadena) {
  // Quito los espacios y lo paso a minúsculas
  cadena = cadena.replace(/ /g, '').toLowerCase()
  // Invierto la cadena con el truco de internet que es
  // Pasar a array cada caracter, darle la vuelta y volver a juntar
  const invertida = cadena.split('').reverse().join('')
  // Devuelvo directamente la igualdad: si son iguales devuelvo true y si no false
  return cadena == invertida
}

/*
1.- Una función catalunya a la que le pasamos un código postal y nos devuelva true si el código postal pertenece a una provincia de Catalunya y false en caso contrario. catalunya(‘08001’)->true catalunya(‘26005’)->false
Pista: mirad a ver si hay algua función en JS ya hecha que nos diga si una cadena empieza con algo

2.- Una función normalizar a la que le pasamos una cadena que contiene una dirección
y nos busque si dentro de la dirección hay un código postal y si es así, nos lo elimine. Ejemplos:
normalizar(‘C/Balmes, 145′)->’C/Balmes, 145’
normalizar(‘C/Balmes, 145 cp 08012 Barcelona’)->’C/Balmes, 145′
normalizar(‘C/Balmes, 145 c.p. 08012′)->’C/Balmes, 145’
Solo buscamos las cadenas cp y c.p.

3.- Una función media que dada una frase me diga la longitud media de las palabras.
media(‘hola tú’)->3
La media es la suma de las longitudes dividida por el número de palabras
Pista: Recordad que con split partimos una cadena en elementos de array

4.- Una función vocales que nos diga las vocales que hay en una cadena.
Ej: vocales(‘hola que tal’)->5 vocales(‘miedo’)->3
No tengáis en cuenta acentos, pero no los pongáis en las pruebas
Pista: Yo crearía una función que me cuente cuantas veces aparece una cadena
dentro de otra
*/

function catalunya (codigo) {
  if (codigo.startsWith('08') ||
  codigo.startsWith('17') ||
  codigo.startsWith('25') ||
  codigo.startsWith('43')
  ) {
    return true
  } else {
    return false
  }
}

function catalunyaShort (codigo) {
  return (codigo.startsWith('08') ||
  codigo.startsWith('17') ||
  codigo.startsWith('25') ||
  codigo.startsWith('43')
  )
}

function catalunya2 (codigo) {
  const comienzo = codigo.slice(0, 2)
  if (comienzo == '08' ||
  comienzo == '17' ||
  comienzo == '25' ||
  comienzo == '43'
  ) {
    return true
  } else {
    return false
  }
}
function catalunya3 (codigo) {
  const cat = ['08', '17', '25', '43']
  for (const v of cat) {
    if (codigo.startsWith(v)) {
      return true
    }
  }
  return false
}
function catalunya4 (codigo) {
  const cat = ['08', '17', '25', '43']
  const comienzo = codigo.slice(0, 2)
  for (const v of cat) {
    if (comienzo == v) {
      return true
    }
  }
  return false
}

function normalizar (direccion) {
  let pos = direccion.indexOf('cp')
  if (pos > -1) {
    // Quitar de la cadena todo lo que hay después de la posición
    // Coger la cadena desde la posición 0 hasta la posición que ha encontrado
    direccion = direccion.slice(0, pos)
  }
  pos = direccion.indexOf('c.p.')
  if (pos > -1) {
    // Quitar de la cadena todo lo que hay después de la posición
    // Coger la cadena desde la posición 0 hasta la posición que ha encontrado
    direccion = direccion.slice(0, pos)
  }
  return direccion.trim()
}

function normalizar2 (direccion) {
  const cod = ['cp', 'c.p.']
  for (const v of cod) {
    const pos = direccion.indexOf(v)
    if (pos > -1) {
      // Quitar de la cadena todo lo que hay después de la posición
      // Coger la cadena desde la posición 0 hasta la posición que ha encontrado
      direccion = direccion.slice(0, pos)
    }
  }
  return direccion.trim()
}

function media (cadena) {
  const palabras = cadena.split(' ')
  let totalLongitud = 0
  for (let i = 0; i < palabras.length; i++) {
    totalLongitud += palabras[i].length
  }
  return totalLongitud / palabras.length
}

function media2 (cadena) {
  const sinEspacios = cadena.replace(/ /g, '')
  return sinEspacios.length / (cadena.length - sinEspacios.length + 1)
}

function vocales (cadena) {
  return apariciones(cadena, 'a') + apariciones(cadena, 'e') +
  apariciones(cadena, 'i') + apariciones(cadena, 'o') + apariciones(cadena, 'u')
}

function vocales2 (cadena) {
  const vocal = ['a', 'e', 'i', 'o', 'u']
  total = 0
  for (const v of vocal) {
    total += apariciones(cadena, v)
  }
  return total
}

function apariciones (cadena, buscar) {
  let cont = 0
  let pos = cadena.indexOf(buscar)
  while (pos > -1) {
    cont++
    pos = cadena.indexOf(buscar, pos + 1)
  }
  return cont
}