100 proyectos de JavaScript con código y vídeos

Website  ❖  Proyectos  ❖  Contribuir  ❖  YouTube  ❖  Twitter  ❖  Twitch

✨ Proyectos

#	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

🚀 Contribuir

Introducción

1. Para contribuir, crea un Fork del proyecto.

2. Clona el repositorio en tu máquina local:

git clone git@github.com:tu_username/javascript-100-proyectos.git

Proyectos

1. Accede a la carpeta del proyecto que quieras:

cd 01-tinder-swipe

2. Instala la extensión Live Preview en Visual Studio Code.

3. Presiona F1 y selecciona Live Preview: Start Server.

Realiza los cambios y crea una pull request 🚀.

Sitio web

• Para contribuir al sitio web es necesario tener Node.js +18 instalado y pnpm:

npm install -g pnpm

1. Instala las dependencias:

cd web
pnpm install

2. Inicia el servidor de desarrollo:

pnpm dev

Realiza los cambios y crea una pull request 🚀.

🛠️ Stack

Proyectos:

• HTML, CSS & Javascript.

Website:

• Astro - The web framework for content-driven websites.
• Typescript - JavaScript with syntax for types.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
• tailwind-animations - Easy peasy animations for your Tailwind project.

👑 Contribuidores