APLICACIONES CON JAVASCRIPT

GUIÍA DOMINA JAVASCRIPT

GUÍA JAVASCRIPT

EJERCICIOS Y EJEMPLOS PRÁCTICOS

LA MEJOR MANERA DE APRENDER ES HACIENDO PROYECTOS REALES 

ENVIO DE MAIL Y VALIDACION CON JAVASCRIPT

CODIFICACIÓN
HTML

<!DOCTYPE html>
<html>
<head>
<link href=»https://fonts.googleapis.com/icon?family=Material+Icons» rel=»stylesheet»>
<link href=»https://fonts.googleapis.com/css?family=Raleway:100,300″ rel=»stylesheet»>
<link type=»text/css» rel=»stylesheet» href=»css/tailwind.min.css» media=»screen,projection»/>
<link rel=»stylesheet» href=»css/custom.css»>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″/>
<title>Enviar Email</title>
</head>
<body>

<div class=»container mx-auto mt-20 bg-white»>
<header id=»header» class=»bg-pink-800 p-3 font-bold»>
Enviar Nuevo Mail
</header>

 

<form id=»enviar-mail» class=»py-10 px-5 max-w-lg mx-auto»>
<div class=»mb-10″>
<label for=»email»>Para:</label>
<input class=»bg-gray-100 border shadow p-3 w-full» id=»email» type=»email»>
</div>
<div class=»mb-10″>
<label for=»asunto»>Asunto</label>
<input class=»bg-gray-100 border shadow p-3 w-full» id=»asunto» type=»text»>
</div>
<div class=»mb-10″>
<label for=»mensaje»>Mensaje</label>
<textarea class=»bg-gray-100 border shadow p-3 w-full» id=»mensaje»></textarea>
</div>

<div id=»spinner»>
<div class=»sk-chase»>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
<div class=»sk-chase-dot»></div>
</div>
</div>

<div class=»flex justify-between»>
<button
id=»enviar» class=»w-full bg-blue-600 px-2 py-5 text-white items-center mr-5 uppercase font-bold items-center flex justify-center»
type=»submit»
>Enviar
<i class=»material-icons right text-white ml-3″>send</i>
</button>

<button
id=»resetBtn»
class=»w-full bg-green-600 px-2 py-5 text-white items-center uppercase font-bold items-center flex justify-center»
type=»button»
>Resetear Form
<i class=»material-icons right ml-3″>delete</i>
</button>
</div>
</form>
</div>

<script src=»js/app.js»></script>
</body>
</html>

Javascript

// Variables
const btnEnviar = document.querySelector(‘#enviar’);
const btnReset = document.querySelector(‘#resetBtn’);
const formulario = document.querySelector(‘#enviar-mail’);

// Variables para campos
const email = document.querySelector(‘#email’);
const asunto = document.querySelector(‘#asunto’);
const mensaje = document.querySelector(‘#mensaje’);

const er = /^(([^<>()\[\]\\.,;:\s@»]+(\.[^<>()\[\]\\.,;:\s@»]+)*)|(«.+»))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

eventListeners();
function eventListeners() {
// Cuando la app arranca
document.addEventListener(‘DOMContentLoaded’, iniciarApp);

// Campos del formulario
email.addEventListener(‘blur’, validarFormulario);
asunto.addEventListener(‘blur’, validarFormulario);
mensaje.addEventListener(‘blur’, validarFormulario);

// Reinicia el formulario
btnReset.addEventListener(‘click’, resetearFormulario);

// Enviar email
formulario.addEventListener(‘submit’, enviarEmail);
}

 

 

// Funciones
function iniciarApp() {
btnEnviar.disabled = true;
btnEnviar.classList.add(‘cursor-not-allowed’, ‘opacity-50’)
}

// Valida el formulario
function validarFormulario(e) {

 

if(e.target.value.length > 0 ) {

// Elimina los errores…
const error = document.querySelector(‘p.error’);
if(error) {
error.remove();
}

e.target.classList.remove(‘border’, ‘border-red-500’);
e.target.classList.add(‘border’, ‘border-green-500’);
} else {
e.target.classList.remove(‘border’, ‘border-green-500’);
e.target.classList.add(‘border’, ‘border-red-500’);
mostrarError(‘Todos los campos son obligatorios’);
}

if(e.target.type === ‘email’) {
if( er.test( e.target.value ) ) {
// Elimina los errores…
const error = document.querySelector(‘p.error’);
if(error) {
error.remove();
}

e.target.classList.remove(‘border’, ‘border-red-500’);
e.target.classList.add(‘border’, ‘border-green-500’);
} else {
e.target.classList.remove(‘border’, ‘border-green-500’);
e.target.classList.add(‘border’, ‘border-red-500’);
mostrarError(‘Email no válido’);
}
}

 

if( er.test( email.value ) && asunto.value !== » && mensaje.value !== ») {
btnEnviar.disabled = false;
btnEnviar.classList.remove(‘cursor-not-allowed’, ‘opacity-50’)
}
}

function mostrarError(mensaje) {
const mensajeError = document.createElement(‘p’);
mensajeError.textContent = mensaje;
mensajeError.classList.add(‘border’, ‘border-red-500’, ‘background-red-100’, ‘text-red-500’, ‘p-3’, ‘mt-5’, ‘text-center’, ‘error’);

const errores = document.querySelectorAll(‘.error’);
if(errores.length === 0) {
formulario.appendChild(mensajeError);
}

}

 

// Envia el email
function enviarEmail(e) {
e.preventDefault();

// Mostrar el spinner
const spinner = document.querySelector(‘#spinner’);
spinner.style.display = ‘flex’;

 

// Después de 3 segundos ocultar el spinner y mostrar el mensaje
setTimeout( () => {
spinner.style.display = ‘none’;

// Mensaje que dice que se envió correctamente
const parrafo = document.createElement(‘p’);
parrafo.textContent = ‘El mensaje se envió correctamente’;
parrafo.classList.add(‘text-center’, ‘my-10’, ‘p-2’, ‘bg-green-500’, ‘text-white’, ‘font-bold’, ‘uppercase’)

// Inserta el parrafo antes del spinner
formulario.insertBefore(parrafo, spinner);

setTimeout(() => {
parrafo.remove(); // Eliminar el mensaje de éxito

resetearFormulario();
}, 5000);
}, 3000 );
}

// Función que resetea el formulario
function resetearFormulario() {
formulario.reset();

iniciarApp();
}

API COTIZADOR DE CRYPTONOMEDAS CON JAVASCRIPT

CODIFICACIÓN
HTML

<!DOCTYPE html>
<html lang=»en»>
<head>
<meta charset=»UTF-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Cotizar Criptomonedas</title>
<link rel=»stylesheet» href=»css/normalize.css»>
<link rel=»stylesheet» href=»css/skeleton.css»>
<link rel=»stylesheet» href=»css/app.css»>
</head>
<body>

<div class=»container»>
<div class=»row»>
<div class=»one-half column»>
<img src=»img/cryptomonedas.png»>
</div>
<div class=»one-half column»>
<form id=»formulario»>
<div class=»row»>
<label>Elige tu Moneda</label>
<select
class=»u-full-width»
id=»moneda»
name=»moneda»
>
<option value=»»>Elige tu moneda</option>
<option value=»USD»>Dolar Estadounidense</option>
<option value=»MXN»>Peso Mexicano</option>
<option value=»GBP»>Libras</option>
<option value=»EUR»>Euros</option>
</select>
</div>

<div class=»row»>
<div>
<label>Elige tu Criptomoneda</label>
<select
class=»u-full-width»
id=»criptomonedas»
name=»criptomoneda»
>
<option value=»» disabled selected>Elige tu criptomoneda</option>
</select>
</div>
</div>
<input class=»button-primary u-full-width» type=»submit» value=»Cotizar» />

<div id=»resultado» class=»resultado»></div>
</form>
</div>
</div>
</div>

<script src=»js/app.js»></script>

</body>
</html>

Javascript

const criptomonedasSelect = document.querySelector(‘#criptomonedas’);
const monedaSelect = document.querySelector(‘#moneda’);
const formulario = document.querySelector(‘#formulario’);
const resultado = document.querySelector(‘#resultado’);

const objBusqueda = {
moneda: »,
criptomoneda : »
}

// Crear un Promise
const obtenerCriptomonedas = criptomonedas => new Promise( resolve => {
resolve(criptomonedas);
});

document.addEventListener(‘DOMContentLoaded’, () => {
consultarCriptomonedas();

formulario.addEventListener(‘submit’, submitFormulario);

criptomonedasSelect.addEventListener(‘change’, leerValor);
monedaSelect.addEventListener(‘change’, leerValor);
})

function consultarCriptomonedas() {
const url = ‘https://min-api.cryptocompare.com/data/top/mktcapfull?limit=10&tsym=USD’;

fetch(url)
.then( respuesta => respuesta.json() )
.then( resultado => obtenerCriptomonedas(resultado.Data))
.then( criptomonedas => selectCriptomonedas(criptomonedas) )
}

function selectCriptomonedas(criptomonedas) {
criptomonedas.forEach( cripto => {
const { FullName, Name } = cripto.CoinInfo;

const option = document.createElement(‘option’);
option.value = Name;
option.textContent = FullName;
criptomonedasSelect.appendChild(option);
})
}

function leerValor(e) {
objBusqueda[e.target.name] = e.target.value;
}

function submitFormulario(e) {
e.preventDefault();

// validar
const { moneda, criptomoneda } = objBusqueda;

if(moneda === » || criptomoneda === » ) {
mostrarAlerta(‘Ambos campos son obligatorios’);
return;
}

// Consultar la API con los resultados
consultarAPI();

}

function mostrarAlerta(msg) {

const existeError = document.querySelector(‘.error’);

if(!existeError) {
const divMensaje = document.createElement(‘div’);
divMensaje.classList.add(‘error’);

// mensaje de eror
divMensaje.textContent = msg;

formulario.appendChild(divMensaje);

setTimeout(() => {
divMensaje.remove();
}, 3000);
}
}

function consultarAPI() {
const { moneda, criptomoneda } = objBusqueda;

const url = `https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${criptomoneda}&tsyms=${moneda}`;

mostrarSpinner();

fetch(url)
.then( respuesta => respuesta.json())
.then( cotizacion => {
mostrarCotizacionHTML(cotizacion.DISPLAY[criptomoneda][moneda]);
})
}

function mostrarCotizacionHTML(cotizacion) {

limpiarHTML();

const { PRICE, HIGHDAY, LOWDAY, CHANGEPCT24HOUR, LASTUPDATE} = cotizacion;

const precio = document.createElement(‘p’);
precio.classList.add(‘precio’);
precio.innerHTML = `El Precio es: <span>${PRICE}</span>`;

const precioAlto = document.createElement(‘p’);
precioAlto.innerHTML = `<p>Precio más alto del día <span>${HIGHDAY}</span>`;

const precioBajo = document.createElement(‘p’);
precioBajo.innerHTML = `<p>Precio más bajo del día <span>${LOWDAY}</span>`;

const ultimasHoras = document.createElement(‘p’);
ultimasHoras.innerHTML = `<p>Variación últimas 24 horas <span>${CHANGEPCT24HOUR}%</span>`;

const ultimaActualización = document.createElement(‘p’);
ultimaActualización.innerHTML = `<p>Última Actualización <span>${LASTUPDATE}</span>`;

 

resultado.appendChild(precio);
resultado.appendChild(precioAlto);
resultado.appendChild(precioBajo);
resultado.appendChild(ultimasHoras);
resultado.appendChild(ultimaActualización);
}

 

function limpiarHTML() {
while(resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}
}

function mostrarSpinner() {
limpiarHTML();

const spinner = document.createElement(‘div’);
spinner.classList.add(‘spinner’);

spinner.innerHTML = `
<div class=»bounce1″></div>
<div class=»bounce2″></div>
<div class=»bounce3″></div>
`;

resultado.appendChild(spinner);
}

API BUSCADOR DE TRABAJOS CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Github Jobs</title>
<link rel="stylesheet" href="css/tailwind.css">
</head>
<body class="bg-gray-200">

<h1 class="mt-10 text-center text-4xl font-bold">Buscador Github Jobs</h1>

<form id="formulario" class="bg-teal-500 max-w-lg mx-auto mt-10 rounded p-6">
<div>
<input
type="text"
class="w-full p-3 rounded placeholder-gray-900 "
id="busqueda"
placeholder="Búsqueda por tecnología: ej. Node.js Java o C#"
>

<input
type="submit"
value="Buscar Vacantes"
class="bg-gray-800 text-white font-bold w-full uppercase mt-5 p-3 hover:bg-gray-700 cursor-pointer"
>

</div>
</form>

<div id="resultado" class="mt-10 container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start">

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js" integrity="sha512-VZ6m0F78+yo3sbu48gElK4irv2dzPoep8oo9LEjxviigcnnnNvnTOJRSrIhuFk68FMLOpiNz+T77nNY89rnWDg==" crossorigin="anonymous"></script>
<script src="js/app.js"></script>

</body>
</html>

Javascript

const formulario = document.querySelector(‘#formulario’);
const resultado = document.querySelector(‘#resultado’);

 

document.addEventListener(‘DOMContentLoaded’, () => {
formulario.addEventListener(‘submit’, validarBusqueda);
})

function validarBusqueda(e) {
e.preventDefault();

const busqueda = document.querySelector(‘#busqueda’).value;

if(busqueda.length < 3) {
mostrarMensaje(‘Búsqueda muy corta… Añade más información’);
return;
}

consultarAPI(busqueda);
}

function consultarAPI(busqueda) {
const githubUrl = `https://jobs.github.com/positions.json?search=${busqueda}`;
const url = `https://api.allorigins.win/get?url=${ encodeURIComponent(githubUrl) }`;

axios.get(url)
.then( respuesta => mostrarVacantes(JSON.parse( respuesta.data.contents)) );
}

function mostrarMensaje(msg) {
const alertaPrevia = document.querySelector(‘.alerta’);

if(!alertaPrevia) {
const alerta = document.createElement(‘div’);
alerta.classList.add(‘bg-gray-100’, ‘p-3’, ‘text-center’, ‘mt-3’, ‘alerta’);
alerta.textContent = msg;

formulario.appendChild(alerta);

setTimeout(() => {
alerta.remove();
}, 3000);
}

 

}

function mostrarVacantes(vacantes) {
while( resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}

if(vacantes.length > 0 ) {
resultado.classList.add(‘grid’);

vacantes.forEach(vacante => {
const { company, title, type, url } = vacante;

resultado.innerHTML += `
<div class=»shadow bg-white p-6 rounded»>
<h2 class=»text-2xl font-light mb-4″>${title}</h2>
<p class=»font-bold uppercase»>Compañia: <span class=»font-light normal-case»>${company} </span></p>
<p class=»font-bold uppercase»>Tipo de Contrato: <span class=»font-light normal-case»>${type} </span></p>
<a class=»bg-teal-500 max-w-lg mx-auto mt-3 rounded p-2 block uppercase font-xl font-bold text-white text-center» href=»${url}»>Ver Vacante</a>
</div>
`;
});
} else {
const noResultado = document.createElement(‘p’);
noResultado.classList.add(‘text-center’, ‘mt-10’, ‘text-gray-600’, ‘w-full’);
resultado.classList.remove(‘grid’);
noResultado.textContent = ‘No hay vacantes, intenta con otro término de búsqueda’;
resultado.appendChild(noResultado);

}
}

API BUSCADOR DE LETRAS DE CANCIONES CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Buscador de Letras - JSModerno</title>
<link
rel="stylesheet"
href="https://necolas.github.io/normalize.css/8.0.0/normalize.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main id="contenido" class="contenido">
<h1>Letras de Canciones</h1>
<div class="contenedor">
<div id="buscar" class="buscar">
<h2>Búsqueda</h2>
<p>Busca por artista y nombre:</p>
<p><span> * </span>Obligatorio</p>
<form action="#" id="formulario-buscar">
<div class="input">
<label for="artista">Artista: <span>*</span></label>
<input type="text" id="artista" placeholder="Artista" />
</div>
<div class="input">
<label for="cancion">Canción: <span>*</span></label>
<input type="text" id="cancion" placeholder="Nombre Canción" />
</div>

<div class="input enviar">
<input type="submit" value="Buscar" />
</div>
</form>
</div>

<div class="letra-resultado">
<h2></h2>
<div id="resultado"></div>
</div>
<div id="mensajes"></div>
</div>
</main>

<script src="js/app.js" type="module"></script>
</body>
</html>

Javascript

API.JS

import * as UI from «./interfaz.js»;

class API { constructor(artista, cancion) { this.artista = artista; this.cancion = cancion; }

consultarAPI() { console.log(«desde consultar api»);

//const url = `https://private-anon-fe04dde1a6-lyricsovh.apiary-mock.com/v1/${this.artista}/${this.cancion}`;

const url_ = `https://api.lyrics.ovh/v1/${this.artista}/${this.cancion}`; fetch(url_) .then((respuesta) => respuesta.json()) .then((resultado) => { const Lyrics = resultado; let prueba = JSON.stringify(Lyrics); prueba = JSON.parse(prueba);

UI.divResultado.textContent = `<p>${prueba.lyrics} a ver k sale</p>`; UI.headdingResultado.innerHTML = `<h2>LETRA DE LA CANCION DE ${this.artista} </h2> <pre>${prueba.lyrics}</pre>`; console.log(prueba); console.log(prueba.lyrics); }); } } export default API;

//////////////////

APP.JS

import * as UI from «./interfaz.js»;
import API from «./api.js»;

UI.formularioBuscar.addEventListener(«submit», buscarCancion);

function buscarCancion(e) {
e.preventDefault();
//leer formulario

const artista = document.querySelector(«#artista»).value;
const cancion = document.querySelector(«#cancion»).value;

if (artista == «» || cancion == «») {
UI.divMensajes.textContent = «Todos los campos son obligarorios»;
UI.divMensajes.classList.add(«error»);

setTimeout(() => {
UI.divMensajes.textContent = «»;
UI.divMensajes.classList.remove(«error»);
}, 2000);
return;
}

//consultar api
const busqueda = new API(artista, cancion);
busqueda.consultarAPI();
console.log(busqueda);
}

import * as UI from «./interfaz.js»;
import API from «./api.js»;

UI.formularioBuscar.addEventListener(«submit», buscarCancion);

function buscarCancion(e) {
e.preventDefault();
//leer formulario

const artista = document.querySelector(«#artista»).value;
const cancion = document.querySelector(«#cancion»).value;

if (artista == «» || cancion == «») {
UI.divMensajes.textContent = «Todos los campos son obligarorios»;
UI.divMensajes.classList.add(«error»);

setTimeout(() => {
UI.divMensajes.textContent = «»;
UI.divMensajes.classList.remove(«error»);
}, 2000);
return;
}

//consultar api
const busqueda = new API(artista, cancion);
busqueda.consultarAPI();
console.log(busqueda);
}

///////////////
INTERFAZ.JS

//selectores

export const formularioBuscar = document.querySelector(«#formulario-buscar»),
divBuscar = document.querySelector(«#buscar»),
divMensajes = document.querySelector(«#mensajes»),
divResultado = document.querySelector(«#resultado»),
headdingResultado = document.querySelector(«.letra-resultado»);

API VER EL TIEMPO EN TU CIUDADCON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clima - JavaScript Moderno</title>

<link href="css/styles.css" rel="stylesheet">
<link href="css/tailwind.min.css" rel="stylesheet">
</head>
<body>

<div class="container mx-auto ">
<h1 id="titulo" class="text-4xl mt-5 text-white font-bold uppercase text-center">Busca el Clima</h1>
<div class="max-w-lg mx-auto ">

<div class="p-6 mt-10">
<div id="resultado">
<p class="text-center text-white mt-6">Agrega tu ciudad y país, el resultado se mostrará aquí</p>
</div>
</div>

<form id="formulario" class="mt-10 " action="#" method="POST">
<div class="mt-5">
<input
type="text"
name="ciudad"
id="ciudad"
placeholder="Escribe tu Ciudad"
class="w-full p-2 rounded"
/>
</div>
<div class="mt-5">
<select
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="pais"
>
<option disabled selected value="">-- Seleccione --</option>
<option value="AR">Argentina</option>
<option value="CO">Colombia</option>
<option value="CR">Costa Rica</option>
<option value="ES">España</option>
<option value="US">Estados Unidos</option>
<option value="MX">México</option>
<option value="PE">Perú</option>
</select>
</div>

<input
type="submit"
class="mt-5 w-full bg-yellow-500 p-3 uppercase font-bold cursor-pointer rounded"
value="Obtener Clima"
/>

</form>

</div>
</div>

<script src="js/app.js"></script>
</body>
</html>

Javascript

/*
API key:
– Your API key is 3df1a637908a5b6f63ff5228fba76a4e
– Within the next couple of hours, it will be activated and ready to use
– You can later create more API keys on your account page
– Please, always use your API key in each API call

*/

const container = document.querySelector(«.container»);
const resultado = document.querySelector(«#resultado»);
const formulario = document.querySelector(«#formulario»);

window.addEventListener(«load», () => {
formulario.addEventListener(«submit», bucarClima);
});

function bucarClima(e) {
e.preventDefault();

//validar
const ciudad = document.querySelector(«#ciudad»).value;
const pais = document.querySelector(«#pais»).value;

console.log(ciudad);
console.log(pais);
if (ciudad == «» || pais == «») {
mostrarError(«Ambos campos son obligatorios»);
return;
}
// consultar api
cunsultarAPI(ciudad, pais);
console.log(«Buscando el clima…»);
}

function mostrarError(mensaje) {
console.log(mensaje);
const alerta = document.querySelector(«.bg-red-100»);
if (!alerta) {
//crear alerta
const alerta = document.createElement(«div»);
alerta.classList.add(
«bg-red-100»,
«border-red-400»,
«text-red-700»,
«px-4»,
«py-3»,
«rounded»,
«masx-w-md»,
«mx-auto»,
«mt-6»,
«text-center»
);
alerta.innerHTML = `

<strong class=»font-bold»>Error</strong>
<span class=»block»>${mensaje}</span>

`;
container.appendChild(alerta);
// se elimine la alerta despues de unos segundos

setTimeout(() => {
alerta.remove();
}, 1500);
}
}

function cunsultarAPI(ciudad, pais) {
//REQUIERE APIKEY

const appId = «3df1a637908a5b6f63ff5228fba76a4e»;
const url = `https://api.openweathermap.org/data/2.5/weather?q=${ciudad},${pais}&appid=${appId}`;
console.log(url);
fetch(url)
.then((respuesta) => respuesta.json())
.then((datos) => {
limpiarHTML();
console.log(datos.main);
if (datos.cod === «404») {
mostrarError(«Ciudad no encontrada»);
return;
}
//imprime la respuesta en el html
mostrarClima(datos);
});
}

function mostrarClima(datos) {
const {
name,
main: { temp, temp_max, temp_min },
} = datos;

const nombreCiudad = name;
const centigrados = parseInt(temp – 273.15);
const max = parseInt(temp_max – 273.15);
const min = parseInt(temp_min – 273.15);
const actual = document.createElement(«p»);
actual.innerHTML = `Temperatura actual de ${name} ${centigrados} ºC`;
actual.classList.add(«font-bold», «text-6xl»);

const tempMaxima = document.createElement(«p»);
tempMaxima.innerHTML = `Máxima: ${max} ºC`;
tempMaxima.classList.add(«text-hl»);

const tempMin = document.createElement(«p»);
tempMin.innerHTML = `Mínima: ${min} ºC`;
tempMaxima.classList.add(«text-hl»);

const resultadoDiv = document.createElement(«div»);
resultadoDiv.classList.add(«text-center», «text-white»);

resultadoDiv.appendChild(actual);
resultadoDiv.appendChild(tempMaxima);
resultadoDiv.appendChild(tempMin);
resultado.appendChild(resultadoDiv);
console.log(temp – 273.15);
}

function limpiarHTML() {
while (resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}
}

API  DESCARGAR IMAGENES GRATIS CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscador Imágenes Pixabay</title>
<link rel="stylesheet" href="css/tailwind.min.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>

<h1 class="text-center text-3xl text-white my-10 font-bold uppercase">Buscador de Imágenes Pixabay</h1>

<div class="buscador max-w-lg mx-auto ">
<form id="formulario" class="">
<div>
<label
class="block text-white font-bold uppercase"
>Término Búsqueda</label>
<input
type="text"
class="mt-3 rounded w-full p-2 "
placeholder="Término de búsqueda. Ejemplo: Café o Futbol"
id="termino"
/>

<input
type="submit"
value="Buscar Imágenes"
class="mt-5 w-full py-2 bg-yellow-400 cursor-pointer font-bold uppercase hover:bg-yellow-500 rounded"
>
</div>
</form>
</div>

<div id="resultado" class="container mx-auto mt-10 flex flex-wrap"></div>

<div id="paginacion" class="container mx-auto mb-10 text-center flex flex-wrap mx-auto justify-center"></div>

<script src="js/app.js"></script>
</body>
</html>

Javascript

const resultado = document.querySelector(«#resultado»);
const formulario = document.querySelector(«#formulario»);
const paginacionDiv = document.querySelector(«#paginacion»);

const registrosPorPagina = 40;
let totalPaginas;
let iterador;
let paginaActual = 1;

window.onload = () => {
formulario.addEventListener(«submit», validarFormulario);
};

function validarFormulario(e) {
e.preventDefault();

const terminoBusqueda = document.querySelector(«#termino»).value;

if (terminoBusqueda === «») {
mostrarAlerta(«Agrega un término de búsqueda»);
return;
}

buscarImagenes();
}

function mostrarAlerta(mensaje) {
const existeAlerta = document.querySelector(«.bg-red-100»);

if (!existeAlerta) {
const alerta = document.createElement(«p»);
alerta.classList.add(
«bg-red-100»,
«border-red-400»,
«text-red-700»,
«px-4»,
«py-3»,
«rounded»,
«max-w-lg»,
«mx-auto»,
«mt-6»,
«text-center»
);

alerta.innerHTML = `
<strong class=»font-bold»>Error!</strong>
<span class=»block sm:inline»>${mensaje}</span>
`;

formulario.appendChild(alerta);

setTimeout(() => {
alerta.remove();
}, 3000);
}
}

function buscarImagenes() {
const termino = document.querySelector(«#termino»).value;

const key = «18298951-22c50c68b6badcf1017c195d7»;
const url = `https://pixabay.com/api/?key=${key}&q=${termino}&per_page=${registrosPorPagina}&page=${paginaActual}`;

fetch(url)
.then((respuesta) => respuesta.json())
.then((resultado) => {
totalPaginas = calcularPaginas(resultado.totalHits);
mostrarImagenes(resultado.hits);
});
}

// Generador que va a registrar la cantidad de elementos de acuerdo a las paginas
function* crearPaginador(total) {
for (let i = 1; i <= total; i++) {
yield i;
}
}

function calcularPaginas(total) {
return parseInt(Math.ceil(total / registrosPorPagina));
}

function mostrarImagenes(imagenes) {
// console.log(imagenes);

while (resultado.firstChild) {
resultado.removeChild(resultado.firstChild);
}

// Iterar sobre el arreglo de imagenes y construir el HTML
imagenes.forEach((imagen) => {
const { previewURL, likes, views, largeImageURL } = imagen;

resultado.innerHTML += `
<div class=»w-1/2 md:w-1/3 lg:w-1/4 p-3 mb-4″>
<div class=»bg-white»>
<img class=»w-full» src=»${previewURL}» >

<div class=»p-4″>
<p class=»font-bold»> ${likes} <span class=»font-light»> Me Gusta </span> </p>
<p class=»font-bold»> ${views} <span class=»font-light»> Veces Vista </span> </p>

<a
class=»block w-full bg-blue-800 hover:bg-blue-500 text-white uppercase font-bold text-center rounded mt-5 p-1″
href=»${largeImageURL}» target=»_blank» rel=»noopener noreferrer»
>
Ver Imagen
</a>
</div>
</div>
</div>
`;
});

// Limpiar el paginador previo
while (paginacionDiv.firstChild) {
paginacionDiv.removeChild(paginacionDiv.firstChild);
}

// Generamos el nuevo HTML
imprimirPaginador();
}

function imprimirPaginador() {
iterador = crearPaginador(totalPaginas);

while (true) {
const { value, done } = iterador.next();
if (done) return;

// Caso contrario, genera un botón por cada elemento en el generador
const boton = document.createElement(«a»);
boton.href = «#»;
boton.dataset.pagina = value;
boton.textContent = value;
boton.classList.add(
«siguiente»,
«bg-yellow-400»,
«px-4»,
«py-1»,
«mr-2»,
«font-bold»,
«mb-4»,
«rounded»
);

boton.onclick = () => {
paginaActual = value;

buscarImagenes();
};

paginacionDiv.appendChild(boton);
}
}

API  RECONOCIMIENTO DE VOZ CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>

<button type="button" id="notificar">
Notificarme!!
</button>

<button type="button" id="verNotificacion">
Ver Notificación
</button>

<br><br><br>

<button type="button" id="abrir-pantalla-completa">
Full Screen
</button>

<button type="button" id="salir-pantalla-completa">
Salir de Full Screen
</button>

<br><br><br>

<button type="button" id="microfono">
Speech Recognition API
</button>

<div id="salida" class="ocultar"></div>

<script src="js/01-app.js"></script>
<script src="js/03-app.js"></script>
<script src="js/04-app.js"></script>
<script src="js/05-app.js"></script>
<script src="js/06-app.js"></script>

</body>
</html>

Javascript

const salida = document.querySelector(‘#salida’);
const microfono = document.querySelector(‘#microfono’);

microfono.addEventListener(‘click’, ejecutarSpeechAPI);

function ejecutarSpeechAPI() {
const SpeechRecognition = webkitSpeechRecognition;
const recognition = new SpeechRecognition();

recognition.start();

recognition.onstart = function() {
salida.classList.add(‘mostrar’);
salida.textContent = ‘Escuchando…’;
};

recognition.onspeechend = function() {
salida.textContent = ‘Se dejo de grabar…’;
recognition.stop();
};

recognition.onresult = function(e) {
console.log(e.results[0][0]);

const {confidence, transcript} = e.results[0][0];

 

const speech = document.createElement(‘p’);
speech.innerHTML = `Grabado: ${transcript}`;

const seguridad = document.createElement(‘p’);
seguridad.innerHTML = `Seguridad: ${ parseInt( confidence * 100 ) } %`;

salida.appendChild(speech);
salida.appendChild(seguridad);
}
}

ALMACENAMIENTO EN LOCALSTORAGE CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>

<div id="contenido">
<div class="container">

<h1>Local Storage</h1>
<div class="row">
<div class="six columns">
<label for="tweet">Tweet:</label>
<form id="formulario">
<label for="tweet"></label>
<textarea id="tweet" class="u-full-width"></textarea>
<input type="submit" class="button u-full-width button-primary" value="Agregar">
</form>
</div>
<div class="six columns">
<h2>Mis Tweets</h2>
<div id="lista-tweets"></div>
</div>
</div>

</div>
</div> <!--#contenido-->

<script src="js/app.js"></script>
</body>
</html>

Javascript

// Variables
const formulario = document.querySelector(‘#formulario’);
const listaTweets = document.querySelector(‘#lista-tweets’);
let tweets = [];

// Event Listeners
eventListeners();

function eventListeners() {
// Cuando el usuario agrega un nuevo tweet
formulario.addEventListener(‘submit’, agregarTweet);

// Cuando el documento esta listo
document.addEventListener(‘DOMContentLoaded’, () => {
tweets = JSON.parse( localStorage.getItem(‘tweets’)) || [];

console.log(tweets);

crearHTML();
});
}

 

// Funciones
function agregarTweet(e) {
e.preventDefault();

// Textarea donde el usuario escribe
const tweet = document.querySelector(‘#tweet’).value;

// validación…
if(tweet === ») {
mostrarError(‘Un mensaje no puede ir vacio’);

return; // evita que se ejecuten más lineas de código
}

const tweetObj = {
id: Date.now(),
tweet
}

// Añadir al arreglo de tweets
tweets = […tweets, tweetObj];

// Una vez agregado vamos a crear el HTML
crearHTML();

// Reiniciar el formulario
formulario.reset();
}

 

// Mostrar Mensaje de error
function mostrarError(error) {
const mensajeError = document.createElement(‘p’);
mensajeError.textContent = error;
mensajeError.classList.add(‘error’);

// Insertarlo en el Contenido
const contenido = document.querySelector(‘#contenido’);
contenido.appendChild(mensajeError);

// Elimina la alerta después de 3 segundos
setTimeout(() => {
mensajeError.remove();
}, 3000);
}

 

// Muestra un listado de los tweets
function crearHTML() {

limpiarHTML();

if(tweets.length > 0 ) {
tweets.forEach( tweet => {
// Agregar un boton de eliminar
const btnEliminar = document.createElement(‘a’);
btnEliminar.classList.add(‘borrar-tweet’);
btnEliminar.innerText = ‘X’;

// Añadir la función de eliminar
btnEliminar.onclick = () => {
borrarTweet(tweet.id);
}

 

// Crear el HTML
const li = document.createElement(‘li’);

// añadir el texto
li.innerText = tweet.tweet;

// Asignar el botón
li.appendChild(btnEliminar);

// insertarlo en el html
listaTweets.appendChild(li);
});
}

sincronizarStorage();
}

// Agrega los Tweets actuales a Localstorage
function sincronizarStorage() {
localStorage.setItem(‘tweets’, JSON.stringify(tweets));
}

// Elimina un tweet
function borrarTweet(id) {
tweets = tweets.filter( tweet => tweet.id !== id);

crearHTML();
}

// Limpiar el HTML
function limpiarHTML() {
while( listaTweets.firstChild) {
listaTweets.removeChild(listaTweets.firstChild);
}
}

COTIZADOR DE SEGUROS CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="css/tailwind.css">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container mx-auto">
<div id="contenido" class="pb-10">
<header class="bg-teal-500 text-white py-3 font-bold uppercase">
<h1 class="text-center">Cotiza tu seguro de Auto</h1>
</header>
<form class="mt-10 max-w-lg mx-auto" action="#" id="cotizar-seguro">
<div class="flex items-center mb-5">
<label
class="font-bold uppercase mr-2 w-20"
for="marca"
>Marca:</label>
<select class="flex-1 bg-gray-100 p-3 appearance-none" id="marca">
<option value="">- Seleccionar -</option>
<option value="1">Americano</option>
<option value="2">Asiatico</option>
<option value="3">Europeo</option>
</select>
</div>
<div class="flex items-center mb-5">
<label
class="font-bold uppercase mr-2 w-20"
for="year"
>Año:</label>
<select class="flex-1 bg-gray-100 p-3 appearance-none" id="year"></select>
</div>
<fieldset>
<legend class="font-bold uppercase text-2xl text-center w-full">Tipo Seguro</legend>

<div class="flex justify-around mt-5">
<div>
<label class="font-bold uppercase mr-2">Básico</label>
<input type="radio" name="tipo" value="basico" checked>
</label>
</div>
<div>
<label class="font-bold uppercase mr-2">Completo</label>
<input type="radio" name="tipo" value="completo">
</label>
</div>
</div>
</fieldset>

<div id="cargando" class="hidden">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<div id="resultado"></div>
<div class="flex justify-center py-4">
<button
type="submit"
class="mx-auto bg-teal-500 hover:bg-teal-700 text-white font-bold py-2 px-20 rounded"
>Cotizar Seguro
</button>
</div>

</form>
</div> <!--#contenido-->
</div>

<script src="js/app.js"></script>
</body>
</html>

Javascript

 

// Constructores
function Seguro(marca, year, tipo) {
this.marca = marca;
this.year = year;
this.tipo = tipo;
}
// Realiza la cotización con los datos
Seguro.prototype.cotizarSeguro = function() {
/*
1 = Americano 1.15
2 = Asiatico 1.05
3 = Europeo 1.35
*/

let cantidad;
const base = 2000;

switch(this.marca) {
case ‘1’:
cantidad = base * 1.15;
break;
case ‘2’:
cantidad = base * 1.05;
break;
case ‘3’:
cantidad = base * 1.35;
break;
default:
break;
}

// Leer el año
const diferencia = new Date().getFullYear() – this.year;

// Cada año que la diferencia es mayor, el costo va a reducirse un 3%
cantidad -= ((diferencia * 3) * cantidad ) / 100;

/*
Si el seguro es básico se multiplica por un 30% más
Si el seguro es completo se multiplica por un 50% más
*/

if(this.tipo === ‘basico’) {
cantidad *= 1.30;
} else {
cantidad *= 1.50;
}

return cantidad;
}

 

function UI() {}

// Llena las opciones de los años
UI.prototype.llenarOpciones = () => {
const max = new Date().getFullYear(),
min = max – 20;

const selectYear = document.querySelector(‘#year’);

for(let i = max; i > min; i– ) {
let option = document.createElement(‘option’);
option.value = i;
option.textContent = i;
selectYear.appendChild(option);
}
}

// Muestra alertas en pantalla
UI.prototype.mostrarMensaje = (mensaje, tipo) => {

const div = document.createElement(‘div’);

if(tipo === ‘error’) {
div.classList.add(‘error’);
} else {
div.classList.add(‘correcto’);
}

div.classList.add(‘mensaje’, ‘mt-10’);
div.textContent = mensaje;

// Insertar en el HTML
const formulario = document.querySelector(‘#cotizar-seguro’);
formulario.insertBefore(div, document.querySelector(‘#resultado’));

setTimeout(() => {
div.remove();
}, 3000);
}

UI.prototype.mostrarResultado = (total, seguro) => {

const { marca, year, tipo } = seguro;

let textoMarca;

switch(marca) {
case ‘1’:
textoMarca = ‘Americano’;
break;
case ‘2’:
textoMarca = ‘Asiatico’;
break;
case ‘3’:
textoMarca = ‘Europeo’;
break;
default:
break;
}

// Crear el resultado
const div = document.createElement(‘div’);
div.classList.add(‘mt-10’);

div.innerHTML = `
<p class=»header»>Tu Resumen</p>
<p class=»font-bold»>Marca: <span class=»font-normal»> ${textoMarca} </span></p>
<p class=»font-bold»>Año: <span class=»font-normal»> ${year} </span></p>
<p class=»font-bold»>Tipo: <span class=»font-normal capitalize»> ${tipo} </span></p>
<p class=»font-bold»>Total: <span class=»font-normal»> $ ${total} </span></p>
`;

const resultadoDiv = document.querySelector(‘#resultado’);

// Mostrar el spinner
const spinner = document.querySelector(‘#cargando’);
spinner.style.display = ‘block’;

setTimeout(() => {
spinner.style.display = ‘none’; // Se borra el spinner
resultadoDiv.appendChild(div); // se muestra el resultado
}, 3000);
}

// instanciar UI
const ui = new UI();

 

document.addEventListener(‘DOMContentLoaded’, () => {
ui.llenarOpciones(); // Llena el select con los años…
})

 

eventListeners();
function eventListeners() {
const formulario = document.querySelector(‘#cotizar-seguro’);
formulario.addEventListener(‘submit’, cotizarSeguro);
}

function cotizarSeguro(e) {
e.preventDefault();

// Leer la marca seleccionada
const marca = document.querySelector(‘#marca’).value;

// leer el año seleccionado
const year = document.querySelector(‘#year’).value;

// leer el tipo de cobertura
const tipo = document.querySelector(‘input[name=»tipo»]:checked’).value;

if(marca === » || year === » || tipo === ») {
ui.mostrarMensaje(‘Todos los campos son obligatorios’, ‘error’);
return;
}

ui.mostrarMensaje(‘Cotizando…’, ‘exito’);

// Ocultar las cotizaciones previas
const resultados = document.querySelector(‘#resultado div’);
if(resultados != null) {
resultados.remove();
}

 

// Instanciar el seguro
const seguro = new Seguro(marca, year, tipo);
const total = seguro.cotizarSeguro();

// Utilizar el prototype que va a cotizar.
ui.mostrarResultado(total, seguro);

}

APLICACION DE CONTROL DE GASTO  CON JAVASCRIPT

CODIFICACIÓN
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,400" rel="stylesheet">
<link rel="stylesheet" href="css/custom.css">
<title>Gasto Semanal</title>

</head>
<body>
<div class="container">
<header>
<h1 class="text-center">Gasto Semanal</h1>
</header>
<section class="contenido-principal">
<div class="row">
<div class="col ">
<div class="contenido primario">
<h2 class="text-center">Añade tus gastos aqui</h2>
<form id="agregar-gasto" action="#">
<div class="form-group">
<label for="gasto">Gasto:</label>
<input type="text" class="form-control" id="gasto" placeholder="Nombre Gasto">
</div>
<div class="form-group">
<label for="cantidad">Cantidad:</label>
<input type="text" class="form-control" id="cantidad" placeholder="Cantidad en $">
</div>

<button type="submit" class="btn btn-primary">Agregar</button>
</form>

</div> <!--.contenido-->
</div> <!--.col-->

<div class="col">
<div class="contenido secundario">

<h2 class="text-center">Listado</h2>

<div id="gastos">
<ul class="list-group"></ul>
</div>
<div id="presupuesto" class="presupuesto">
<div class="alert alert-primary">
<p>Presupuesto: $ <span id="total"></span> </p>
</div>
<div class="restante alert alert-success">
<p>Restante: $ <span id="restante"></span></p>
</div>
</div> <!--.presupuesto-->
</div> <!--.contenido-->
</div><!--.col-->
</div> <!--.row-->
</section>
</div>

<script src="js/app.js"></script>
</body>
</html>

Javascript

// Variables y Selectores
const formulario = document.querySelector(‘#agregar-gasto’);
const gastoListado = document.querySelector(‘#gastos ul’);

 

// Eventos

eventListeners();
function eventListeners() {
document.addEventListener(‘DOMContentLoaded’, preguntarPresupuesto );

formulario.addEventListener(‘submit’, agregarGasto);
}

 

// Classes
class Presupuesto {
constructor(presupuesto) {
this.presupuesto = Number(presupuesto);
this.restante = Number(presupuesto);
this.gastos = [];
}

nuevoGasto(gasto) {
this.gastos = […this.gastos, gasto];
this.calcularRestante();
}

calcularRestante() {
const gastado = this.gastos.reduce( (total, gasto ) => total + gasto.cantidad, 0 );
this.restante = this.presupuesto – gastado;
}

eliminarGasto(id) {
this.gastos = this.gastos.filter( gasto => gasto.id !== id );
this.calcularRestante();
}
}

class UI {
insertarPresupuesto( cantidad ) {
// Extrayendo los valores
const { presupuesto, restante } = cantidad;

// Agregar al HTML
document.querySelector(‘#total’).textContent = presupuesto;
document.querySelector(‘#restante’).textContent = restante;
}

imprimirAlerta(mensaje, tipo) {
// crear el div
const divMensaje = document.createElement(‘div’);
divMensaje.classList.add(‘text-center’, ‘alert’);

if(tipo === ‘error’) {
divMensaje.classList.add(‘alert-danger’);
} else {
divMensaje.classList.add(‘alert-success’);
}

// Mensaje de error
divMensaje.textContent = mensaje;

// Insertar en el HTML
document.querySelector(‘.primario’).insertBefore( divMensaje, formulario );

// Quitar del HTML
setTimeout(() => {
divMensaje.remove();
}, 3000);
}

mostrarGastos(gastos) {

this.limpiarHTML(); // Elimina el HTML previo

// Iterar sobre los gastos
gastos.forEach( gasto => {

const { cantidad, nombre, id } = gasto;

// Crear un LI
const nuevoGasto = document.createElement(‘li’);
nuevoGasto.className = ‘list-group-item d-flex justify-content-between align-items-center’;
nuevoGasto.dataset.id = id;

// Agregar el HTML del gasto
nuevoGasto.innerHTML = `${nombre} <span class=»badge badge-primary badge-pill»> $ ${cantidad} </span>`;

 

// Boton para borrar el gasto
const btnBorrar = document.createElement(‘button’);
btnBorrar.classList.add(‘btn’, ‘btn-danger’, ‘borrar-gasto’);
btnBorrar.innerHTML = ‘Borrar &times;’
btnBorrar.onclick = () => {
eliminarGasto(id);
}
nuevoGasto.appendChild(btnBorrar);

 

// Agregar al HTML
gastoListado.appendChild(nuevoGasto);
})
}

limpiarHTML() {
while( gastoListado.firstChild ) {
gastoListado.removeChild(gastoListado.firstChild);
}
}

actualizarRestante(restante) {
document.querySelector(‘#restante’).textContent = restante;
}

comprobarPresupuesto(presupuestObj) {
const { presupuesto, restante } = presupuestObj;

const restanteDiv = document.querySelector(‘.restante’);

// Comprobar 25%
if( ( presupuesto / 4 ) > restante ) {
restanteDiv.classList.remove(‘alert-success’, ‘alert-warning’);
restanteDiv.classList.add(‘alert-danger’);
} else if ((presupuesto / 2) > restante ) {
restanteDiv.classList.remove(‘alert-success’);
restanteDiv.classList.add(‘alert-warning’);
} else {
restanteDiv.classList.remove(‘alert-danger’, ‘alert-warning’);
restanteDiv.classList.add(‘alert-success’);
}

 

// Si el total es 0 o menor
if(restante <= 0) {
ui.imprimirAlerta(‘El presupuesto se ha agotado’, ‘error’);
formulario.querySelector(‘button[type=»submit»]’).disabled = true;
}
}
}

 

// Instanciar
const ui = new UI();
let presupuesto;

// Funciones

function preguntarPresupuesto() {
const presupuestoUsuario = prompt(‘¿Cual es tu presupuesto?’);

// console.log( Number( presupuestoUsuario) );

if(presupuestoUsuario === » || presupuestoUsuario === null || isNaN(presupuestoUsuario) || presupuestoUsuario <= 0 ) {
window.location.reload();
}

// Presupuesto valido
presupuesto = new Presupuesto(presupuestoUsuario);
console.log(presupuesto);

ui.insertarPresupuesto(presupuesto);
}

 

// Añade gastos
function agregarGasto(e) {
e.preventDefault();

// Leer los datos del formulario
const nombre = document.querySelector(‘#gasto’).value;
const cantidad = Number(document.querySelector(‘#cantidad’).value);

// Validar
if(nombre === » || cantidad === ») {
ui.imprimirAlerta(‘Ambos campos son obligatorios’, ‘error’);

return;
} else if ( cantidad <= 0 || isNaN(cantidad) ) {
ui.imprimirAlerta(‘Cantidad no válida’, ‘error’);

return;
}

// Generar un objeto con el gasto
const gasto = { nombre, cantidad, id: Date.now() }

// añade un nuevo gasto
presupuesto.nuevoGasto( gasto );

// Mensaje de todo bien!
ui.imprimirAlerta(‘Gasto agregado Correctamente’)

// Imprimir los gastos
const { gastos, restante} = presupuesto;
ui.mostrarGastos(gastos);

ui.actualizarRestante(restante);

ui.comprobarPresupuesto(presupuesto);

// Reinicia el formulario
formulario.reset();

}

 

function eliminarGasto(id) {
// Elimina del objeto
presupuesto.eliminarGasto(id);

// Elimina los gastos del HTML
const { gastos, restante } = presupuesto;
ui.mostrarGastos(gastos);
ui.actualizarRestante(restante);
ui.comprobarPresupuesto(presupuesto);
}

APLICACION DE BUSQUEDA DE COCHES  CON JAVASCRIPT

CODIFICACIÓN
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Buscador múltiples campos - JS Moderno </title>
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>

<h1>Buscador de Autos</h1>

<div class="contenedor">

<form id="buscador">
<div class="row">
<div class="three columns">
<label for="marca">Marca</label>
<select class="u-full-width" id="marca">
<option value="">Seleccione</option>
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes Benz">Mercedes Benz</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Ford">Ford</option>
<option value="Dodge">Dodge</option>
</select>
</div>
<div class="three columns">
<label for="year">Año</label>
<select class="u-full-width" id="year">
<option value="">Seleccione</option>
</select>
</div>
<div class="three columns">
<label for="minimo">Precio Min</label>
<select class="u-full-width" id="minimo">
<option value="">Seleccione</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="40000">40,000</option>
<option value="50000">50,000</option>
<option value="60000">60,000</option>
<option value="70000">70,000</option>
<option value="80000">80,000</option>
<option value="90000">90,000</option>
</select>
</div>
<div class="three columns">
<label for="maximo">Precio Max</label>
<select class="u-full-width" id="maximo">
<option value="">Seleccione</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="40000">40,000</option>
<option value="50000">50,000</option>
<option value="60000">60,000</option>
<option value="70000">70,000</option>
<option value="80000">80,000</option>
<option value="90000">90,000</option>
</select>
</div>
<div class="row">
<div class="four columns">
<label for="puertas">Puertas</label>
<select class="u-full-width" id="puertas">
<option value="">Seleccione</option>
<option value="2">2</option>
<option value="4">4</option>
</select>
</div>
<div class="four columns">
<label for="transmision">Transmisión</label>
<select class="u-full-width" id="transmision">
<option value="">Seleccione</option>
<option value="automatico">Automática</option>
<option value="manual">Manual</option>
</select>
</div>
<div class="four columns">
<label for="color">Color</label>
<select class="u-full-width" id="color">
<option value="">Seleccione</option>
<option value="Negro">Negro</option>
<option value="Azul">Azul</option>
<option value="Blanco">Blanco</option>
<option value="Rojo">Rojo</option>
</select>
</div>
</div>
</div>
</form>

<h1>Resultados</h1>
<div id="resultado"></div>
</div>

<a class="sitio-web" href="https://www.codigoconjuan.com" rel="nofollow noopener noreferrer" >Código Con Juan</a>

<script src="js/db.js"></script>
<script src="js/app.js"></script>

</body>
</html>

Javascript
// Variables
const marca = document.querySelector('#marca');
const year = document.querySelector('#year');
const minimo = document.querySelector('#minimo');
const maximo = document.querySelector('#maximo');
const puertas = document.querySelector('#puertas');
const transmision = document.querySelector('#transmision');
const color = document.querySelector('#color');

// Contenedor para los resultados
const resultado = document.querySelector('#resultado');

const max = new Date().getFullYear();
const min = max - 10;

// Generar un objeto con la búsqueda
const datosBusqueda = {
 marca : '',
 year : '',
 minimo : '',
 maximo : '',
 puertas : '',
 transmision : '',
 color : '',
}

// eventos
document.addEventListener('DOMContentLoaded', () => {
 mostrarAutos(autos); // muestra los autos al cargar

// Llena las opciones de años
 llenarSelect()
})

// Event listener para los select de búsqueda
marca.addEventListener('change', e => {
 datosBusqueda.marca = e.target.value;

filtrarAuto();
});

year.addEventListener('change', e => {
 datosBusqueda.year = parseInt( e.target.value );

filtrarAuto();
});

minimo.addEventListener('change', e => {
 datosBusqueda.minimo = e.target.value;

filtrarAuto();
});

maximo.addEventListener('change', e => {
 datosBusqueda.maximo = e.target.value;

filtrarAuto();
});

puertas.addEventListener('change', e => {
 datosBusqueda.puertas = parseInt( e.target.value );

filtrarAuto();
});

transmision.addEventListener('change', e => {
 datosBusqueda.transmision = e.target.value;

filtrarAuto();
});

color.addEventListener('change', e => {
 datosBusqueda.color = e.target.value;

filtrarAuto();
});

// Funciones
function mostrarAutos(autos) {

limpiarHTML(); // Elimina el HTML previo

autos.forEach( auto => {

const { marca, modelo, year, puertas, transmision, precio, color } = auto;
 const autoHTML = document.createElement('p');

autoHTML.textContent = `
 ${marca} ${modelo} - ${year} - ${puertas} Puertas - Transmisión: ${transmision} - Precio: ${precio} - Color: ${color}

 `;

// insertar en el html
 resultado.appendChild(autoHTML)
 })
}

// Limpiar HTML
function limpiarHTML() {
 while(resultado.firstChild) {
 resultado.removeChild(resultado.firstChild);
 }
}

// Genera los años del select
function llenarSelect() {

 for( let i = max; i >= min; i-- ) {
 const opcion = document.createElement('option');
 opcion.value = i;
 opcion.textContent = i;
 year.appendChild(opcion); // Agrega las opciones de año al select
 }
}

// Función que filtra en base a la búsqueda
function filtrarAuto() {
 const resultado = autos.filter( filtrarMarca ).filter( filtrarYear ).filter( filtrarMinimo ).filter( filtrarMaximo ).filter( filtrarPuertas ).filter( filtrarTransmision ).filter(filtrarColor )

if( resultado.length ) {
 mostrarAutos(resultado);
 } else {
 noResultado();
 }

}

function noResultado() {

limpiarHTML();

const noResultado = document.createElement('div');
 noResultado.classList.add('alerta', 'error');
 noResultado.textContent = 'No Hay Resultados, Intenta con otros términos de búsqueda';
 resultado.appendChild(noResultado)

}

function filtrarMarca(auto) {
 const { marca } = datosBusqueda;
 if( marca ) {
 return auto.marca === marca;
 }
 return auto;
}

function filtrarYear(auto) {
 const { year } = datosBusqueda;
 if( year ) {
 return auto.year === year;
 }
 return auto;
}

function filtrarMinimo(auto) {
 const { minimo } = datosBusqueda;
 if( minimo ) {
 return auto.precio >= minimo;
 }
 return auto;
}

function filtrarMaximo(auto) {
 const { maximo } = datosBusqueda;
 if( maximo ) {
 return auto.precio <= maximo;
 }
 return auto;
}

function filtrarPuertas(auto) {
 const { puertas } = datosBusqueda;
 if( puertas ) {
 return auto.puertas === puertas;
 }
 return auto;
}

function filtrarTransmision(auto) {
 const { transmision } = datosBusqueda;
 if( transmision ) {
 return auto.transmision === transmision;
 }
 return auto;
}

function filtrarColor(auto) {
 const { color } = datosBusqueda;
 if( color ) {
 return auto.color === color;
 }
 return auto;
}

/////////////////////
DB.JS

const autos = [
{
marca: 'BMW',
modelo: 'Serie 3',
year: 2020,
precio: 30000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A4',
year: 2020,
precio: 40000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2015,
precio: 20000,
puertas: 2,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A6',
year: 2020,
precio: 35000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2016,
precio: 70000,
puertas: 4,
color: 'Rojo',
transmision: 'automatico'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2015,
precio: 25000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Chevrolet',
modelo: 'Camaro',
year: 2018,
precio: 60000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2019,
precio: 80000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2020,
precio: 40000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A3',
year: 2017,
precio: 55000,
puertas: 2,
color: 'Negro',
transmision:
'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2020,
precio: 25000,
puertas: 2,
color: 'Rojo',
transmision: 'manual'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2018,
precio: 45000,
puertas: 4,
color: 'Azul',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2019,
precio: 90000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Ford',
modelo: 'Mustang',
year: 2017,
precio: 60000,
puertas: 2,
color: 'Negro',
transmision: 'manual'
},
{
marca: 'Dodge',
modelo: 'Challenger',
year: 2015,
precio: 35000,
puertas: 2,
color: 'Azul',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 3',
year: 2018,
precio: 50000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'BMW',
modelo: 'Serie 5',
year: 2017,
precio: 80000,
puertas: 4,
color: 'Negro',
transmision: 'automatico'
},
{
marca: 'Mercedes Benz',
modelo: 'Clase C',
year: 2018,
precio: 40000,
puertas: 4,
color: 'Blanco',
transmision: 'automatico'
},
{
marca: 'Audi',
modelo: 'A4',
year: 2016,
precio: 30000,
puertas: 4,
color: 'Azul',
transmision: 'automatico'
}
];

GUIÍA DOMINA JAVASCRIPT

con ejemplos 

 

GUIA DE JAVASCRIPT

 

VARIABLES

// Inicializar una variable con un valor

var producto = "Monitor de 24 Pulgadas";

console.log(producto);

// Las variables se puede resasignar

producto = "Monitor de 19 Pulgadas";

console.log(producto);

// JavaScript es un lenguaje de tipo dinamico,
no se especifica
tipo de dato producto = 20; console.log(producto); // Se pueden inicializar sin valor y asignarlo
después var disponible; disponible = true; disponible = false; // Inicializar múltiples variables. var categoria = 'Computadoras', marca = "Marca Famosa", calificacion = 5; // // Las variables no pueden iniciar con
números // var 99dias; // var dias99; // var 01_; // var _01; // var _usuario; // var __usuario; // var nombreProductoCategoriaPrecio; // var nombre_producto_categoria_precio; // var nombre producto let producto = 'Tablet'; // Reasignar el valor producto = "Monitor"; producto = 20; producto = true; producto = null console.log(producto); let precio; precio = 300; console.log(precio); const producto = 'Tablet'; // No se pueden reasignar // producto = "Monitor"; console.log(producto); const precio = 20; console.log(precio); //////////////////////////////// STRINGS const producto = "Monitor 20\""; const producto2 = String('Monitor 24 "'); const producto3 = new String('Monitor 27 Pulgadas'); console.log(producto); console.log(producto2); console.log(producto3); const producto = 'Monitor 20 Pulgadas'; console.log(producto); // Conocer la cantidad de letras de la cadena
de texto console.log(producto.length); // console.log(producto.indexOf('Tablet')); console.log(producto.includes('Tablet')); console.log(producto.includes('Monitor')); console.log(producto.includes('monitor')); const producto = 'Monitor 20 Pulgadas '; const precio = '30 USD '; // console.log(producto.concat(precio)); // console.log(producto.concat('En descuento')); console.log( producto + " Con un precio de: " +
precio); console.log("El producto " + producto + "tiene un
precio de " + precio ); console.log("El producto ", producto , "tiene un
precio de " , precio ); console.log(`El Producto ${producto} tiene un
precio de $ ${precio}`); const producto = ' Monitor 20 Pulgadas '; console.log(producto); console.log(producto.length); // Eliminar del inicio... console.log( producto.trimStart() ); console.log( producto.trimEnd() ); console.log( producto.trimStart().trimEnd() ); console.log( producto.trim() ) const producto = 'Monitor 20 Pulgadas'; // .replace para reemplazar console.log(producto); console.log(producto.replace('Pulgadas', '"')); console.log(producto.replace('Monitor', 'Monitor
Curvo ')); // .slice para cortar console.log(producto.slice(0, 10) ); // console.log(producto.slice(8) ); console.log(producto.slice(2, 1) ); // Alternativa a slice console.log(producto.substring(0,10)); console.log(producto.substring(2,1)); const usuario = "Juan"; console.log(usuario.substring(0,1)); console.log(usuario.charAt(0)); const producto = 'Monitor 20 Pulgadas '; // .repetear te va a permitir repetir una cadena
de texto... const texto = ' en Promoción'.repeat(2.4); console.log(texto); console.log(`${producto} ${texto} !!!`); // Split, dividir un string const actividad = "Estoy aprendiendo JavaScript
Moderno"; console.log(actividad.split(" ")); const hobbies = 'Leer, caminar, escuchar música,
escribir,
aprender a programar'; console.log(hobbies.split(", ")); const tweet = "Aprendiendo JavaScript "; console.log(tweet.split('#')) const producto = 'Monitor 20 Pulgadas '; console.log(producto.toUpperCase()); console.log(producto.toLowerCase()); const email = "CORREO@CORREO.COM"; console.log(email.toLowerCase()); const precio = 300; console.log(precio); console.log(precio.toString()); NUMEROS/////////////////////////////// // Creación de números const numero1 = 30; const numero2 = 20; const numero3 = 20.20; const numero4 = .102030; const numero5 = -20; console.log(numero1); console.log(numero2); console.log(numero3); console.log(numero4); console.log(numero5); const numero1 = 30; const numero2 = 20; let resultado; // Suma resultado = numero1 + numero2; // Resta resultado = numero1 - numero2; // Multiplicación resultado = numero1 * numero2; // División resultado = numero1 / numero2; // Modulo resultado = numero1 % numero2; console.log(resultado); let resultado; // PI resultado = Math.PI; // Redondear resultado = Math.round(2.8); resultado = Math.round(2.2); resultado = Math.round(2.6); resultado = Math.round(2.5); resultado = Math.round(2.4); // Redondear hacia arriba resultado = Math.ceil(2.1); // Redondear hacia abajo resultado = Math.floor(2.9); // Raiz Cuadrada resultado = Math.sqrt(144); // Absoluto resultado = Math.abs(-500); // Potencia resultado = Math.pow(2, 4); // Minimo resultado = Math.min(3,5, 1, 12, -3); // Maximo resultado = Math.max(3,5, 1, 12, -3); // Aleatorio // resultado = Math.random() * 20 ; // Aleatorio dentro de un rango... resultado = Math.floor( Math.random() * 30 ); console.log(resultado); let resultado; resultado = 20 + 30 * 2; resultado = ( 20 + 30 ) * 2; // 20% de descuento en tu carrito de compras resultado = (20 + 30 + 40 + 50 + 60 ) * .2; resultado = (20 + 30) * 1.16; console.log(resultado); let resultado; resultado = 20 + 30 * 2; resultado = ( 20 + 30 ) * 2; // 20% de descuento en tu carrito de compras resultado = (20 + 30 + 40 + 50 + 60 ) * .2; resultado = (20 + 30) * 1.16; console.log(resultado); const numero1 = 20; const numero2 = "20"; const numero3 = "Uno"; const numero4 = 20.2; console.log(numero1); console.log(Number.parseInt(numero1)); console.log(Number.parseFloat(numero2)); console.log(Number.parseInt(numero3)); // Revisar si un número es entero o no console.log(Number.isInteger(numero4)); console.log(Number.isInteger(numero3)); OPERADORES const numero1 = 20; const numero2 = "20"; const numero3 = 30; // Operador mayor a... console.log(numero1 > numero3); console.log(numero3 > numero1); // operador menor a console.log( numero1 < numero3 ) const numero1 = 20; const numero2 = "20"; const numero3 = 30; // Revisar si 2 números son iguales console.log(numero1 == numero3); console.log(numero1 == numero2); // Comparador estricto console.log(numero1 === numero2); console.log(numero1 === parseInt(numero2)); console.log(typeof numero1 ); console.log(typeof numero2 ); // Diferente const password1 = "admin"; const password2 = "Admin"; console.log(password1 != password2); console.log(numero1 != numero2); console.log(numero1 !== parseInt(numero2)); // Undefined let numero; console.log(numero); // console.log(typeof numero); // Null let numero2 = null; console.log(numero2); // console.log(typeof numero2); console.log(numero === numero2); BOOLEANOS const boolean1 = true; const boolean2 = false; const boolean3 = "true"; // console.log(boolean1); // console.log(boolean2); // console.log(typeof boolean1); console.log(boolean1 === boolean3); const boolean4 = new Boolean(true); console.log(typeof boolean4); const boolean1 = true; const boolean2 = false; console.log(boolean1 === boolean2); console.log(boolean1 === true); console.log(boolean1 === "true"); const autenticado = true; // if(autenticado) { // console.log('Si puedes ver netflix') // } else { // console.log('No no puedes verlo') // } // Operador ternario console.log( autenticado ? 'Si esta autenticado' :
'No esta autenticado'); OBJETOS const nombre = "Monitor 20 Pulgadas"; const precio = 300; const disponible = true; // Un objeto agrupa todo en una sola variable... // Object literal const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, } console.log(producto); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, } console.log(producto); console.log(producto.nombre); console.log(producto.precio); console.log(producto.disponible); console.log(producto['nombre']); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true } // Agregar nuevas propiedades al objeto producto.imagen = "imagen.jpg"; // Eliminar propiedades del objeto delete producto.disponible; console.log(producto); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true } // const nombre = producto.nombre; // console.log(nombre); // Destructuring const { nombre, precio, disponible } = producto; console.log(nombre); console.log(precio); console.log(disponible); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, informacion : { medidas : { peso: '1kg', medida: '1m' }, fabricacion: { pais: 'China' } } } // console.log(producto); console.log(producto.informacion.fabricacion.pais); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, informacion : { medidas : { peso: '1kg', medida: '1m' }, fabricacion: { pais: 'China' } } } const { nombre, informacion, informacion:
{fabricacion, fabricacion: { pais } } } =
producto; console.log(nombre); console.log(informacion); console.log(fabricacion); console.log(pais); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, } producto.disponible = false; delete producto.precio; console.log(producto); "use strict"; const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, } Object.freeze( producto ); // producto.disponible = false; // producto.imagen = "imagen.jpg"; // delete producto.precio; console.log(producto); console.log(Object.isFrozen(producto)); "use strict"; const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, } Object.seal( producto ); producto.disponible = false; // producto.imagen = "imagen.jpg"; // delete producto.precio; console.log(producto); console.log(Object.isSealed(producto)); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, } const medidas = { peso: '1kg', medida: '1m' } console.log(producto) console.log(medidas) const resultado = Object.assign(producto, medidas); // Spread Operator o Rest Operator const resultado2 = { ...producto, ...medidas } console.log(resultado); console.log(resultado2); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true, mostrarInfo: function() { console.log(`El Producto: ${this.nombre}
tiene un precio de: ${this.precio} `) } } const producto2 = { nombre: "Tablet", precio: 3000, disponible: true, mostrarInfo: function() { console.log(`El Producto: ${this.nombre}
tiene un precio de: ${this.precio} `) } } producto.mostrarInfo(); producto2.mostrarInfo(); // Object Literal const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true } // Object Constructor function Producto(nombre, precio) { this.nombre = nombre; this.precio = precio; this.disponible = true; } const producto2 = new Producto('Monitor
24 Pulgadas', 500); console.log(producto2); const producto3 = new Producto('Television',
100); console.log(producto3); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true } console.log( Object.keys( producto ) ); console.log( Object.values( producto )); console.log(Object.entries(producto)); ARRAYS const numeros = [10]; const meses = new Array('Enero', 'Febrero',
'Marzo'); console.log(numeros); console.log(meses); // Un arreglo que contiene datos de todo tipo const deTodo = ["Hola", 10, true, "si", null,
{ nombre: 'Juan', trabajo: 'Programador'},
[1,2,3]]; console.log(deTodo); const numeros = [10,20,30,40,50, [1,2,3]]; console.log(numeros); console.table(numeros); // Acceder al arreglo console.log(numeros[2]); console.log(numeros[0]); console.log(numeros[20]); console.log(numeros[5][1]); const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio']; console.table(meses); console.table(meses[0]); console.table(meses[1]); console.table(meses[2]); // Cuanto mide el arreglo console.log(meses.length); for(let i = 0; i < meses.length; i++ ) { console.log( meses[i] ); } const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio']; meses[0] = 'Nuevo Mes'; meses[10] = 'Ultimo mes'; console.table(meses); const carrito = []; // Definir un producto const producto = { nombre: "Monitor 32 Pulgadas", precio: 400 } const producto2 = { nombre: 'Celular', precio: 800 } // .push agrega al final de un arreglo carrito.push(producto2); carrito.push(producto); const producto3 = { nombre: 'Teclado', precio: 50 } carrito.unshift(producto3); console.table(carrito); const carrito = []; // Definir un producto const producto = { nombre: "Monitor 32 Pulgadas", precio: 400 } const producto2 = { nombre: 'Celular', precio: 800 } const producto3 = { nombre: 'Teclado', precio: 50 } let resultado; resultado = [...carrito, producto]; resultado = [...resultado, producto2]; resultado = [producto3, ...resultado ]; console.table(resultado); const carrito = []; // Definir un producto const producto = { nombre: "Monitor 32 Pulgadas", precio: 400 } const producto2 = { nombre: 'Celular', precio: 800 } const producto4 = { nombre: 'Celular 2', precio: 100 } // .push agrega al final de un arreglo carrito.push(producto2); carrito.push(producto); carrito.push(producto4); const producto3 = { nombre: 'Teclado', precio: 50 } carrito.unshift(producto3); console.table(carrito); // // Eliminar último elemento de un arreglo... // carrito.pop(); // console.table(carrito); // // Eliminar del inicio del arreglo // carrito.shift(); // console.table(carrito); carrito.splice(3, 1); console.table(carrito); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true } // const nombre = producto.nombre; // console.log(nombre); // Destructuring const { disponible } = producto; console.log(disponible); // Destructuring con Arreglos const numeros = [10,20,30,40,50]; const [ primero, ...tercero ] = numeros; console.log(tercero); const producto = { nombre: "Monitor 20 Pulgadas", precio: 300, disponible: true } // const nombre = producto.nombre; // console.log(nombre); // Destructuring const { disponible } = producto; console.log(disponible); // Destructuring con Arreglos const numeros = [10,20,30,40,50]; const [ primero, ...tercero ] = numeros; console.log(tercero); const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] for(let i = 0; i < carrito.length; i++ ) { console.log(`${carrito[i].nombre} -
Precio: ${carrito[i].precio }` ); } carrito.forEach( function(producto) { console.log(`${producto.nombre} -
Precio: ${producto.precio }` ); } ) const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] const nuevoArreglo = carrito.map( function(producto)
{ return `${producto.nombre} - Precio:
${producto.precio }` ; } ) const nuevoArreglo2 = carrito.forEach( function
(producto) { return `${producto.nombre} - Precio:
${producto.precio }` ; } ) console.log(nuevoArreglo); console.log(nuevoArreglo2); FUNCIONES // Declaración de Función ( Function Declaration ) function sumar() { console.log( 2 + 2); } sumar(); sumar(); sumar(); // Expresión de Función (Function Expression) const sumar2 = function() { console.log( 3 + 3); } sumar2(); // Declaración de Función ( Function Declaration ) sumar(); function sumar() { console.log( 2 + 2); } // Expresión de Función (Function Expression) sumar2(); const sumar2 = function() { console.log( 3 + 3); } // alert('hubo un error...'); // prompt('Cual es tu edad??'); console.log( parseInt('20') ); const numero1 = 20; const numero2 = "20"; console.log( parseInt(numero2) ) // Esto es
una función console.log( numero1.toString() ) // esto es
un método function sumar() { console.log( 2 + 2); } sumar(); function sumar(a, b) { // a y b son parametros console.log( a + b ); } sumar(2, 3); // 2 y 3 son argumentos sumar(200, 184); sumar(124, 321); function saludar(nombre, apellido) { console.log(`Hola ${nombre} ${apellido}`); } saludar('Juan', 'De la torre'); saludar(); function saludar(nombre = 'Desconocido',
apellido = '') { console.log(`Hola ${nombre} ${apellido}`); } saludar('Juan'); iniciarApp(); function iniciarApp() { console.log('Iniciando app...'); segundaFuncion(); } function segundaFuncion() { console.log('Desde la segunda función'); usuarioAutenticado('Pablo'); } function usuarioAutenticado(usuario) { console.log('Autenticando usuario... espere...'); console.log(`Usuario autenticado exitosamente:
${usuario} `); } function sumar(a, b) { return a + b ; } const resultado = sumar(2, 3); console.log(resultado); // Ejemplo más avanzado let total = 0; function agregarCarrito(precio) { return total += precio; } function calcularImpuesto(total) { return total * 1.15; } total = agregarCarrito(300); total = agregarCarrito(100); total = agregarCarrito(600); const totalPagar = calcularImpuesto(total); console.log(`El total a pagar es de ${totalPagar}`); console.log(total); const reproductor = { reproducir: function(id) { console.log(`Reproduciendo canción id ${id}`); }, pausar: function() { console.log('pausando...') }, borrar: function(id) { console.log(`Borrando canción... ${id}`) }, crearPlaylist: function(nombre) { console.log(`Creando la playlist de ${nombre}`) }, reproducirPlaylist: function(nombre) { console.log(`Reproduciendo playlist ${nombre}`) } } reproductor.reproducir(30) reproductor.reproducir(20) reproductor.pausar(); reproductor.borrar(30) reproductor.crearPlaylist('Heavy Metal'); reproductor.crearPlaylist('Rock 90s'); reproductor.reproducirPlaylist('Heavy Metal') const aprendiendo = function() { console.log('Aprendiendo JavaScript'); } const aprendiendo2 = () => 'Aprendiendo JavaScript'; console.log(aprendiendo2()); const aprendiendo = function(tecnologia,
tecnologia2) { console.log(`Aprendiendo ${tecnologia} y
${tecnologia2}`); } aprendiendo('JavaScript', 'Node.js') const aprendiendo2 = (tecnologia, tecnologia2) =>
`Aprendiendo ${tecnologia} y ${tecnologia2}`; console.log(aprendiendo2('JavaScript', 'Node.js')); const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] const nuevoArreglo = carrito.map( producto =>
`${producto.nombre} - Precio: ${producto.precio }` ) carrito.forEach( producto =>
console.log( `${producto.nombre} -
Precio: ${producto.precio }` ) ); console.log(nuevoArreglo); const reproductor = { cancion: '', reproducir: id => console.log(`Reproduciendo
canción con el id ${id}`), pausar: () =>console.log('pausando...'), borrar: id => console.log(`Borrando canción...
${id}`), crearPlaylist: nombre => console.log(`Creando la
playlist de ${nombre}`), reproducirPlaylist: nombre =>
console.log(`Reproduciendo la playlist ${nombre}`), set nuevaCancion(cancion) { this.cancion = cancion; console.log(`Añadiendo ${cancion}`); }, get obtenerCancion() { console.log(`${this.cancion}`) } } reproductor.nuevaCancion = 'Enter Sandman'; reproductor.obtenerCancion; reproductor.reproducir(30) reproductor.reproducir(20) reproductor.pausar(); reproductor.borrar(30) reproductor.crearPlaylist('Heavy Metal'); reproductor.crearPlaylist('Rock 90s'); reproductor.reproducirPlaylist('Heavy Metal') ESTRUCTURAS const puntaje = 1001; if(puntaje == 1000) { console.log('si es igual...') } const puntaje = 1000; const puntaje2 = "1000"; console.log(typeof puntaje) console.log(typeof puntaje2) // if(puntaje != 1000) {
// != diferente == igual a // console.log('si! es diferente') // } if(puntaje !== "1000") {
// != diferente == igual a console.log('Si es diferente!') } else { console.log('No no es diferente') } // == Operador que no es estrictor // === Operador Estricto // Operador Mayor que y menor que const dinero = 300; const totalAPagar = 300; if( dinero >= totalAPagar ) { console.log('Si podemos pagar'); } else { console.log('Fondos Insuficientes'); } // Operador Mayor que y menor que const dinero = 100; const totalAPagar = 500; const tarjeta = false; const cheque = false; if( dinero >= totalAPagar ) { console.log('Si podemos pagar'); } else if(cheque) { console.log('Si tengo un cheque'); } else if(tarjeta) { console.log('Si puedo pagar porque tengo tarjeta') } else { console.log('Fondos Insuficientes'); } // Switch case const metodoPago = 'efectivo'; switch(metodoPago) { case 'efectivo': pagar(); break; case 'cheque': console.log(`Pagaste con ${metodoPago}`); break; case 'tarjeta': console.log(`Pagaste con ${metodoPago}`); break; default: console.log('Aún no has seleccionado un
método de pago o método de pago no soportado'); break; } function pagar() { console.log('Pagando...'); } const usuario = false; const puedePagar = false; if(usuario && puedePagar) { console.log('Si puedes comprar') } else if(!puedePagar && !usuario) { console.log('No no puedes comprar') } else if(!usuario) { console.log('Inicia sesión o saca una cuenta'); } else if(!puedePagar) { console.log('Fondos Insuficientes') } const efectivo = 300; const credito = 400; const disponible = efectivo + credito; const totalPagar = 600; if( efectivo > totalPagar || credito >
totalPagar || disponible > totalPagar ) { console.log('Si podemos pagar') } else { console.log('Fondos Insuficientes'); } const autenticado = true; if(autenticado) { console.log('El usuario esta autenticado') } const puntaje = 450; function revisarPuntaje() { if( puntaje > 400 ) { console.log('Excelente!!'); return; } if (puntaje > 300) { console.log('Buen puntaje... felicidades'); return; } } revisarPuntaje(); const autenticado = false; const puedePagar = false; console.log( autenticado ? puedePagar ?
'Si esta autenticado y puede pagar' :
'Si autenticado, no puede pagar' :
'No no esta autenticado' ); ITERADORES Y BUCLES // for( let i = 0; i <= 10; i++ ) { // console.log(`Numero: ${i}`) // } // for(let i = 1; i <= 20; i++ ) { // if( i % 2 === 0 ) { // console.log(`El número ${i} es PAR`); // } else { // console.log(`El número ${i} es IMPAR`); // } // } const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] console.log( carrito.length ); for(let i = 0; i < carrito.length; i++ ) { console.log(carrito[i].nombre); } // for( let i = 0; i <= 10; i++ ) { // if(i === 5) { // console.log('CINCO'); // continue; // } // console.log(`Numero: ${i}`) // } const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200, descuento: true }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] for(let i = 0; i < carrito.length; i++ ) { if(carrito[i].descuento) { console.log(`El articulo ${carrito[i].nombre}
Tiene descuento `); continue; } console.log(carrito[i].nombre) } // Fizz buzz - 100 Números // 3 6 9 12 ... fizz // 5 10 15 20 ... buzz // 15 30 45 ... FIZZBUZZ! for(let i = 1; i < 100; i++ ) { if (i % 15 === 0) { console.log(`${i} FIZZ BUZZ!!!`) } else if( i % 3 === 0 ) { console.log(`${i} fizz`) } else if (i % 5 === 0) { console.log(`${i} buzz`) } } let i = 100; // Inicializar el While while(i < 10) { // Condición console.log(`Número ${i}`) i++; // Incremento } let i = 1; // Inicio do { if (i % 15 === 0) { console.log(`${i} FIZZ BUZZ!!!`) } else if( i % 3 === 0 ) { console.log(`${i} fizz`) } else if (i % 5 === 0) { console.log(`${i} buzz`) } i++; // Incremento } while ( i < 100); // Condición // forEach const pendientes = ['Tarea', 'Comer', 'Proyecto',
'Estudiar JavaScript']; pendientes.forEach( (pendiente, indice) => { console.log(`${indice} : ${pendiente}`) }) const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] const nuevoArreglo = carrito.forEach(
producto => producto.nombre); const nuevoArreglo2 = carrito.map(
(producto) => producto.nombre); console.log(nuevoArreglo); console.log(nuevoArreglo2); const pendientes = ['Tarea', 'Comer', 'Proyecto',
'Estudiar JavaScript']; const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] for( let pendiente of pendientes ) { console.log(pendiente); } for( let producto of carrito) { console.log(producto.nombre) } const automovil = { modelo: 'Camaro', year: 1969, motor: '6.0' } // for(let propiedad in automovil) { // console.log(`${automovil[propiedad]}`) // } for( let [llave, valor] of Object.entries
(automovil) ) { console.log(valor); console.log(llave); } ARRAY METODOS const meses = ['Enero', 'Febrero', 'Marzo', 'Abril',
'Mayo', 'Junio', 'Julio']; const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] // Comprobar si un valor existe en un arreglo // meses.forEach( mes => { // if(mes === 'Enero') { // console.log('Enero si existe') // } // }); // const resultado = meses.includes('Diciembre'); // console.log(resultado) // En un arreglo de objetos se utiliza .some const existe = carrito.some(
producto => producto.nombre === 'Monitor Curvo' ); console.log(existe); // En un arreglo tradicional con .some const existe2 = meses.some(
mes => mes === 'Febrero' ); console.log(existe2); const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio']; const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 100 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] meses.forEach( (mes, i) => { if(mes === 'Abril') { console.log(`Encontrado en el indice ${i}`) } } ) // Encontrar el indice de Abril const indice = meses.findIndex(
mes => mes === 'Diciembre'); console.log(indice); // Encontrar un indice de un arreglo de objetos... const indice2 = carrito.findIndex(
producto => producto.precio === 100 ); console.log(indice2); const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 100 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] // con un foreach let total = 0; carrito.forEach(
producto => total += producto.precio ); console.log(total); // Con un reduce let resultado = carrito.reduce(
(total, producto) => total + producto.precio, 0); console.log(resultado); const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 100 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ]; let resultado; resultado = carrito.filter(
producto => producto.precio > 400 ); resultado = carrito.filter(
producto => producto.precio < 600 ); resultado = carrito.filter(
producto => producto.nombre !== 'Audifonos' ) resultado = carrito.filter(
producto => producto.nombre === 'Audifonos' ) console.log(resultado); const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 100 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ]; // con un foreach let resultado = ''; carrito.forEach((producto, index) => { if(producto.nombre === 'Tablet') { resultado = carrito[index] } }); console.log(resultado) // con .find const resultado2 = carrito.find(
producto => producto.precio === 1000 ); console.log(resultado2); const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 100 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ]; const resultado = carrito.every(
producto => producto.precio < 500 ); console.log(resultado) const resultado2 = carrito.some(
producto => producto.precio < 500 ); console.log(resultado2) const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio']; const meses2 = ['Agosto', 'Septiembre']; const meses3 = ['Octubre', 'Noviembre',
'Diciembre']; // .concat const resultado = meses.concat(meses3, meses2); console.log(resultado); // spread operator const resultado2 = [...meses3, ...meses, ...meses2]; console.log(resultado2); const meses = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio']; const carrito = [ { nombre: 'Monitor 27 Pulgadas', precio: 500 }, { nombre: 'Televisión', precio: 100 }, { nombre: 'Tablet', precio: 200 }, { nombre: 'Audifonos', precio: 300 }, { nombre: 'Teclado', precio: 400 }, { nombre: 'Celular', precio: 700 }, ] // spread operator con arreglo de indices const meses2 = ['Agosto', ...meses ]; console.log(meses2); const producto = { nombre: 'Disco Duro',
precio: 300 }; const carrito2 = [producto, ...carrito ]; console.log(carrito2); DOM DOCUMENT OBJECT MODEL let elemento; elemento = document; elemento = document.all; elemento = document.head; elemento = document.body; elemento = document.domain; elemento = document.forms; elemento = document.forms[0]; elemento = document.forms[0].id; elemento = document.forms[0].method; elemento = document.forms[0].classList; elemento = document.forms[0].action; elemento = document.links; elemento = document.links[4]; elemento = document.links[4].classList; elemento = document.links[4].className; elemento = document.images; elemento = document.scripts; console.log(elemento); // Seleccionar elementos por su clase... const header = document.getElementsByClassName
('header'); console.log(header); const hero = document.getElementsByClassName
('hero'); console.log(hero); // Si las clases existen más de 1 vez const contenedores = document.getElementsByClassName
('contenedor'); console.log(contenedores); // Si una clase no existe const noExiste = document.getElementsByClassName
('no-existe'); console.log(noExiste); const formulario = document.getElementById
('formulario'); console.log(formulario); const card = document.querySelector('.card'); console.log(card); // Podemos tener selectores especificos como en CSS const info = document.querySelector('.premium
.info'); console.log(info); // Seleccionar el segundo card de hospedaje const segundoCard = document.querySelector
('section.hospedaje .card:nth-child(2)'); console.log(segundoCard); // Seleccionar el formulario const formulario = document.querySelector
('.contenido-hero #formulario'); console.log(formulario); // Seleccionar elementos HTML const navegacion = document.querySelector('nav'); console.log(navegacion); const card = document.querySelectorAll('.card'); console.log(card); const formularios = document.querySelectorAll
('#formulario'); console.log(formularios); // Si un elemento no existe const noExiste = document.querySelectorAll
('no-existe'); console.log(noExiste) const encabezado = document.querySelector
('.contenido-hero h1'); console.log(encabezado); // console.log(encabezado.innerText);
// si en el CSS - visibility: hidden; no lo
va a encontrar // console.log(encabezado.textContent);
// si lo va a encontrar // console.log(encabezado.innerHTML);
// se trae el HTML // const nuevoHeading = 'Nuevo Heading'; // document.querySelector('.contenido-hero h1')
.textContent = nuevoHeading; const imagen = document.querySelector('.card img'); imagen.src = 'img/hacer2.jpg'; // const encabezado = document.querySelector('h1'); // encabezado.style.backgroundColor = 'red'; // encabezado.style.fontFamily = 'Arial'; // encabezado.style.textTransform = 'uppercase'; const card = document.querySelector('.card'); card.classList.add('nueva-clase', 'segunda-clase'); card.classList.remove('card'); console.log(card.classList); const navegacion = document.querySelector
('.navegacion'); console.log(navegacion.firstElementChild) console.log(navegacion.lastElementChild) // console.log(navegacion.childNodes)
// Los espacios en blanco son considerados elementos // console.log(navegacion.children)
// Los espacios en blanco son considerados elementos // console.log(navegacion.children[1].nodeName) // console.log(navegacion.children[1].nodeType) const card = document.querySelector('.card'); // card.children[1].children[1].textContent =
'Nuevo heading desde traversing the dom' // card.children[0].src = 'img/hacer3.jpg'; // console.log(card.children[0]); // Traversing the Hijo al padre // console.log(card.parentNode); // console.log(card.parentElement
.parentElement.parentElement); // console.log(card); // console.log(card.nextElementSibling); // console.log(card.nextElementSibling
.nextElementSibling); // const ultimoCard = document.querySelector
('.card:nth-child(4)'); // console.log(ultimoCard.previousElementSibling) // const primerEnlace = document.querySelector('a'); // primerEnlace.remove(); // Eliminar desde el padre... const navegacion = document.querySelector
('.navegacion'); console.log(navegacion.children); navegacion.removeChild( navegacion.children[2] ); const enlace = document.createElement('A'); // Agregandole el texto enlace.textContent = 'Nuevo Enlace'; // añadiendo href enlace.href = '/nuevo-enlace'; console.log(enlace); enlace.target = "_blank"; enlace.setAttribute('data-enlace', 'nuevo-enlace') enlace.classList.add('alguna-clase') // Seleccionar la navegacion const navegacion = document.querySelector
('.navegacion'); // console.log(navegacion.children); navegacion.insertBefore(enlace,
navegacion.children[1]); // Crear un CARD const parrafo1 = document.createElement('P'); parrafo1.textContent = 'Concierto'; parrafo1.classList.add('categoria', 'concierto'); const parrafo2 = document.createElement('P'); parrafo2.textContent = 'Concierto de Rock'; parrafo2.classList.add('titulo'); const parrafo3 = document.createElement('P'); parrafo3.textContent = '$800 por persona'; parrafo3.classList.add('precio'); // Crear div con la clase de info const info = document.createElement('div'); info.classList.add('info'); info.appendChild(parrafo1) info.appendChild(parrafo2) info.appendChild(parrafo3) // Crear la imagen const imagen = document.createElement('img'); imagen.src = 'img/hacer2.jpg'; // Crear el card const card = document.createElement('div'); card.classList.add('card'); // Asignar la imagen card.appendChild(imagen); // asignar info card.appendChild(info); // Insertar en el HTML const contenedor = document.querySelector
('.hacer .contenedor-cards'); contenedor.insertBefore(card,
contenedor.children[0]); const btnFlotante = document.querySelector
('.btn-flotante'); const footer = document.querySelector('.footer'); btnFlotante.addEventListener('click',
mostrarOcultarFooter); function mostrarOcultarFooter() { if( footer.classList.contains('activo') ) { footer.classList.remove('activo'); this.classList.remove('activo'); this.textContent = 'Idioma y Moneda' } else { footer.classList.add('activo'); this.classList.add('activo'); this.textContent = 'X Cerrar'; } } EVENTOS / console.log(1); document.addEventListener('DOMContentLoaded', () => { console.log(2); }) console.log(3); const nav = document.querySelector('.navegacion'); // registrar un evento nav.addEventListener('mouseout', () => { console.log('saliendo de la navegacion'); nav.style.backgroundColor = 'transparent'; }) nav.addEventListener('dblclick', () => { console.log('Entrando en la navegacion'); nav.style.backgroundColor = 'white'; }) // mousedown - similar al click // click // dblclick = doble click // mouseup - cuando sueltas el mouse const busqueda = document.querySelector('.busqueda'); busqueda.addEventListener('input', (e) => { if(e.target.value === '') { console.log('fallo la validación') } }) const formulario = document.querySelector
('#formulario'); formulario.addEventListener('submit',
validarFormulario); function validarFormulario(e) { e.preventDefault(); console.log('Consultar una api') console.log(e.target.action); } window.addEventListener('scroll', () => { const premium = document.querySelector('.premium'); const ubicacion = premium.getBoundingClientRect(); if(ubicacion.top < 784) { console.log('El elemento ya esta visible'); } else { console.log('Aún no, da mas scroll'); } }) // Event Bubbling const cardDiv = document.querySelector('.card'); const infoDiv = document.querySelector('.info'); const titulo = document.querySelector('.titulo'); cardDiv.addEventListener('click', e => { e.stopPropagation() console.log('click en card'); }); infoDiv.addEventListener('click', e => { e.stopPropagation() console.log('click en info'); }); titulo.addEventListener('click', e => { e.stopPropagation() console.log('click en titulo'); }); const cardDiv = document.querySelector('.card'); cardDiv.addEventListener('click', e => { if(e.target.classList.contains('titulo')) { console.log('Diste click en titulo') } if(e.target.classList.contains('precio')) { console.log('Diste click en precio') } if(e.target.classList.contains('card')) { console.log('Diste click en card') } }); // Evitar la propagación con contenido creado... const parrafo1 = document.createElement('P'); parrafo1.textContent = 'Concierto'; parrafo1.classList.add('categoria'); parrafo1.classList.add('concierto'); // Segundo parrafo const parrafo2 = document.createElement('P'); parrafo2.textContent = 'Concierto de Rock'; parrafo2.classList.add('titulo'); // 3er parrafo... const parrafo3 = document.createElement('p'); parrafo3.textContent = '$800 por persona'; parrafo3.classList.add('precio'); parrafo3.onclick = function() { nuevaFuncion(1) } // crear el div... const info = document.createElement('div'); info.classList.add('info'); info.appendChild(parrafo1) info.appendChild(parrafo2) info.appendChild(parrafo3); // Vamos a crear la imagen const imagen = document.createElement('img'); imagen.src = 'img/hacer2.jpg'; // Crear el Card.. const contenedorCard = document.createElement('div'); contenedorCard.classList.add('contenedorCard'); // Vamos a asignar la imagen al card... contenedorCard.appendChild(imagen); // y el info contenedorCard.appendChild(info); // Insertarlo en el HTML... const contenedor = document.querySelector
('.hacer .contenedor-cards'); contenedor.appendChild(contenedorCard);
// al inicio info function nuevaFuncion(id) { console.log('desde nueva función', id) } LOCAL STORAGE localStorage.setItem('nombre', 1); const producto = { nombre : "Monitor 24 Pulgadas", precio: 300 } const productoString = JSON.stringify( producto ); localStorage.setItem('producto', productoString); const meses = ['Enero', 'Febrero', 'Marzo']; localStorage.setItem('meses', JSON.stringify
( meses )); const nombre = localStorage.getItem('nombre'); console.log(nombre); const productoJSON = localStorage.getItem
('producto'); console.log(JSON.parse( productoJSON) ); const meses = localStorage.getItem('meses'); const mesesArray = JSON.parse(meses); console.log(mesesArray); localStorage.removeItem('nombre'); // Actualizar un registro const mesesArray = JSON.parse( localStorage.getItem
('meses') ); console.log(mesesArray); mesesArray.push('Nuevo Mes'); console.log(mesesArray); localStorage.setItem('meses', JSON.stringify
(mesesArray)); localStorage.clear(); FECHAS ///////////////////// const diaHoy = new Date(); let valor; valor = diaHoy; valor = diaHoy.getFullYear(); valor = diaHoy.getMonth(); valor = diaHoy.getMinutes(); valor = diaHoy.getHours(); valor = diaHoy.getTime(); valor = diaHoy.setFullYear(2010); console.log(diaHoy); const diaHoy = new Date(); moment.locale('es'); console.log( moment().format('MMMM Do YYYY h:mm:ss a') ) console.log( moment().format('LLLL', diaHoy) ); console.log( moment().add(3, 'days').calendar() ) PROTOTYPES const cliente = { nombre: 'Juan', saldo: 500 } console.log(cliente); function Cliente(nombre, saldo) { this.nombre = nombre; this.saldo = saldo; } const juan = new Cliente('Juan', 500); console.log(juan); function Cliente(nombre, saldo) { this.nombre = nombre; this.saldo = saldo; } const juan = new Cliente('Juan', 500); function formatearCliente(cliente) { const {nombre, saldo} = cliente; return `El Cliente ${nombre} tiene un saldo de
${saldo}`; } function formatearEmpresa(empresa) { const {nombre, saldo, categoria} = empresa; return `El Cliente ${nombre} tiene un saldo de
${saldo} y pertenecea la categoría ${categoria}`; } console.log( formatearCliente(juan) ); function Empresa(nombre, saldo, categoria) { this.nombre = nombre; this.saldo = saldo; this.categoria = categoria; } const CCJ = new Empresa('Código con Juan', 4000,
'Cursos en Línea'); console.log(formatearEmpresa(CCJ)); function Cliente(nombre, saldo) { this.nombre = nombre; this.saldo = saldo; } Cliente.prototype.tipoCliente = function() { let tipo; if(this.saldo > 10000) { tipo = 'Gold'; } else if(this.saldo > 5000) { tipo = 'Platinum'; } else { tipo = 'Normal'; } return tipo; } Cliente.prototype.nombreClienteSaldo = function() { return `Nombre: ${this.nombre}, Saldo: ${this.saldo}
, Tipo Cliente: ${this.tipoCliente() }` } Cliente.prototype.retiraSaldo = function(retira) { this.saldo -= retira } // Instanciarlo const pedro = new Cliente('Pedro', 6000); console.log( pedro.tipoCliente() ); console.log( pedro.nombreClienteSaldo() ); pedro.retiraSaldo(1000); console.log( pedro.nombreClienteSaldo() ); console.log(pedro); function Cliente(nombre, saldo) { this.nombre = nombre; this.saldo = saldo; } Cliente.prototype.tipoCliente = function() { let tipo; if(this.saldo > 10000) { tipo = 'Gold'; } else if(this.saldo > 5000) { tipo = 'Platinum'; } else { tipo = 'Normal'; } return tipo; } Cliente.prototype.nombreClienteSaldo = function() { return `Nombre: ${this.nombre}, Saldo:
${this.saldo}, Tipo Cliente: ${this.tipoCliente() }` } Cliente.prototype.retiraSaldo = function(retira) { this.saldo -= retira } function Persona(nombre, saldo, telefono) { Cliente.call(this, nombre, saldo); this.telefono = telefono; } Persona.prototype = Object.create
(Cliente.prototype ); Persona.prototype.constructor = Cliente; // Instanciarlo const juan = new Persona('Juan', 5000, 10920192); console.log(juan); console.log(juan.nombreClienteSaldo()); Persona.prototype.mostrarTelefono = function() { return `El teléfono de esta persona es
${this.telefono}` } console.log(juan.mostrarTelefono() ) PROGRAMACION ORIENTADA
A OBJETOS
class Cliente { constructor(nombre, saldo) { this.nombre = nombre; this.saldo = saldo; } mostrarInformacion() { return `Cliente: ${this.nombre}, tu saldo es de
${this.saldo}`; } static bienvenida() { return `Bienvenido al cajero` } } const juan = new Cliente('Juan', 400); console.log(juan.mostrarInformacion()); console.log(juan); console.log(juan.bienvenida()); console.log( Cliente.bienvenida() ) const Cliente2 = class { constructor(nombre, saldo) { this.nombre = nombre; this.saldo = saldo; } mostrarInformacion() { return `Cliente: ${this.nombre}, tu saldo es de
${this.saldo}`; } } const juan2 = new Cliente2('Juan', 400); console.log(juan2.mostrarInformacion()) console.log(juan2); class Cliente { constructor(nombre, saldo) { this.nombre = nombre; this.saldo = saldo; } mostrarInformacion() { return `Cliente: ${this.nombre}, tu saldo es de
${this.saldo}`; } static bienvenida() { return `Bienvenido al cajero` } } // Herencia class Empresa extends Cliente { constructor(nombre, saldo, telefono, categoria) { super( nombre, saldo ); this.telefono = telefono; this.categoria = categoria; } static bienvenida() { // reescribir un método return `Bienvenido al cajero de empresas` } } const juan = new Cliente('Juan', 400); const empresa = new Empresa('Código con Luis',
500, 1091391, 'Aprendizaje en Línea'); console.log(empresa); console.log(empresa.mostrarInformacion()) console.log(Cliente.bienvenida()); console.log(Empresa.bienvenida()); class Cliente { #nombre; setNombre(nombre) { this.#nombre = nombre; } getNombre() { return this.#nombre; } } const juan = new Cliente(); juan.setNombre('Juan'); console.log(juan.getNombre() ); SETS MAPS Y SYMBOL
const carrito = new Set(); carrito.add('Camisa'); carrito.add('Disco #1'); carrito.add('Disco #2'); carrito.add('Disco #3'); console.log( carrito.delete('Guitarra') ); // console.log( carrito.has('Guitarra') ); console.log(carrito.size); carrito.forEach( (producto, index, pertenece) => { // console.log(producto); // console.log(index); console.log(pertenece); } ) console.log(carrito); // Del siguiente arreglo, eliminar los duplicados const numeros = [10,20,30,40,50,10,20]; const noDuplicados = new Set(numeros); console.log(noDuplicados); // WeakSet const weakset = new WeakSet(); const cliente = { nombre: 'Juan', saldo: 100 } weakset.add(cliente); // console.log(weakset.has(cliente2)); // weakset.delete(cliente); console.log(cliente.size); console.log(weakset); const cliente = new Map(); cliente.set('nombre', 'Karen'); cliente.set('tipo', 'Premium'); cliente.set('saldo', 3000); console.log(cliente.size); console.log(cliente.has('nombre2')); console.log(cliente.get('nombre')); cliente.delete('saldo'); console.log(cliente.has('saldo')); console.log(cliente.get('saldo')); cliente.clear(); console.log(cliente); const paciente = new Map([ ['nombre', 'paciente'],
['cuarto', 'no definido'] ]); paciente.set('dr', 'Dr Asignado'); paciente.set('nombre', 'Antonio'); console.log(paciente); paciente.forEach( (datos, index) => { console.log(index); } ) const producto = { idProducto : 10 } const weakmap = new WeakMap(); weakmap.set(producto, 'Monitor'); console.log( weakmap.has(producto) ); console.log( weakmap.get(producto) ); console.log( weakmap.delete(producto) ); // console.log( weakmap.size ); console.log(weakmap) const sym = Symbol('1'); const sym2 = Symbol('1'); // console.log( Symbol() === Symbol() ); const nombre = Symbol(); const apellido = Symbol(); const persona = {} // Agregar nombre y apellido como llaves del objeto persona[nombre] = 'Juan'; persona[apellido] = 'De la torre'; persona.tipoCliente = 'Premium'; persona.saldo = 500 console.log(persona); // console.log(persona[nombre]); // Las propiedades que utilizan un symbol no son
iterables for(let i in persona) { console.log(i); } // Definir una descripción del symbol const nombreCliente = Symbol('Nombre del Cliente'); const cliente = {}; cliente[nombreCliente] = 'Pedro'; console.log(cliente); console.log(cliente[nombreCliente]); console.log(nombreCliente); function crearIterador(carrito) { let i = 0; return { siguiente: () => { const fin = ( i >= carrito.length ); const valor = !fin ? carrito[i++] : undefined ; return { fin, valor } } } } const carrito = ['Producto 1', 'Producto 2',
'Producto 3', 'Producto Nuevo']; // Utilizar el iterador const recorrerCarrito = crearIterador(carrito); console.log(recorrerCarrito.siguiente()); console.log(recorrerCarrito.siguiente()); console.log(recorrerCarrito.siguiente()); console.log(recorrerCarrito.siguiente()); console.log(recorrerCarrito.siguiente()); function *crearGenerador() { yield 1; yield 'Juan'; yield 3+3; yield true; } // const iterador = crearGenerador(); // console.log(iterador); // console.log(iterador.next().value); // console.log(iterador.next()); // console.log(iterador.next().value); // console.log(iterador.next()); // console.log(iterador.next()); // console.log(iterador); // Generador para carrito de compras function *generadorCarrito( carrito ) { for(let i = 0; i < carrito.length; i++ ) { yield carrito[i]; } } const carrito = ['Producto 1', 'Producto 2',
'Producto 3']; const iterador = generadorCarrito(carrito); console.log( iterador.next() ); console.log( iterador.next() ); console.log( iterador.next() ); console.log( iterador.next() ); const ciudades = ['Londres', 'New York', 'Madrid',
'Paris']; const ordenes = new Set([123, 231, 131, 102]); const datos = new Map(); datos.set('nombre', 'Juan'); datos.set('profesion', 'Desarrollador Web'); // Default for(let ciudad of ciudades) { console.log(ciudad); } for(let orden of ordenes) { console.log(orden); } for(let dato of datos) { console.log(dato); } // Keys Iterator // for( let keys of ciudades.keys() ) { // console.log(keys); // } // for( let keys of ordenes.keys() ) { // console.log(keys); // } // for( let keys of datos.keys() ) { // console.log(keys); // } // // Values Iterator // for( let value of ciudades.values()) { // console.log(value); // } // for( let value of ordenes.values()) { // console.log(value); // } // for( let value of datos.values()) { // console.log(value); // } // Entries Iterator // for (let entry of ciudades.entries() ) { // console.log(entry); // } // for (let entry of ordenes.entries() ) { // console.log(entry); // } // for (let entry of datos.entries() ) { // console.log(entry); // } MODULOS EN EL HTML HAY QUE PONER : <script src="js/app.js"
type="module"></script> APP.JS import nuevaFuncion, { nombreCliente, ahorro,
mostrarInformacion, tieneSaldo, Cliente }
from './cliente.js'; import { Empresa } from './empresa.js'; nuevaFuncion(); console.log( nombreCliente ); console.log( ahorro ); console.log( mostrarInformacion(nombreCliente,
ahorro) ); tieneSaldo(ahorro); const cliente = new Cliente( nombreCliente, ahorro ); console.log(cliente.mostrarInformacion()); // Importar empresa const empresa = new Empresa('Código Con Juan',
100, 'Aprendizaje en Línea'); console.log(empresa.mostrarInformacion()); CLIENTE.JS export const nombreCliente = 'Juan'; export const ahorro = 200; export function mostrarInformacion(nombre, ahorro) { return `Cliente: ${nombre} - Ahorro: ${ahorro}`; } export function tieneSaldo(ahorro) { if(ahorro > 0) { console.log('Si tiene saldo') } else { console.log('El Cliente no tiene saldo') } } export class Cliente { constructor(nombre, ahorro) { this.nombre = nombre; this.ahorro = ahorro; } mostrarInformacion() { return `Cliente: ${this.nombre} - Ahorro:
${this.ahorro}`; } } export default function nuevaFuncion() { console.log('Este es el export default'); } EMPRESA.JS import { Cliente } from './cliente.js'; export class Empresa extends Cliente { constructor(nombre, ahorro, categoria) { super(nombre, ahorro); this.categoria = categoria; } mostrarInformacion() { return `Cliente: ${this.nombre} - Ahorro:
${this.ahorro} - Categoria: ${this.categoria}`; } } INDEX DB let DB; document.addEventListener('DOMContentLoaded', () => { crmDB(); setTimeout(() => { crearCliente(); }, 5000); }) function crmDB() { // Crear base de datos version 1.0 let crmDB = window.indexedDB.open('crm', 1); // Si hay un error crmDB.onerror = function() { console.log('Hubo error a la hora de crear la BD'); } // si se creo bien crmDB.onsuccess = function() { console.log('Base de datos Creada!'); DB = crmDB.result; } // Configuración de la base de datos crmDB.onupgradeneeded = function(e) { const db = e.target.result; const objectStore = db.createObjectStore('crm', { keyPath: 'crm', autoIncrement: true }); // Definir las columnas objectStore.createIndex('nombre', 'nombre',
{ unique: false }); objectStore.createIndex('email', 'email',
{ unique: true }); objectStore.createIndex('telefono', 'telefono',
{ unique: false }); console.log('Columnas Creadas'); } } function crearCliente() { let transaction = DB.transaction(['crm'],
'readwrite'); transaction.oncomplete = function() { console.log('Transacción Completada'); } transaction.onerror = function() { console.log('Hubo un error en la transacción'); } const objectStore = transaction.objectStore('crm'); const nuevoCliente = { telefono: 19009120, nombre: 'Juan', email: 'correo@correo.com' } const peticion = objectStore.put(nuevoCliente); console.log(peticion); } PROMISES const paises = ['Francia', 'España', 'Portugal',
'Australia', 'Inglaterra']; function nuevoPais(pais, callback) { setTimeout(() => { paises.push(pais); callback(); }, 2000); } function mostrarPaises() { setTimeout(() => { paises.forEach(pais => { console.log(pais); }); }, 1000); } mostrarPaises(); nuevoPais('Alemania', mostrarPaises); const paises = []; function nuevoPais(pais, callback) { paises.push(pais); console.log(`Agregado: ${pais}`); callback(); } function mostrarPaises() { console.log(paises); } function iniciarCallbackHell() { setTimeout(() => { nuevoPais('Alemania', mostrarPaises); setTimeout(() => { nuevoPais('Francia', mostrarPaises); setTimeout(() => { nuevoPais('Inglaterra', mostrarPaises); }, 3000); }, 3000); }, 3000); } iniciarCallbackHell(); const aplicarDescuento = new Promise( (resolve,
reject) => { const descuento = true; if(descuento) { resolve('Descuento Aplicado'); } else { reject('No se pudo aplicar') } } ) aplicarDescuento .then( resultado => descuento(resultado)) .catch(error => console.log(error)) // Hay 3 valores posibles... // fulfilled - El promise se cumplió // rejected - El Promise no se cumplió // pending - No se ha cumplido y tampoco fue
rechazado function descuento(mensaje) { console.log(mensaje); } const paises = []; const nuevoPais = pais => new Promise( resolve => { setTimeout(() => { paises.push(pais); resolve('El resultado del Resolve') }, 3000); } ) nuevoPais('Alemania') .then( resultado => { console.log(resultado); console.log(paises); return nuevoPais('Francia') }) .then( resultado => { console.log(resultado) console.log(paises); return nuevoPais('Inglaterra') } ) .then( resultado => { console.log(resultado); }) FETCH API const cargarTxtBtn = document.querySelector
('#cargarTxt'); cargarTxtBtn.addEventListener('click', obtenerDatos); function obtenerDatos() { const url = 'data/datos.txt'; fetch(url) .then( respuesta => { console.log(respuesta); console.log(respuesta.status); console.log(respuesta.statusText); console.log(respuesta.url); console.log(respuesta.type); return respuesta.text() }) .then( datos => { console.log(datos) } ) .catch( error => { console.log(error); }) } const cargarJSONBtn = document.querySelector
('#cargarJSON'); cargarJSONBtn.addEventListener('click',
obtenerDatos); function obtenerDatos() { const url = 'data/empleado.json'; fetch(url) .then( respuesta => respuesta.json() ) .then( resultado => mostrarHTML(resultado) ) } function mostrarHTML({ empresa, id, nombre,
trabajo }) { const contenido = document.querySelector
('.contenido'); contenido.innerHTML = ` <p>Empleado: ${nombre}</p> <p>ID: ${id}</p> <p>Empresa: ${empresa}</p> <p>Trabajo: ${trabajo}</p> `; } const cargarJSONArrayBtn = document.querySelector
('#cargarJSONArray'); cargarJSONArrayBtn.addEventListener('click',
obtenerDatos); function obtenerDatos() { const url = 'data/empleados.json'; fetch(url) .then(respuesta => respuesta.json() ) .then(resultado => mostrarHTML(resultado)) } function mostrarHTML(empleados) { const contenido = document.querySelector
('.contenido'); let html = ''; empleados.forEach( empleado => { const { id, nombre, empresa, trabajo } = empleado; html += ` <p>Empleado: ${nombre}</p> <p>ID: ${id}</p> <p>Empresa: ${empresa}</p> <p>Trabajo: ${trabajo}</p> `; } ); contenido.innerHTML = html; } const cargarAPIBtn = document.querySelector
('#cargarAPI'); cargarAPIBtn.addEventListener('click',
obtenerDatos); function obtenerDatos() { const url = 'https://picsum.photos/list'; fetch(url) .then(respuesta => respuesta.json()) .then( resultado => mostrarHTML( resultado )); } function mostrarHTML(datos) { const contenido = document.querySelector
('.contenido'); let html = ''; datos.forEach( perfil => { const { author, post_url } = perfil; html += ` <p>Autor: ${author}</p> <a href="${post_url}" target="_blank">Ver Imagen</a> ` }); contenido.innerHTML = html; } ARCHIVOS: DATOS.TXT Informacion desde un archivo .txt EMPLEADO.JSON { "id" : 1, "nombre" : "Juan", "empresa" : "Código Con Juan", "trabajo" : "Desarrollador Web" } EMPLEADOS.JSON [ { "id" : 1, "nombre" : "Juan", "empresa" : "Código con Juan", "trabajo" : "Desarrollador Web" }, { "id" : 2, "nombre" : "Alejandra", "empresa" : "Código con Juan", "trabajo" : "Diseñadora" }, { "id" : 3, "nombre" : "Pedro", "empresa" : "Código con Juan", "trabajo" : "Aplicaciones Móviles" } ] ASYNC AWAIT console.log(1 + 1); try { autenticarUsuario(); } catch (error) { console.log(error); } console.log(2 + 2); function descargarClientes() { return new Promise((resolve, reject) => { const error = true; setTimeout(() => { if(!error) { resolve('El Listado de Clientes se descargo
correctamente'); } else { reject('Error en la conexión'); } }, 3000); }) } // Async await async function ejecutar() { try { console.log(1 + 1); const respuesta = await descargarClientes(); console.log( 2 + 2); console.log(respuesta); } catch (error) { console.log(error); } } ejecutar(); function descargarClientes() { return new Promise((resolve, reject) => { const error = false; setTimeout(() => { if(!error) { resolve('El Listado de Clientes se descargo
correctamente'); } else { reject('Error en la conexión'); } }, 3000); }) } async function ejecutar() { } // Async await const ejecutar = async () => { try { console.log(1 + 1); const respuesta = await descargarClientes(); console.log( 2 + 2); console.log(respuesta); } catch (error) { console.log(error); } } ejecutar(); function descargarNuevosClientes() { return new Promise( resolve => { console.log('Descargando clientes....'); setTimeout(() => { resolve('Los clientes fueron descargados'); }, 5000); }) } function descargarNuevosPedidos() { return new Promise( resolve => { console.log('Descargando pedidos....'); setTimeout(() => { resolve('Los pedidos fueron descargados'); }, 3000); }) } const app = async () => { try { const respuesta = await Promise.all
([ descargarNuevosClientes(),
descargarNuevosPedidos()]); console.log(respuesta[0]); console.log(respuesta[1]); } catch (error) { console.log(error); } } app(); const url = 'https://picsum.photos/list'; document.addEventListener('DOMContentLoaded',
obtenerDatos); function obtenerDatos() { fetch(url) .then(respuesta => respuesta.json()) .then(resultado => console.log(resultado)) .catch(error => console.log(error)); } async function obtenerDatos() { try { const respuesta = await fetch(url); const resultado = await respuesta.json(); console.log(resultado); } catch (error) { console.log(error); } } FUNCTIONAL JS const suma = function(a, b) { return a + b; } const resultado = suma; console.log(resultado(10, 20)); const suma = (a, b) => a + b; const multiplicar = (a, b) => a * b; const sumarOMultiplicar = fn => fn(10, 20); console.log( sumarOMultiplicar( suma ) ); console.log( sumarOMultiplicar( multiplicar ) ); const carrito = [ { nombre: 'Monitor 20 Pulgadas', precio: 500}, { nombre: 'Televisión 50 Pulgadas', precio: 700}, { nombre: 'Tablet', precio: 300}, { nombre: 'Audifonos', precio: 200}, { nombre: 'Teclado', precio: 50}, { nombre: 'Celular', precio: 500}, { nombre: 'Bocinas', precio: 300}, { nombre: 'Laptop', precio: 800}, ]; const mayor400 = producto => { return producto.precio > 400; } const resultado = carrito.filter(mayor400); console.log(carrito); console.log(resultado); const carrito = [ { nombre: 'Monitor 20 Pulgadas', precio: 500}, { nombre: 'Televisión 50 Pulgadas', precio: 700}, { nombre: 'Tablet', precio: 300}, { nombre: 'Audifonos', precio: 200}, { nombre: 'Teclado', precio: 50}, { nombre: 'Celular', precio: 500}, { nombre: 'Bocinas', precio: 300}, { nombre: 'Laptop', precio: 800}, ]; const obtenerNombres = producto => { return producto.nombre; } const resultado = carrito.map( obtenerNombres ); console.log(resultado); const carrito = [ { nombre: 'Monitor 20 Pulgadas', precio: 500}, { nombre: 'Televisión 50 Pulgadas', precio: 700}, { nombre: 'Tablet', precio: 300}, { nombre: 'Audifonos', precio: 200}, { nombre: 'Teclado', precio: 50}, { nombre: 'Celular', precio: 500}, { nombre: 'Bocinas', precio: 300}, { nombre: 'Laptop', precio: 800}, ]; const obtenerNombres = p => p.nombre; const resultado = carrito.map( obtenerNombres ); console.log(resultado); const mayor400 = p => p.precio > 400; const resultado2 = carrito.filter(mayor400); console.log(resultado2); // Funciones Puras o Pure Functions const numero1 = 20; const duplicar = numero => numero * 2; const resultado = duplicar(numero1); console.log(resultado); console.log(numero1); const obtenerCliente = () => () => console.log
('Juan Pablo'); const fn = obtenerCliente(); fn(); const obtenerCliente = () => { const nombre = "Juan"; function muestraNombre() { console.log(nombre); } return muestraNombre; } const cliente = obtenerCliente(); cliente(); const suma = (a,b,c) => a + b + c; const parcial = a => b => c => suma(a,b,c); const resultadoParcial = parcial(5)(4)(3); console.log(resultadoParcial); const obtenerNombre = info => ({ mostrarNombre() { console.log(`Nombre: ${info.nombre}`); } }); const guardarEmail = info => ({ agregarEmail(email) { console.log(`Guardando email en: ${info.nombre}`); info.email = email; } }) const obtenerEmail = info => ({ mostrarEmail() { console.log(`Correo: ${info.email}`); } }) const obtenerEmpresa = info => ({ mostrarEmpresa() { console.log(`Empresa: ${info.empresa}`); } }) const obtenerPuesto = info => ({ mostrarPuesto() { console.log(`Empresa: ${info.puesto}`); } }) function Cliente(nombre, email, empresa) { let info = { nombre, email, empresa } return Object.assign( info, obtenerNombre(info), guardarEmail(info), obtenerEmail(info), obtenerEmpresa(info) ) } function Empleado(nombre, email, puesto) { let info = { nombre, email, puesto } return Object.assign( info, obtenerNombre(info), guardarEmail(info), obtenerEmail(info), obtenerPuesto(info) ) } const cliente = Cliente('Juan', null, 'Código
Con luis'); cliente.mostrarNombre(); cliente.agregarEmail('cliente@cliente.com'); cliente.mostrarEmail(); cliente.mostrarEmpresa(); console.log('==========') const empleado = Empleado('Pedro', null,
'Programador'); empleado.mostrarNombre(); empleado.agregarEmail('empleado@empleado.com'); empleado.mostrarEmail(); empleado.mostrarPuesto(); DOMINANDO JAVASCRIPT const login = true; const cliente = 'Juan'; function clienteLogueado() { } function funcion2() { console.log(cliente); } funcion2(); clienteLogueado(); obtenerCliente('Juan'); function obtenerCliente(nombre) { console.log(`El nombre del cliente es ${nombre}`); } const obtenerCliente2 = function(nombre) { console.log(`El nombre del cliente es ${nombre}`); } obtenerCliente2('Pablo'); const numero1 = 20; const numero2 = "40"; console.log(numero1 + numero2); // Implicita console.log(Number(numero2)); // explicita console.log(numero1.toString()); const pedido = [1,2,3,4]; console.log(pedido.toString()); console.log(JSON.stringify(pedido)); // Implicit Binding const usuario = { nombre: 'Juan', edad: 20, informacion() { console.log(`Mi Nombre es ${this.nombre} y mi
edad es ${this.edad}`) }, mascota: { nombre: 'Hook', edad: 1, informacion() { console.log(`Mi Nombre es ${this.nombre} y mi
edad es ${this.edad}`) } } } usuario.informacion(); usuario.mascota.informacion(); // Explicit Binding... function persona(el1, el2) { console.log(`Mi Nombre es ${this.nombre} y Escucho
${el1} y ${el2}`); } const informacion = { nombre: 'Juan' } const musicaFavorita = ['Heavy Metal', 'Rock']; persona.call(informacion, musicaFavorita[0],
musicaFavorita[1] ); persona.apply(informacion, musicaFavorita); const nuevaFn = persona.bind(informacion,
musicaFavorita[0], musicaFavorita[1]); nuevaFn(); // New binding function Auto(modelo, color) { this.modelo = modelo; this.color = color; } const auto = new Auto('Camaro', 'Negro'); console.log(auto); // Window binding window.color = 'negro'; function hola() { console.log(color); } hola(); console.log('Primero'); setTimeout(() => { console.log('Segundo'); }, 0); console.log('Tercero'); setTimeout(() => { console.log('Cuarto'); }, 0); new Promise(function(resolve) { resolve('Desconocido...') }).then(console.log) console.log('Ultimo') function hola() { console.log('hola') } hola(); self.onload = () => { console.log('Ventana Lista'); } window.nombre = 'Monitor 20 Pulgadas'; const producto = { precio: 30, disponible: true, mostrarInfo: function() { return `El Producto: ${self.nombre} ` } } console.log(producto.mostrarInfo()); SERVICEWORKERS if( 'serviceWorker' in navigator ) { navigator.serviceWorker.register('./sw.js') .then( registrado => console.log('Se instalo
correctamente... ', registrado) ) .catch( error => console.log('Falló la
instalación... ', error)); } else { console.log('Service Workers no soportados'); } DESIGN PATTERNS // Class Pattern class Persona { constructor(nombre, email) { this.nombre = nombre; this.email = email; } } const persona = new Persona('Juan',
'correo@correo.com'); console.log(persona); // Constructor Pattern class Persona { constructor(nombre, email) { this.nombre = nombre; this.email = email; } } class Cliente extends Persona { constructor(nombre, email, empresa) { super(nombre, email); this.empresa = empresa; } } const persona = new Persona('Juan',
'correo@correo.com'); console.log(persona); const cliente = new Cliente('Miguel',
'cliente@cliente.com', 'Código Con Luis'); console.log(cliente); // Singleton let instancia = null; class Persona { constructor(nombre, email){ if(!instancia) { this.nombre = nombre; this.email = email; instancia = this; } else { return instancia; } } } const persona = new Persona('Juan',
'correo@correo.com'); console.log(persona); const persona2 = new Persona('Karen',
'karen@karen.com'); console.log(persona2); // Factory - Crea objetos basados en ciertas
condiciones class InputHTML { constructor(type, nombre) { this.type = type; this.nombre = nombre; } crearInput() { return `<input type="${this.type}" name="$
{this.nombre}" id="${this.nombre}">`; } } class HTMLFactory { crearElemento(tipo, nombre) { switch(tipo) { case 'text': return new InputHTML('text', nombre) case 'tel': return new InputHTML('tel', nombre) case 'email': return new InputHTML('email', nombre) default: return; } } } const elemento = new HTMLFactory(); const inputText = elemento.crearElemento('text',
'nombre-cliente'); console.log(inputText.crearInput()); const elemento2 = new HTMLFactory(); const inputText2 = elemento2.crearElemento('tel',
'telefono-cliente'); console.log(inputText2.crearInput()); const elemento3 = new HTMLFactory(); const inputText3 = elemento3.crearElemento('email',
'email-cliente'); console.log(inputText3.crearInput()); // Module Pattern const modulo1 = (function() { const nombre = 'Juan'; function hola() { console.log('hola') } return { nombre, hola } })(); class Persona { constructor(nombre, email) { this.nombre = nombre; this.email = email; } } class Cliente { constructor(nombre, email) { this.nombre = nombre; this.email = email; } } const funcionesPersona = { mostrarInformacion() { console.log(`Nombre Persona: ${this.nombre}
Email: ${this.email}`) }, mostrarNombre() { console.log(`Mi nombre es ${this.nombre}`) } } // Añadir funcionesPersona a la clase de Persona Object.assign(Persona.prototype, funcionesPersona); Object.assign(Cliente.prototype, funcionesPersona); const cliente = new Persona('Juan',
'correo@correo.com'); console.log(cliente); cliente.mostrarInformacion() cliente.mostrarNombre() const cliente2 = new Cliente('Cliente',
'cliente@cliente.com'); console.log(cliente2); cliente2.mostrarInformacion() cliente2.mostrarNombre() const restaurantApp = {}; restaurantApp.platillos = [ { platillo: 'Pizza', precio: 25 }, { platillo: 'Hamburguesa', precio: 20 }, { platillo: 'Hot Dog', precio: 20 } ]; restaurantApp.funciones = { mostrarMenu: platillos => { console.log(`Bienvenidos a nuestro menú`); platillos.forEach((platillo, index) => { console.log(`${index} : ${platillo.platillo} $
${platillo.precio}`) }); }, ordenar: id => { console.log(`Tu Platillo: ${restaurantApp
.platillos[id].platillo} se esta preparando`) }, agregarPlatillo: (platillo, precio) => { const nuevo = { platillo, precio }; restaurantApp.platillos.push(nuevo); } } restaurantApp.funciones.ordenar(1); restaurantApp.funciones.agregarPlatillo('Taco', 20); const { platillos } = restaurantApp; restaurantApp.funciones.mostrarMenu( platillos ); function Vendedor(nombre) { this.nombre = nombre; this.sala = null; } Vendedor.prototype = { oferta: (articulo, precio) => { console.log(`Tenemos el siguiente artículo
${articulo}, iniciamos con precio de ${precio}`); }, vendido: comprador => { console.log(`Vendido a ${comprador}`); } } function Comprador(nombre) { this.nombre = nombre; this.sala = null; } Comprador.prototype = { oferta: (cantidad, comprador) => { console.log(`${comprador.nombre} : ${cantidad}`) } } function Subasta() { let compradores = {}; return { registrar: usuario => { compradores[usuario.nombre] = usuario; usuario.sala = this; } } } // Crear objetos const juan = new Comprador('Juan'); const pablo = new Comprador('Pablo'); const vendedor = new Vendedor('Vendedor de Autos'); const subasta = new Subasta(); // Tienes que registrarlos subasta.registrar(juan); subasta.registrar(pablo); subasta.registrar(vendedor); vendedor.oferta('Mustang 66', 300); juan.oferta(350, juan); pablo.oferta(450, pablo); juan.oferta(500,juan); pablo.oferta(700,pablo); vendedor.vendido('Pablo'); SEGURIDAD PERFORMANCE RENDIMIENTO function consultarAPI() {   const inicio = performance.now(); const { moneda, criptomoneda} = objBusqueda; const url = `https://min-api.cryptocompare.com/
data/pricemultifull?fsyms=${criptomoneda}&
tsyms=${moneda}`;
mostrarSpinner(); fetch(url) .then(respuesta => respuesta.json()) .then(cotizacion => { mostrarCotizacionHTML(cotizacion.DISPLAY
[criptomoneda][moneda]);
}); const fin = performance.now(); console.log( fin - inicio); }

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Abrir chat
Hablamos ?