Cronómetro con JavaScript con marcas - Código open source

Cronómetro con JavaScript – Open source

En este post te expondré un pequeño proyecto que recién he terminado. Se trata de un cronómetro programado con JavaScript puro que funciona en cualquier dispositivo con un navegador web.

Cronómetro con JavaScript con marcas - Código open source

Cronómetro con JavaScript con marcas – Código open source

Funciona como un cronómetro normal: permite iniciar, pausar y detener el cronómetro así como poner marcas o banderas.

A lo largo del post te explicaré su funcionamiento y cómo es que lo he programado. Te repito que no utilicé ningún framework de JS.

(más…)

Lista de tareas (to do list) en localstorage con JS

Lista de tareas pendientes con JavaScript

Hoy te mostraré cómo hacer una lista de tareas pendientes con JavaScript puro, sin frameworks. A esto también se le conoce como To Do list.

Este proyecto de lista de pendientes es un proyecto básico para comenzar en este mundo de la programación web.

Solo usaremos JavaScript, arreglos, acceso a los elementos del DOM, eventos y almacenamiento con localstorage.

Lo que tendremos al final será una lista de tareas. A cada tarea podremos marcarla como completada o eliminarla, y también agregar una nueva tarea. Todo será guardado en LocalStorage dentro del navegador web.

(más…)

Agregar elemento a arreglo con JavaScript

JavaScript – Agregar elemento a arreglo

Hoy veremos algo muy simple en JS: cómo agregar un elemento a un arreglo ya sea para agregarlo al inicio o al final.

Esto lo vamos a hacer con JavaScript así que puede que funcione para los frameworks como Vue, React, Angular o jQuery.

Recuerda que un array en JavaScript puede tener elementos mixtos y de cualquier tipo. Por otro lado puedes agregar elementos sin límite.

Veamos entonces cómo agregar un elemento a un array en JavaScript.

(más…)

Vue router – Navegar a componente

En este corto post sobre Vue y el enrutador del mismo te mostraré cómo ir de un componente a otro de manera programada, es decir, desde el código.

De este modo podrás navegar de manera programada con el Vue Router al hacer clic en algún botón o en cualquier acción, pues lo harás por medio del código de JavaScript o TypeScript.

(más…)

Condicional con Webpack y HTML

Hoy voy a mostrarte cómo usar un if dentro de una plantilla HTML cuando utilizas Webpack, HtmlWebpack o html-webpack.

Concretamente yo estoy usando Webpack con la CLI de Vue y tuve la necesidad de incluir un script de JavaScript solo en el entorno de producción, cosa que fue muy sencilla de hacer con EJS y Webpack.

En este post te mostraré cómo hacer una condicional dependiendo de si estamos en producción o desarrollo dentro de HTML.

(más…)

Código QR con HTML y JS - Descargar como imagen

Generar códigos QR con JavaScript

En este post de programación web te voy a mostrar cómo generar códigos QR desde JS o JavaScript para que puedas generar un QR desde la web.

Vamos a usar una librería de terceros; verás que es muy simple crear códigos QR y tal vez esto te anime para crear tu propio generador.

Te aviso que vamos a usar JavaScript puro, así que puedes portar este código para frameworks como Angular, React o Vue.

(más…)

Programa para colocar marca de agua con PHP y JavaScript

Sistema web para poner marca de agua con PHP y JS

Hoy te voy a presentar un software gratuito y open source para poner marcas de agua a una imagen. Lo que tienes que hacer es simplemente seleccionar la imagen, la marca de agua y listo.

Además, puedes ajustar la opacidad y la separación entre marcas de agua. Por otro lado, si no te parece algún aspecto, puedes modificar el código fuente pues es totalmente open source.

He escrito este programa en PHP y JavaScript. Básicamente el procesamiento lo hace PHP, y JS solo es el frontend.

Sé bien que esto se podría hacer con JavaScript para no cargar al servidor, pero a mí me funciona así y por eso es que lo hice de esa manera. A lo largo de este post te mostraré todos los detalles sobre este programa.

(más…)

Solucionar fracciones en línea - Suma, resta, producto y cociente

Solucionador de fracciones con JavaScript

Hace unos días te mostré cómo resolver fracciones o quebrados usando JavaScript y programación orientada a objetos para hacer las operaciones como suma, resta, multiplicación y división.

Hoy te traigo un ejemplo práctico de un solucionador de operaciones de fracciones online que recién he programado.

Por cierto, si tú solo eres un usuario que está interesado en usar el software puedes entrar directamente al solucionador de fracciones en línea.

(más…)

Factura PDF creada con Node.js, JavaScript y html-pdf

Factura PDF con Node.js

En este post de programación con JavaScript del lado del servidor con Node.js y un poco de express te mostraré cómo crear una factura, ticket o recibo PDF usando estas tecnologías.

Voy a enseñarte dos ejemplos. En el primero verás cómo crear un recibo PDF y guardarlo en el almacenamiento, mientras que en el segundo ejemplo te enseñaré mostrar el ticket PDF con Express.

Esto solo es una continuación a mi post de cómo crear un PDF con Node. Recuerda que tú eres libre de cambiar los estilos y modificar la plantilla, lo que aquí te muestro es mi ejemplo.

(más…)

Formatear dinero en JavaScript

Formatear dinero en JavaScript

Hoy te enseñaré cómo formatear dinero con JavaScript, o mejor dicho, formatear un número para mostrarlo como dinero o moneda.

Normalmente usamos toFixed() pero hoy te enseñaré algo más elegante que incluso podría ser una buena alternativa a la maravillosa función number_format de PHP.

Recuerda que como es JavaScript vamos a poder usar esto del lado del cliente así como del lado del servidor con Node.js.

(más…)