Categoría: JavaScript

Tenemos 100 botones con los números del 1 al 100 y hay que pulsarlos correlativamente:

https://www.microsiervos.com/archivo/juegos-y-diversion/del-1-al-100-juego-numeros.html

¿Seríamos capaz de hacer algo parecido?

Modificaciones:

1.- Que la cantidad de botones la pueda elegir el usuario mediante un input
Cantidad:[___] [Empezar]

2.- Que para crear el array desordenado tengamos una función que lo haga function arrayDesordenado(cantidad)-> [4,2,6,1,3,5]

3.- Que para crear el botón tengamos otra función crearBoton(texto)–> Nos devuelva el botón con el texto que le pasemos

<div id="contenedor" class="container ">
		<button id="empezar" class="btn btn-primary">Empezar</button>
		<div id="tablero">
		</div>
		<script src="js/test.js"></script>
	</div>

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

let numeroAPulsar
const maximo = 30

function empezar () {
  numeroAPulsar = 1
  const tablero = document.getElementById('tablero')
  tablero.innerHTML = ''
  // Creo un array de números del 1 al 20
  // Y luego lo desordeno
  const numeros = []
  for (let i = 0; i < maximo; i++) {
    numeros.push(i + 1)
  }
  for (let i = 0; i < 10; i++) {
    numeros.sort(function (a, b) { return 0.5 - Math.random() })
  }
  for (let i = 0; i < maximo; i++) {
  // Crear un botón
    const boton = document.createElement('button')
    boton.innerHTML = numeros[i]
    boton.className = 'btn btn-success m-1'
    boton.addEventListener('click', pulsado)
    tablero.appendChild(boton)
  }
}

function pulsado () {
  const numeroPulsado = parseFloat(this.innerHTML)
  if (numeroAPulsar == numeroPulsado) {
    this.disabled = 'true'
    this.className = 'btn m-1'
    this.style.color = 'red'
    numeroAPulsar++
    if (numeroAPulsar > maximo) {
      alert('Has ganado ¡BRAVO!')
      document.getElementById('tablero').innerHTML = ''
    }
  } else {
    alert('Has perdido ¡JAJAJAJA!')
    document.getElementById('tablero').innerHTML = ''
  }
}

Mejorándolo un poco y comentando:

	<div id="contenedor" class="container ">
		<label for="cantidad">Introduzca la cantidad de botones</label>
		<input id="cantidad" type="number">
		<button id="empezar" class="btn btn-primary">Empezar</button>
		<div id="tablero">
		</div>
		<script src="js/test.js"></script>
	</div>

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

let numeroAPulsar
let maximo = 30

function empezar () {
  // El máximo nos lo pone el usuario en el input cantidad
  maximo = parseFloat(document.getElementById('cantidad').value)
  // Primero hay que pulsar el 1. Como aquí comenzamos empezamos por el principio
  numeroAPulsar = 1
  // Me guardo el tablero para no tener que estar repitiendo el documeng.getElementById
  const tablero = document.getElementById('tablero')
  // Vacío el tablero porque estoy empezando
  tablero.innerHTML = ''
  // LLamo a la función arrayDesordenado para obtener un array desordenado
  // ¿Cuántos elementos? Los que me ha dado el usuario y que los he guardado en maximo
  const numeros = arrayDesordenado(maximo)
  // Añado tantos botones como me haya dicho el usuario (maximo)
  for (let i = 0; i < maximo; i++) {
  // Crear un botón llamando a la función y le paso el texto que quiero que tenga
  // En este caso el elemento del array para que los botones salgan desordenados
    const boton = crearBoton(numeros[i])
    // Y lo añado al tablero
    tablero.appendChild(boton)
  }
}

function crearBoton (texto) {
  // Creo el elemento
  const boton = document.createElement('button')
  // Le pongo como texto lo que me pasen como parámetro
  boton.innerHTML = texto
  // Le añado una clase para hacer bonito
  boton.className = 'btn btn-success m-1'
  // Capturo el evento click para que cuando pulsen el botón comprobemos
  // SI el usuario va bien o ha perdido
  boton.addEventListener('click', pulsado)
  // Devuelvo el botón
  return boton
}

function arrayDesordenado (cantidad) {
  // Creo un array de números del 1 a cantidad
  const numeros = []
  for (let i = 0; i < cantidad; i++) {
    numeros.push(i + 1)
  }
  // Desordeno el array
  for (let i = 0; i < 10; i++) {
    numeros.sort(function (a, b) { return 0.5 - Math.random() })
  }
  // Devuelvo el array
  return numeros
}

function pulsado () {
  // Miro cual es el número que me han pulsado (el texto del botón)
  const numeroPulsado = parseFloat(this.innerHTML)
  if (numeroAPulsar == numeroPulsado) {
  // Si el número pulsado es el que se tenía que pulsar
    // Deshabilito el botón
    this.disabled = 'true'
    // Le cambio la clase
    this.className = 'btn m-1'
    // Le pongo color rojo
    this.style.color = 'red'
    // El número a pulsar es uno más
    numeroAPulsar++
    // SI ya hemos pulsado todos los números el usuario ha ganado
    if (numeroAPulsar > maximo) {
      alert('Has ganado ¡BRAVO!')
      document.getElementById('tablero').innerHTML = ''
    }
  } else {
    // Si el número no es el que se tenía que pulsar el usuario ha perdido
    alert('Has perdido ¡JAJAJAJA!')
    document.getElementById('tablero').innerHTML = ''
  }
}

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
}