Avatar
Stiven Trujillo

@strujillodev

spring.datasource.url=jdbc:mysql://localhost:3306/BASE_DE_DATOS?serverTimezone=UTC spring.datasource.dbname=BASE_DE_DATOS spring.datasource.username=root spring.datasource.password=stiven1293 spring.datasource.tomcat.max-wait=20000 spring.datasource.tomcat.max-active=50 spring.datasource.tomcat.max-idle=20 spring.datasource.tomcat.min-idle=15 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
Avatar
Stiven Trujillo

@strujillodev

const hash = "my hash"; const apikey = "public api key"; const url = `https://gateway.marvel.com:443/v1/public/characters?nameStartsWith=iron%20man&ts=1&apikey=${apikey}&hash=${hash}`; const STATUS_OK = 200; const STATUS_CREATED = 201; const STATUS_NOT_FOUND = 404; const draw = (data) => { const container = document.createElement("div"); data.forEach((characterFromComic) => { const characterHTML = ` <div> <h2>${characterFromComic.name}</h2> <img src="${characterFromComic.thumbnail.path}/portrait_incredible.${characterFromComic.thumbnail.extension}" alt="${characterFromComic.name}"> </div>`; container.insertAdjacentHTML("beforeend", characterHTML); }); myContent.appendChild(container); }; async function loadComics() { const response = await fetch(url); switch ( response.status ) { case STATUS_OK: const characters = await response.json(); draw( characters.data.results ); break case STATUS_NOT_FOUND: console.log('No se encontro informacion'); break } } btn.addEventListener('click', loadComics);
Avatar
Stiven Trujillo

@strujillodev

No es buena practica utilizar arrow functions en contexto variable, como dentro del callback de addEventListener. ya que se pierde la referencia de this!

this ya no apuntaría a formulario, para el ejemplo de la clase.

formulario.addEventListener('submit', function(event) { event.preventDefault(); console.log(this.nombreCurso); // funciona igual que event.target });
Avatar
Stiven Trujillo

@strujillodev

les comparto el codigo de la clase:

HTML

<body> <ul id="chat"> <li>Comentario1</li> <li>Comentario2</li> <li>Comentario3</li> <li>Comentario4</li> <li>Comentario5</li> </ul> <form id="chat-form"> <input type="text" name="" id="message-text" autocomplete="off" required > <button>Enviar</button> </form> <!-- scripts --> <script src="./socket.io/socket.io.js"></script> <script src="./script.js"></script> </body>

CSS

html { box-sizing: border-box; font-family: sans-serif; font-size: 16px; } *, *:after, *:before { box-sizing: inherit; margin: 0; padding: 0; } #chat-form { position: fixed; bottom: 0; padding: .5rem; width: 100%; background-color: #1d1d1d; display: flex; } #chat-form > * { padding: .5rem; border: none; } #chat-form button { width: 20%; background-color: #80bd01; } #message-text { width: 80%; } #chat li { color: black; padding: .5rem; background-color: #EEE; } #chat li:nth-child(odd) { background-color: #DDD; }
Avatar
Stiven Trujillo

@strujillodev

products.js

/** * Lista de productos para el menu del restaurante */ const products = [ { name: 'Hamburguesa simple', price: 8000, code: 'H100' }, { name: 'Hamburguesa especial', price: 12000, code: 'H200' }, { name: 'Papas fritas', price: 3000, code: 'P100' }, { name: 'Coca-Cola', price: 3000, code: 'C100' } ];

scripts.js

// 1. mostrar el menú disponible ✔ // 2. permitir que el usuario pida elementos del menú ✔ // 3. mostrar el costo total que el usuario debe pagar ✔ // 4. cobrar al usuario ✔ // 5. reportar el monto total de ventas realizadas. ✔ // Client const user = { name: 'Stiven', order: [], totalPay: 0 }; // Restaurant, store sales made. const restaurant = { salesMade: 0 } // Show products list in a nice way const showMenu = () => { let menu = 'CODE - PRODUCT NAME - PRICE'; for ( let product of products) { let {code, name, price} = product; menu += `\n${code} - ${name} - ${price}`; } return menu; }; // Add a product to client order const makeOrder = ( productCode ) => { const found = products.find( product => product.code === productCode ); if ( !found ) return 'Product does not exist.' user.order.push( found ); user.totalPay += found.price; return user.order; }; // Show client's total to pay const showTotalPay = () => `Total to pay: ${user.totalPay}`; const payOrder = ( payment ) => { const pay = () => { restaurant.salesMade += user.totalPay; user.order = []; user.totalPay = 0; }; if ( payment < user.totalPay ) { return `insufficient, ${user.totalPay - payment} dollars missing` } else if ( payment === user.totalPay ) { pay(); return 'Paid order' } else { const rtrn = payment - user.totalPay; pay(); return `Paid order, your return is ${rtrn}`; } };
Avatar
Stiven Trujillo

@strujillodev

// 4. COBRAR AL USUARIO const pagarPedido = montoEntregado => { if (montoEntregado < usuario.deuda) { return `No te alcanza para pagar tu pedido. te faltan ${usuario.deuda - montoEntregado}`; } else if (montoEntregado === usuario.deuda) { ventasRealizadas += usuario.deuda; usuario.deuda = 0; return 'Tu pedido ha sido pagado.' } else { const cambio = montoEntregado - usuario.deuda; ventasRealizadas += usuario.deuda; usuario.deuda = 0; return `Tu pedido ha sido pagado. y tu cambio es de ${cambio}`; } }

Ultimo requerimiento

// 5. REPORTAR EL MONTO TOTAL DE VENTAS REALIZADAS let ventasRealizadas = 0; const verVentasRealizadas = () => `Monto total ventas realizadas: ${ventasRealizadas}`;

Estos son los beneficios que tú y Stiven recibirán si compras con su enlace de referidos 🙌

BeneficiosMensualSemestralAnual
Descuento ()$ 3 USD$ 45 USD$ 90 USD
Semanas gratis (Stiven)1612

Al comprar con el enlace de referidos aceptas los términos y condiciones

Amigos

Stiven aún no tiene un enlace de referidos

Si eres estudiante premium ya tienes el enlace en tu perfil de usuario. Si aún no eres premium recibirás tu enlace de referidos como recompensa cada vez que completes un curso gratuito.

Más información
Publicaciones
Certificados
Me gusta
Referidos