100 proyectos de JavaScript con código y vídeos. ¡Gratis!
See the code
| # | Proyecto | Descripción | Código | Website |
|---|---|---|---|---|
| 1 | tinder-swipe | Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript. |  |  |
| 2 | arkanoid-game | Juego mítico y clásico de Arkanoid para controlar con teclado. | | |
| 3 | mecanografía | Pon a prueba a qué velocidad tecleas | | |
| 4 | chatgpt-local | Creamos un ChatGPT que se ejecuta en tu navegador. 100% privado y gratuito | | |
| 5 | buscar-info-IP | Llama a una api para obtener información de cualquier IP | | |
| 6 | tetris-canvas | Creamos el famoso juego tetris como desafío de una prueba técnica | | |
| 7 | tier-maker | Arrastra imágenes de cosas y ponlas en el nivel que creas | | |
| 8 | excel-js | Creamos una hoja de SpreadSheets editable | | |
| 9 | paint-win-95 | El clásico editor de imágenes de Windows | | |
| 10 | stack-game | Stack Game en 2D | | |
| 11 | js-perf-benchmark | Benchmark con JS | | |
| 12 | moto-scroll | Animación de fondo por scroll | | |
| 13 | google-translate | Clon de Google Translate con traducción en tiempo real | | |
| 14 | snake-game | El clásico juego de la serpiente que crece al comer | | |
| 15 | memory-game | Encuentra todas las parejas de cartas con el menor número de movimientos | | |
| 16 | pomodoro-timer | Gestiona tu tiempo con la técnica Pomodoro y recibe notificaciones | | |
| 17 | password-generator | Genera contraseñas seguras de verdad y mide su fortaleza | | |
| 18 | game-of-life | Autómata celular de Conway donde patrones simples crean vida compleja | | |
| 19 | weather-app | Consulta el tiempo de tu ubicación o de cualquier ciudad | | |
| 20 | drum-kit | Toca la batería con el teclado. Sonidos sintetizados sin archivos de audio | | |
| 21 | tic-tac-toe-ai | Juega contra una IA que nunca pierde gracias al algoritmo minimax | | |
| 22 | markdown-editor | Escribe Markdown y míralo convertido a HTML en tiempo real | | |
| 23 | sorting-visualizer | Observa paso a paso cómo funcionan los algoritmos de ordenación | | |
| 24 | color-palette | Crea paletas de colores armoniosas pulsando la barra espaciadora | | |
| 25 | whack-a-mole | Golpea a los topos antes de que se escondan | | |
| 26 | infinite-scroll | Carga contenido automáticamente al llegar al final de la página | | |
| 27 | 2048-game | Desliza y combina las fichas hasta llegar al 2048 | | |
| 28 | pixel-art | Dibuja pixel art y exporta tu creación como imagen PNG | | |
| 29 | pokedex | Explora los Pokémon de la primera generación con la PokeAPI | | |
| 30 | emoji-picker | Un selector de emojis nativo usando la Popover API | | |
| 31 | minesweeper | El mítico Buscaminas de Windows con sus tres niveles de dificultad | | |
| 32 | text-diff | Encuentra las diferencias entre dos textos como hace Git | | |
| 33 | audio-visualizer | Visualiza el sonido de tu micrófono o de un archivo de audio en tiempo real | | |
| 34 | flappy-bird | Esquiva las tuberías aleteando en este juego adictivo | | |
| 35 | kanban-board | Organiza tus tareas arrastrándolas entre columnas | | |
| 36 | photo-booth | Hazte fotos con la webcam y aplica filtros píxel a píxel | | |
| 37 | wordle | Adivina la palabra oculta de cinco letras en seis intentos | | |
| 38 | web-components | Crea tus propios elementos HTML reutilizables sin frameworks | | |
| 39 | maze-generator | Genera laberintos aleatorios y encuentra la salida automáticamente | | |
| 40 | currency-converter | Convierte entre monedas con tipos de cambio actualizados | | |
| 41 | simon-says | Memoriza y repite la secuencia de colores y sonidos | | |
| 42 | interactive-particles | Un campo de partículas que reacciona al movimiento del ratón | | |
| 43 | js-quiz | ¿Cuánto sabes de JavaScript? Pon a prueba tus conocimientos | | |
| 44 | github-profile | Busca cualquier usuario de GitHub y descubre sus repositorios | | |
| 45 | pong | El primer videojuego de la historia para uno o dos jugadores | | |
| 46 | signature-pad | Firma con el ratón, el dedo o un lápiz y descarga tu firma | | |
| 47 | pathfinding | Dibuja muros y mira cómo el algoritmo A* encuentra el camino más corto | | |
| 48 | command-palette | Una paleta de comandos al estilo VS Code que se abre con Cmd+K | | |
| 49 | sudoku | Juega al Sudoku o deja que el algoritmo lo resuelva por ti | | |
| 50 | piano-synth | Toca el piano con el teclado del ordenador y moldea el sonido | | |
| 51 | image-compressor | Reduce el peso de tus imágenes sin subirlas a ningún servidor | | |
| 52 | hangman | Adivina la palabra letra a letra antes de completar el dibujo | | |
| 53 | spa-router | Construye tu propio enrutador para aplicaciones de una sola página | | |
| 54 | matrix-rain | Recrea el icónico efecto de lluvia de código de Matrix | | |
| 55 | expense-tracker | Registra tus ingresos y gastos y visualízalos en un gráfico | | |
| 56 | text-effects | Efectos de máquina de escribir, scramble y más para tus textos | | |
| 57 | connect-four | Alinea cuatro fichas antes que tu rival | | |
| 58 | countries-explorer | Busca, filtra y ordena todos los países del mundo | | |
| 59 | mandelbrot | Haz zoom infinito en el famoso fractal de Mandelbrot | | |
| 60 | svg-editor | Un editor de formas SVG con deshacer y rehacer ilimitados | | |
| 61 | space-invaders | Defiende la Tierra de la invasión alienígena | | |
| 62 | morse-code | Traduce texto a código Morse y escúchalo, o tecléalo tú mismo | | |
| 63 | proxy-reactivity | Entiende cómo funcionan Vue y los signals creando tu propio sistema reactivo | | |
| 64 | world-clock | Consulta la hora en cualquier ciudad del mundo con relojes analógicos | | |
| 65 | sliding-puzzle | Ordena las piezas del clásico puzzle del 15 | | |
| 66 | metronome | Un metrónomo preciso con el reloj del AudioContext | | |
| 67 | fireworks | Lanza fuegos artificiales con un click | | |
| 68 | offline-notes | Una app de notas instalable que funciona sin conexión | | |
| 69 | regex-tester | Escribe expresiones regulares y mira las coincidencias al instante | | |
| 70 | dino-runner | El juego del dinosaurio de Chrome cuando no hay internet | | |
| 71 | virtual-list | Renderiza 100.000 elementos sin que tu navegador se congele | | |
| 72 | carousel | Un carrusel moderno con scroll-snap, autoplay y accesible | | |
| 73 | guitar-tuner | Afina tu guitarra usando el micrófono del navegador | | |
| 74 | asteroids | Destruye los asteroides con tu nave en el espacio infinito | | |
| 75 | form-validation | Valida formularios con la API nativa del navegador y mensajes a medida | | |
| 76 | tabs-chat | Comunica varias pestañas del navegador sin servidor | | |
| 77 | hacker-news | Lee las noticias más populares de Hacker News | | |
| 78 | tower-of-hanoi | Resuelve el clásico rompecabezas o mira cómo lo resuelve la recursión | | |
| 79 | gradient-generator | Crea degradados CSS preciosos y copia el código | | |
| 80 | screen-recorder | Graba tu pantalla con audio y descarga el vídeo sin instalar nada | | |
| 81 | binary-search-tree | Visualiza cómo se insertan, buscan y borran nodos en un árbol binario | | |
| 82 | meme-generator | Crea memes con tus imágenes y descárgalos al instante | | |
| 83 | solar-system | Un sistema solar animado con las órbitas de los planetas | | |
| 84 | secret-messages | Cifra mensajes con contraseña usando criptografía real del navegador | | |
| 85 | bouncing-balls | Lanza pelotas que rebotan y chocan entre sí con física real | | |
| 86 | wikipedia-search | Busca en Wikipedia con autocompletado mientras escribes | | |
| 87 | view-transitions | Transiciones animadas entre vistas con una sola línea de JavaScript | | |
| 88 | mouse-effects | Efectos interactivos de tarjetas y botones que siguen al cursor | | |
| 89 | video-player | Un reproductor de vídeo con controles personalizados | | |
| 90 | gamepad-tester | Conecta tu mando y comprueba todos sus botones y joysticks | | |
| 91 | calendar | Un calendario mensual con eventos hecho solo con la API Date | | |
| 92 | battleship | Hunde la flota enemiga antes de que la IA hunda la tuya | | |
| 93 | calculator | Una calculadora científica que interpreta expresiones sin usar eval | | |
| 94 | text-analyzer | Cuenta palabras, frases y calcula el tiempo de lectura de cualquier texto | | |
| 95 | infinite-whiteboard | Dibuja en un lienzo infinito con zoom y desplazamiento | | |
| 96 | toast-notifications | Un sistema de notificaciones elegante, apilable y accesible | | |
| 97 | json-viewer | Formatea, valida y explora cualquier JSON como un árbol | | |
| 98 | raycaster | Crea un laberinto en 3D como Wolfenstein 3D con raycasting | | |
| 99 | idle-clicker | Haz click, compra mejoras y mira cómo crecen tus números | | |
| 100 | web-desktop | Un escritorio con ventanas desde el que abrir todos los proyectos | | |
Para contribuir, crea un Fork del proyecto.
Clona el repositorio en tu máquina local:
git clone [email protected]:tu_username/javascript-100-proyectos.git
cd 01-tinder-swipe
Instala la extensión Live Preview en Visual Studio Code.
Presiona F1 y selecciona Live Preview: Start Server.
Realiza los cambios y crea una pull request 🚀.
npm install -g pnpm
cd web
pnpm install
pnpm dev
Realiza los cambios y crea una pull request 🚀.
Proyectos:
Website:
9,448 followers · starred Feb 2024
44 followers · starred Feb 2024
50 followers · starred Sep 2024
100 proyectos de JavaScript con código y vídeos. ¡Gratis!
See the code
| # | Proyecto | Descripción | Código | Website |
|---|---|---|---|---|
| 1 | tinder-swipe | Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript. | | |
| 2 | arkanoid-game | Juego mítico y clásico de Arkanoid para controlar con teclado. | | |
| 3 | mecanografía | Pon a prueba a qué velocidad tecleas | | |
| 4 | chatgpt-local | Creamos un ChatGPT que se ejecuta en tu navegador. 100% privado y gratuito | | |
| 5 | buscar-info-IP | Llama a una api para obtener información de cualquier IP | | |
| 6 | tetris-canvas | Creamos el famoso juego tetris como desafío de una prueba técnica | | |
| 7 | tier-maker | Arrastra imágenes de cosas y ponlas en el nivel que creas | | |
| 8 | excel-js | Creamos una hoja de SpreadSheets editable | | |
| 9 | paint-win-95 | El clásico editor de imágenes de Windows | | |
| 10 | stack-game | Stack Game en 2D | | |
| 11 | js-perf-benchmark | Benchmark con JS | | |
| 12 | moto-scroll | Animación de fondo por scroll | | |
| 13 | google-translate | Clon de Google Translate con traducción en tiempo real | | |
| 14 | snake-game | El clásico juego de la serpiente que crece al comer | | |
| 15 | memory-game | Encuentra todas las parejas de cartas con el menor número de movimientos | | |
| 16 | pomodoro-timer | Gestiona tu tiempo con la técnica Pomodoro y recibe notificaciones | | |
| 17 | password-generator | Genera contraseñas seguras de verdad y mide su fortaleza | | |
| 18 | game-of-life | Autómata celular de Conway donde patrones simples crean vida compleja | | |
| 19 | weather-app | Consulta el tiempo de tu ubicación o de cualquier ciudad | | |
| 20 | drum-kit | Toca la batería con el teclado. Sonidos sintetizados sin archivos de audio | | |
| 21 | tic-tac-toe-ai | Juega contra una IA que nunca pierde gracias al algoritmo minimax | | |
| 22 | markdown-editor | Escribe Markdown y míralo convertido a HTML en tiempo real | | |
| 23 | sorting-visualizer | Observa paso a paso cómo funcionan los algoritmos de ordenación | | |
| 24 | color-palette | Crea paletas de colores armoniosas pulsando la barra espaciadora | | |
| 25 | whack-a-mole | Golpea a los topos antes de que se escondan | | |
| 26 | infinite-scroll | Carga contenido automáticamente al llegar al final de la página | | |
| 27 | 2048-game | Desliza y combina las fichas hasta llegar al 2048 | | |
| 28 | pixel-art | Dibuja pixel art y exporta tu creación como imagen PNG | | |
| 29 | pokedex | Explora los Pokémon de la primera generación con la PokeAPI | | |
| 30 | emoji-picker | Un selector de emojis nativo usando la Popover API | | |
| 31 | minesweeper | El mítico Buscaminas de Windows con sus tres niveles de dificultad | | |
| 32 | text-diff | Encuentra las diferencias entre dos textos como hace Git | | |
| 33 | audio-visualizer | Visualiza el sonido de tu micrófono o de un archivo de audio en tiempo real | | |
| 34 | flappy-bird | Esquiva las tuberías aleteando en este juego adictivo | | |
| 35 | kanban-board | Organiza tus tareas arrastrándolas entre columnas | | |
| 36 | photo-booth | Hazte fotos con la webcam y aplica filtros píxel a píxel | | |
| 37 | wordle | Adivina la palabra oculta de cinco letras en seis intentos | | |
| 38 | web-components | Crea tus propios elementos HTML reutilizables sin frameworks | | |
| 39 | maze-generator | Genera laberintos aleatorios y encuentra la salida automáticamente | | |
| 40 | currency-converter | Convierte entre monedas con tipos de cambio actualizados | | |
| 41 | simon-says | Memoriza y repite la secuencia de colores y sonidos | | |
| 42 | interactive-particles | Un campo de partículas que reacciona al movimiento del ratón | | |
| 43 | js-quiz | ¿Cuánto sabes de JavaScript? Pon a prueba tus conocimientos | | |
| 44 | github-profile | Busca cualquier usuario de GitHub y descubre sus repositorios | | |
| 45 | pong | El primer videojuego de la historia para uno o dos jugadores | | |
| 46 | signature-pad | Firma con el ratón, el dedo o un lápiz y descarga tu firma | | |
| 47 | pathfinding | Dibuja muros y mira cómo el algoritmo A* encuentra el camino más corto | | |
| 48 | command-palette | Una paleta de comandos al estilo VS Code que se abre con Cmd+K | | |
| 49 | sudoku | Juega al Sudoku o deja que el algoritmo lo resuelva por ti | | |
| 50 | piano-synth | Toca el piano con el teclado del ordenador y moldea el sonido | | |
| 51 | image-compressor | Reduce el peso de tus imágenes sin subirlas a ningún servidor | | |
| 52 | hangman | Adivina la palabra letra a letra antes de completar el dibujo | | |
| 53 | spa-router | Construye tu propio enrutador para aplicaciones de una sola página | | |
| 54 | matrix-rain | Recrea el icónico efecto de lluvia de código de Matrix | | |
| 55 | expense-tracker | Registra tus ingresos y gastos y visualízalos en un gráfico | | |
| 56 | text-effects | Efectos de máquina de escribir, scramble y más para tus textos | | |
| 57 | connect-four | Alinea cuatro fichas antes que tu rival | | |
| 58 | countries-explorer | Busca, filtra y ordena todos los países del mundo | | |
| 59 | mandelbrot | Haz zoom infinito en el famoso fractal de Mandelbrot | | |
| 60 | svg-editor | Un editor de formas SVG con deshacer y rehacer ilimitados | | |
| 61 | space-invaders | Defiende la Tierra de la invasión alienígena | | |
| 62 | morse-code | Traduce texto a código Morse y escúchalo, o tecléalo tú mismo | | |
| 63 | proxy-reactivity | Entiende cómo funcionan Vue y los signals creando tu propio sistema reactivo | | |
| 64 | world-clock | Consulta la hora en cualquier ciudad del mundo con relojes analógicos | | |
| 65 | sliding-puzzle | Ordena las piezas del clásico puzzle del 15 | | |
| 66 | metronome | Un metrónomo preciso con el reloj del AudioContext | | |
| 67 | fireworks | Lanza fuegos artificiales con un click | | |
| 68 | offline-notes | Una app de notas instalable que funciona sin conexión | | |
| 69 | regex-tester | Escribe expresiones regulares y mira las coincidencias al instante | | |
| 70 | dino-runner | El juego del dinosaurio de Chrome cuando no hay internet | | |
| 71 | virtual-list | Renderiza 100.000 elementos sin que tu navegador se congele | | |
| 72 | carousel | Un carrusel moderno con scroll-snap, autoplay y accesible | | |
| 73 | guitar-tuner | Afina tu guitarra usando el micrófono del navegador | | |
| 74 | asteroids | Destruye los asteroides con tu nave en el espacio infinito | | |
| 75 | form-validation | Valida formularios con la API nativa del navegador y mensajes a medida | | |
| 76 | tabs-chat | Comunica varias pestañas del navegador sin servidor | | |
| 77 | hacker-news | Lee las noticias más populares de Hacker News | | |
| 78 | tower-of-hanoi | Resuelve el clásico rompecabezas o mira cómo lo resuelve la recursión | | |
| 79 | gradient-generator | Crea degradados CSS preciosos y copia el código | | |
| 80 | screen-recorder | Graba tu pantalla con audio y descarga el vídeo sin instalar nada | | |
| 81 | binary-search-tree | Visualiza cómo se insertan, buscan y borran nodos en un árbol binario | | |
| 82 | meme-generator | Crea memes con tus imágenes y descárgalos al instante | | |
| 83 | solar-system | Un sistema solar animado con las órbitas de los planetas | | |
| 84 | secret-messages | Cifra mensajes con contraseña usando criptografía real del navegador | | |
| 85 | bouncing-balls | Lanza pelotas que rebotan y chocan entre sí con física real | | |
| 86 | wikipedia-search | Busca en Wikipedia con autocompletado mientras escribes | | |
| 87 | view-transitions | Transiciones animadas entre vistas con una sola línea de JavaScript | | |
| 88 | mouse-effects | Efectos interactivos de tarjetas y botones que siguen al cursor | | |
| 89 | video-player | Un reproductor de vídeo con controles personalizados | | |
| 90 | gamepad-tester | Conecta tu mando y comprueba todos sus botones y joysticks | | |
| 91 | calendar | Un calendario mensual con eventos hecho solo con la API Date | | |
| 92 | battleship | Hunde la flota enemiga antes de que la IA hunda la tuya | | |
| 93 | calculator | Una calculadora científica que interpreta expresiones sin usar eval | | |
| 94 | text-analyzer | Cuenta palabras, frases y calcula el tiempo de lectura de cualquier texto | | |
| 95 | infinite-whiteboard | Dibuja en un lienzo infinito con zoom y desplazamiento | | |
| 96 | toast-notifications | Un sistema de notificaciones elegante, apilable y accesible | | |
| 97 | json-viewer | Formatea, valida y explora cualquier JSON como un árbol | | |
| 98 | raycaster | Crea un laberinto en 3D como Wolfenstein 3D con raycasting | | |
| 99 | idle-clicker | Haz click, compra mejoras y mira cómo crecen tus números | | |
| 100 | web-desktop | Un escritorio con ventanas desde el que abrir todos los proyectos | | |
Para contribuir, crea un Fork del proyecto.
Clona el repositorio en tu máquina local:
git clone [email protected]:tu_username/javascript-100-proyectos.git
cd 01-tinder-swipe
Instala la extensión Live Preview en Visual Studio Code.
Presiona F1 y selecciona Live Preview: Start Server.
Realiza los cambios y crea una pull request 🚀.
npm install -g pnpm
cd web
pnpm install
pnpm dev
Realiza los cambios y crea una pull request 🚀.
Proyectos:
Website:
9,448 followers · starred Feb 2024
44 followers · starred Feb 2024
50 followers · starred Sep 2024