[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73632":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":16,"starSnapshotCount":16,"syncStatus":28,"lastSyncTime":29,"discoverSource":30},73632,"javascript-100-proyectos","midudev\u002Fjavascript-100-proyectos","midudev","100 proyectos de JavaScript con código y vídeos. ¡Gratis!","https:\u002F\u002Fjavascript100.dev",null,"HTML",2687,313,31,3,0,1,10,29.49,"Other",false,"main",true,[],"2026-06-12 02:03:16","\u003Cdiv align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fwww.javascript100.dev\">\n    \u003Cimg src=\".\u002Fweb\u002Fpublic\u002Freadme.jpg\" \u002F> \n    \u003C\u002Fa>\n  \u003Ch3>\n    \u003Cstrong>100 proyectos de JavaScript con código y vídeos\u003C\u002Fstrong>\n  \u003C\u002Fh3>\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fwww.javascript100.dev\">\n        Website\n    \u003C\u002Fa>\n    \u003Cspan> ❖ \u003C\u002Fspan>\n    \u003Ca href=\"#-proyectos\">\n        Proyectos\n    \u003C\u002Fa>\n    \u003Cspan> ❖ \u003C\u002Fspan>\n    \u003Ca href=\"#-contribuir\">\n        Contribuir\n    \u003C\u002Fa>\n    \u003Cspan> ❖ \u003C\u002Fspan>\n    \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fc\u002Fmidudev\">\n        YouTube\n    \u003C\u002Fa>\n    \u003Cspan> ❖ \u003C\u002Fspan>\n    \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fmidudev\">\n        Twitter\n    \u003C\u002Fa>\n    \u003Cspan> ❖ \u003C\u002Fspan>\n    \u003Ca href=\"https:\u002F\u002Ftwitch.tv\u002Fmidudev\">\n        Twitch\n    \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Cp>\u003C\u002Fp>\n\n\u003Cdiv align=\"center\">\n\n![JavaScript Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FJavaScript-F7DF1E?logo=javascript&logoColor=000&style=flat)\n![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fmidudev\u002Fjavascript-100-proyectos)\n![GitHub issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fmidudev\u002Fjavascript-100-proyectos)\n![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fmidudev\u002Fjavascript-100-proyectos)\n![GitHub PRs](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues-pr\u002Fmidudev\u002Fjavascript-100-proyectos)\n![Astro Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAstro-BC52EE?logo=astro&logoColor=fff&style=flat)\n\n\u003C\u002Fdiv>\n\n## ✨ Proyectos\n\n|  #   | Proyecto         | Descripción                                                              | Código                                                                                                                                                                                   | Website                                                       |\n| --- | ---------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |\n| 1   | **tinder-swipe** | Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript. | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F01-tinder-swipe) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F01-tinder-swipe) |\n| 2   | **arkanoid-game** | Juego mítico y clásico de Arkanoid para controlar con teclado. | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F02-arkanoid-game) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F02-arkanoid-game) |\n| 3   | **mecanografía** | Pon a prueba a qué velocidad tecleas | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F03-midu-typing-game) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F03-midu-typing-game) |\n| 4   | **chatgpt-local** | Creamos un ChatGPT que se ejecuta en tu navegador. 100% privado y gratuito | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F04-chatgpt-local) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F04-chatgpt-local) |\n| 5   | **buscar-info-IP** | Llama a una api para obtener información de cualquier IP | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F05-api-geo-ip) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F05-api-geo-ip) |\n| 6   | **tetris-canvas** | Creamos el famoso juego tetris como desafío de una prueba técnica | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F06-tetris-canvas) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F06-tetris-canvas) |\n| 7   | **tier-maker** | Arrastra imágenes de cosas y ponlas en el nivel que creas | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F07-tier-maker) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F07-tier-maker) |\n| 8   | **excel-js** | Creamos una hoja de SpreadSheets editable | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F08-excel-js) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F08-excel-js) |\n| 9   | **paint-win-95** | El clásico editor de imágenes de Windows | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F09-paint-win-95) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F09-paint-win-95) |\n| 10   | **stack-game** | Stack Game en 2D | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F10-stack-game) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F10-stack-game) |\n| 11   | **js-perf-benchmark** | Benchmark con JS | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F11-js-perf-benchmark) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F11-js-perf-benchmark) |\n| 12   | **moto-scroll** | Animación de fondo por scroll | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F12-moto-scroll) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F12-moto-scroll) |\n| 13   | **google-translate** | Clon de Google Translate con traducción en tiempo real | [![GitHub Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FCódigo-181717?logo=github&logoColor=fff&style=flat-square)](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ftree\u002Fmain\u002F13-google-translate) | [![Vercel Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWebsite-000?logo=vercel&logoColor=fff&style=flat-square)](https:\u002F\u002Fwww.javascript100.dev\u002F13-google-translate) |\n\n\n## 🚀 Contribuir\n\n### **Introducción**\n\n1. Para contribuir, crea un [Fork](https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Ffork) del proyecto.\n\n2. Clona el repositorio en tu máquina local:\n\n```bash\ngit clone git@github.com:tu_username\u002Fjavascript-100-proyectos.git\n```\n\n### **Proyectos**\n\n1. Accede a la carpeta del proyecto que quieras:\n\n```bash\ncd 01-tinder-swipe\n```\n\n2. Instala la extensión [**Live Preview**](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ms-vscode.live-server) en Visual Studio Code.\n\n3. Presiona `F1` y selecciona `Live Preview: Start Server`.\n\nRealiza los cambios y crea una pull request 🚀.\n\n### **Sitio web**\n\n- Para contribuir al sitio web es necesario tener [Node.js +18](https:\u002F\u002Fnodejs.org\u002F) instalado y [pnpm](https:\u002F\u002Fpnpm.io\u002F):\n\n```bash\nnpm install -g pnpm\n```\n\n1. Instala las dependencias:\n\n```bash\ncd web\npnpm install\n```\n\n2. Inicia el servidor de desarrollo:\n\n```bash\npnpm dev\n```\n\nRealiza los cambios y crea una pull request 🚀.\n\n## 🛠️ Stack\n\n**Proyectos**:\n\n- HTML, CSS & Javascript.\n\n**Website**:\n\n- [**Astro**](https:\u002F\u002Fastro.build\u002F) - The web framework for content-driven websites.\n- [**Typescript**](https:\u002F\u002Fwww.typescriptlang.org\u002F) - JavaScript with syntax for types.\n- [**Tailwind CSS**](https:\u002F\u002Ftailwindcss.com\u002F) - A utility-first CSS framework for rapidly building custom designs.\n- [**@midudev\u002Ftailwind-animations**](https:\u002F\u002Ftailwindcss-animations.vercel.app) - Easy peasy animations for your Tailwind project.\n\n## 👑 Contribuidores\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmidudev\u002Fjavascript-100-proyectos\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=midudev\u002Fjavascript-100-proyectos\" \u002F>\n\u003C\u002Fa>\n","该项目提供了100个JavaScript项目，每个项目都附带代码和视频教程，完全免费。核心功能包括从基础到进阶的各种JavaScript实践案例，涵盖了网页动画、游戏开发等多种应用场景，并使用了HTML、CSS等前端技术。适合前端开发者特别是JavaScript初学者通过实际项目来提升编程技能，也适用于寻找灵感或具体实现方案的开发者。",2,"2026-06-11 03:46:29","high_star"]