https://github.com/gianmattus-programmer/100-dias-de-js
https://github.com/gianmattus-programmer/100-dias-de-js
100daysofjavascript html-css-javascript
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/gianmattus-programmer/100-dias-de-js
- Owner: gianmattus-programmer
- Created: 2025-03-28T16:59:54.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-18T01:00:02.000Z (about 1 year ago)
- Last Synced: 2025-05-26T20:59:03.040Z (11 months ago)
- Topics: 100daysofjavascript, html-css-javascript
- Language: JavaScript
- Homepage:
- Size: 71.9 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💻 100 Días de JavaScript
### 📊 Estadísticas del Reto
Proyectos Completados
Líneas de Código
Horas Invertidas
78/100
~15,000
~234
78%
78 de 100 días completados
📈 Distribución de Tecnologías
## 🎯 Acerca del Reto
JavaScript
HTML5
CSS3
React
Node.js
Un desafío personal para mejorar mis habilidades en JavaScript creando 100 proyectos diferentes, uno cada día. Este reto está diseñado para fortalecer el dominio del lenguaje a través de la práctica constante y la creación de proyectos reales.
## 📊 Categorías de Proyectos
Categoría
Cantidad
Descripción
🎮 Juegos
25
Proyectos de juegos interactivos
🛠️ Utilidades
20
Herramientas y utilidades
🌐 APIs
15
Integraciones con APIs
🎨 UI/UX
10
Componentes y diseños
🧩 Extensiones
8
Extensiones para navegador
## 📊 Progreso Actual
78%
78 de 100 días completados
- **Proyectos Completados**: 78/100
- **Proyectos Restantes**: 22
- **Estado**: En progreso 🚀
## 🌟 Características
- Proyectos prácticos y variados
- Código fuente completo disponible
- Demos en vivo de cada proyecto
- Documentación detallada
- Actualizaciones regulares
## 🛠️ Tecnologías Utilizadas
- JavaScript (ES6+)
- HTML5 & CSS3
- APIs modernas del navegador
- Frameworks y librerías populares
- Herramientas de desarrollo web
## 📝 Cómo Usar Este Repositorio
1. Navega por la lista de proyectos
2. Haz clic en el enlace "Código" para ver el código fuente
3. Visita el "Website" para ver la demo en vivo
4. ¡Experimenta y aprende!
# ✨ Proyectos
| # | Proyecto | Descripción | Código | Website |
|---|----------|-------------|---------|---------|
| 01 | **Pixel Art Generator** | Crea arte pixel a pixel con esta herramienta interactiva | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2301%20-%20Pixel%20Art%20Generator) | [](https://pixel-art-generator-gianmattus-programmers-projects.vercel.app) |
| 02 | **Rich Text Editor** | Editor de texto con formato enriquecido | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2302%20-%20Rich%20Text%20Editor) | [](https://rich-text-editor-gianmattus-programmers-projects.vercel.app) |
| 03 | **Password Generator** | Generador de contraseñas seguras | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2303%20-%20Pass%20Generator) | [](https://pass-generator-gianmattus-programmers-projects.vercel.app/) |
| 04 | **QR Code Generator** | Generador de códigos QR | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2304%20-%20QR%20Code%20Generator) | [](https://your-website.dev/04-qr-code-generator) |
| 05 | **Detect Device Battery** | Detecta el nivel de batería del dispositivo | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2305%20-%20Detect%20Device%20Battery) | [](https://your-website.dev/05-detect-device-battery) |
| 06 | **XO Game** | Juego de tres en raya | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2306%20-%20Simple%20XO%20Game) | [](https://your-website.dev/06-xo-game) |
| 07 | **Flip a Coin Game** | Juego de lanzar una moneda | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2307%20-%20Flip%20a%20Coin%20Game) | [](https://your-website.dev/07-flip-a-coin) |
| 08 | **Multi Step Form** | Formulario de múltiples pasos | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2308%20-%20Multi%20Step%20Form) | [](https://your-website.dev/08-multi-step-form) |
| 09 | **Aspect Ratio Calculator** | Calculadora de proporciones | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2309%20-%20Aspect%20Ratio%20Calculator) | [](https://your-website.dev/09-aspect-ratio-calculator) |
| 10 | **Weather App** | Aplicación del clima | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2310%20-%20Weather%20App) | [](https://your-website.dev/10-weather-app) |
| 11 | **Movie Guide App** | Guía de películas | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2311%20-%20Movie%20Info%20App) | [](https://your-website.dev/11-movie-guide) |
| 12 | **Type Test App** | Aplicación de prueba de velocidad de escritura | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2312%20-%20Type%20Test%20App) | [](https://your-website.dev/12-type-test) |
| 13 | **Translator App** | Aplicación de traducción | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2313%20-%20Translator%20App) | [](https://your-website.dev/13-translator) |
| 14 | **Crypto Price App** | Aplicación de precios de criptomonedas | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2314%20-%20Crypto%20Price%20App) | [](https://your-website.dev/14-crypto-price) |
| 15 | **ToDo App** | Aplicación de lista de tareas | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2315%20-%20ToDo%20App) | [](https://your-website.dev/15-todo) |
| 16 | **Geometric Art Generator** | Generador de arte geométrico | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2316%20-%20Geometric%20Art%20Generator) | [](https://your-website.dev/16-geometric-art) |
| 17 | **Snake Game** | Juego de la serpiente | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2317%20-%20Snake%20Game) | [](https://your-website.dev/17-snake-game) |
| 18 | **Budget App** | Aplicación de presupuesto | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2318%20-%20Budget%20App) | [](https://your-website.dev/18-budget) |
| 19 | **Text To Speech App** | Aplicación de texto a voz | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2319%20-%20Text%20To%20Speech%20App) | [](https://your-website.dev/19-text-to-speech) |
| 20 | **QR Code Reader** | Lector de códigos QR | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2320%20-%20QR%20Code%20Reader) | [](https://your-website.dev/20-qr-code-reader) |
| 21 | **Spin Wheel App** | Aplicación de rueda de la fortuna | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2321%20-%20Spin%20Wheel%20App) | [](https://your-website.dev/21-spin-wheel) |
| 22 | **Gradient Generator** | Generador de gradientes | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2322%20-%20Gradient%20Generator) | [](https://your-website.dev/22-gradient-generator) |
| 23 | **Guess The Word Game** | Juego de adivinar la palabra | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2323%20-%20Guess%20The%20Word%20Game) | [](https://your-website.dev/23-guess-the-word) |
| 24 | **Simon Game** | Juego de Simon | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2324%20-%20Simon%20Game) | [](https://your-website.dev/24-simon-game) |
| 25 | **Apex Charts** | Gráficos interactivos con ApexCharts | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2325%20-%20JS%20Charts) | [](https://your-website.dev/25-apex-charts) |
| 26 | **Recipe Guide App** | Guía de recetas | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2326%20-%20Recipe%20Guide%20App) | [](https://your-website.dev/26-recipe-guide) |
| 27 | **Minesweeper Game** | Juego de buscaminas | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2327%20-%20MineSweeper%20Game) | [](https://your-website.dev/27-minesweeper) |
| 28 | **Github Api** | Interfaz con la API de GitHub | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2328%20-%20Github%20Api) | [](https://your-website.dev/28-github-api) |
| 29 | **Breakout Game** | Juego de romper ladrillos | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2329%20-%20Breakout%20Game) | [](https://your-website.dev/29-breakout-game) |
| 30 | **Music Player App** | Reproductor de música | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2330%20-%20Music%20Player%20App) | [](https://your-website.dev/30-music-player) |
| 31 | **ChatGPT Bot** | Bot de ChatGPT | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2331%20-%20ChatGPT%20Bot) | [](https://your-website.dev/31-chatgpt-bot) |
| 32 | **Google Maps Api** | Interfaz con la API de Google Maps | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2332%20-%20Google%20Maps%20Api) | [](https://your-website.dev/32-google-maps-api) |
| 33 | **Pong Game** | Juego de Pong | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2333%20-%20Pong%20Game) | [](https://your-website.dev/33-pong-game) |
| 34 | **Chrome Color Picker Extension** | Extensión de Chrome para seleccionar colores | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2334%20-%20Chrome%20Color%20Picker%20Extension) | [](https://your-website.dev/34-chrome-color-picker) |
| 35 | **ASCII Donut Animation** | Animación de donut en ASCII | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2335%20-%20ASCII%20Donut%20Animation) | [](https://your-website.dev/35-ascii-donut) |
| 36 | **Stock Tracker App** | Aplicación de seguimiento de acciones | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2336%20-%20Stock%20Tracker%20App) | [](https://your-website.dev/36-stock-tracker) |
| 37 | **Box Shadow Generator** | Generador de sombras de caja | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2337%20-%20Shadow%20Generator) | [](https://your-website.dev/37-box-shadow-generator) |
| 38 | **Movie App (TheMovieDB)** | Aplicación de películas con TheMovieDB | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2338%20-%20Movie%20App) | [](https://your-website.dev/38-movie-app) |
| 39 | **Tradingview Widget** | Widget de TradingView | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2339%20-%20Tradingview%20Widget) | [](https://your-website.dev/39-tradingview-widget) |
| 40 | **Detect Internet Speed** | Detecta la velocidad de internet | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2340%20-%20Detect%20Internet%20Speed) | [](https://your-website.dev/40-detect-internet-speed) |
| 41 | **Currency Converter** | Convertidor de divisas | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2341%20-%20Currency%20Converter) | [](https://your-website.dev/41-currency-converter) |
| 42 | **Live Code Editor** | Editor de código en vivo | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2342%20-%20Live%20Code%20Editor) | [](https://your-website.dev/42-live-code-editor) |
| 43 | **Parallex Slider With Flickity** | Slider parallax con Flickity | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2343%20-%20Parallex%20Slider) | [](https://your-website.dev/43-parallex-slider) |
| 44 | **Minimal Weather App** | Aplicación del clima minimalista | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2344%20-%20Minimal%20Weather%20App%20With%20Api) | [](https://your-website.dev/44-minimal-weather) |
| 45 | **Particles Portfolio** | Portafolio con partículas animadas | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2345%20-%20Particles%20Portfolio) | [](https://your-website.dev/45-particles-portfolio) |
| 46 | **Sudoku Solver** | Solucionador de Sudoku | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2346%20-%20Sudoku%20Solver) | [](https://your-website.dev/46-sudoku-solver) |
| 47 | **Text Encryptor** | Encriptador de texto | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2347%20-%20Text%20Encryptor) | [](https://your-website.dev/47-text-encryptor) |
| 48 | **Ai Image Generator** | Generador de imágenes con IA | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2348%20-%20Ai%20Image%20Generator) | [](https://your-website.dev/48-ai-image-generator) |
| 49 | **Chess Game (VS Computer)** | Juego de ajedrez contra la computadora | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2349%20-%20Chess%20Game) | [](https://your-website.dev/49-chess-game) |
| 50 | **Food Recipe Website** | Sitio web de recetas de comida | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2350%20-%20Food%20Recipe%20App) | [](https://your-website.dev/50-food-recipe) |
| 51 | **Draggable Profile Card** | Tarjeta de perfil arrastrable | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2351%20-%20Draggable%20Profile%20Card) | [](https://your-website.dev/51-draggable-profile-card) |
| 52 | **Email Sender App** | Aplicación para enviar correos electrónicos | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2352%20-%20Email%20Sender%20App) | [](https://your-website.dev/52-email-sender) |
| 53 | **Url Shortner** | Acortador de URL | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2353%20-%20Url%20Shortner) | [](https://your-website.dev/53-url-shortner) |
| 54 | **Glassmorphism Generator** | Generador de glassmorphism | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2354%20-%20Glassmorphism%20Creator) | [](https://your-website.dev/54-glassmorphism-generator) |
| 55 | **Alarm App** | Aplicación de alarma | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2355%20-%20Alarm%20App) | [](https://your-website.dev/55-alarm) |
| 56 | **Image Color Picker** | Selector de color de imagen | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2356%20-%20Image%20Color%20Picker) | [](https://your-website.dev/56-image-color-picker) |
| 57 | **2048 Game** | Juego 2048 | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2357%20-%202048%20Game) | [](https://your-website.dev/57-2048-game) |
| 58 | **Games Release Calendar** | Calendario de lanzamientos de juegos | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2358%20-%20Games%20Release%20Calendar) | [](https://your-website.dev/58-games-release-calendar) |
| 59 | **Snake Pong Game** | Juego de Snake Pong | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2359%20-%20Snake%20Pong) | [](https://your-website.dev/59-snake-pong) |
| 60 | **Wikipedia Searcher** | Buscador de Wikipedia | [](https://github.com/gianmattus-programmer/100-DIAS-DE-JS/tree/master/Día%20%2360%20-%20Wikipedia%20Searcher) | [](https://your-website.dev/60-wikipedia-searcher) |
| 61 | **Api Quiz Game** | Juego de preguntas con API | []() | [](https://your-website.dev/61-api-quiz-game) |
| 62 | **Chrome ToDo Extension** | Extensión de Chrome para lista de tareas | []() | [](https://your-website.dev/62-chrome-todo-extension) |
| 63 | **Chrome Translator Extension** | Extensión de Chrome para traducción | []() | [](https://your-website.dev/63-chrome-translator-extension) |
| 64 | **Speech To Text** | Conversión de voz a texto | []() | [](https://your-website.dev/64-speech-to-text) |
| 65 | **Capture Screenshot** | Captura de pantalla | []() | [](https://your-website.dev/65-capture-screenshot) |
| 66 | **Live Chart Generator** | Generador de gráficos en vivo | []() | [](https://your-website.dev/66-live-chart-generator) |
| 67 | **Captcha App** | Aplicación de captcha | []() | [](https://your-website.dev/67-captcha-app) |
| 68 | **JSON Parser** | Analizador de JSON | []() | [](https://your-website.dev/68-json-parser) |
| 69 | **Form Validation** | Validación de formularios | []() | [](https://your-website.dev/69-form-validation) |
| 70 | **Calendar With Events** | Calendario con eventos | []() | [](https://your-website.dev/70-calendar-with-events) |
| 71 | **News Aggregator App** | Aplicación de agregador de noticias | []() | [](https://your-website.dev/71-news-aggregator) |
| 72 | **Common Sliders** | Sliders comunes | []() | [](https://your-website.dev/72-common-sliders) |
| 73 | **Gameboy Tetris Clone** | Clon de Tetris para Gameboy | []() | [](https://your-website.dev/73-gameboy-tetris-clone) |
| 74 | **Flashcard App** | Aplicación de tarjetas de memoria | []() | [](https://your-website.dev/74-flashcard-app) |
| 75 | **Mini Music Player** | Reproductor de música mini | []() | [](https://your-website.dev/75-mini-music-player) |
| 76 | **Page Translator Extension** | Extensión de traducción de páginas | []() | [](https://your-website.dev/76-page-translator-extension) |
| 77 | **AI Image Detector** | Detector de imágenes con IA | []() | [](https://your-website.dev/77-ai-image-detector) |
| 78 | **Google Gemini Clone** | Clon de Google Gemini | []() | [](https://your-website.dev/78-google-gemini-clone) |
## 🚧 Próximos Proyectos
### Algunos proyectos por venir:
🎮 Mini Juego RPG
🤖 Bot de Discord
📊 Dashboard Crypto
🎨 Editor de Memes
🎵 Visualizador de Audio
🌍 Rastreador COVID
## 🤝 Contribuciones
👨💻 Cómo Contribuir
- 🍴 Fork del repositorio
- 🌿 Crea tu rama de características
git checkout -b feature/AmazingFeature
- 💾 Guarda tus cambios
git commit -m '✨ Add some AmazingFeature'
- 📤 Sube tus cambios
git push origin feature/AmazingFeature
- 🔄 Abre un Pull Request
🌟 Áreas de Contribución
- 📝 Documentación y guías
- 🐛 Reporte de errores
- ✨ Nuevas características
- 🎨 Mejoras de UI/UX
- ♿ Mejoras de accesibilidad
## 📫 Contacto y Redes Sociales
¿Tienes preguntas o sugerencias? ¡No dudes en contactarme! 📩
## ⭐ ¡Apoya este Proyecto!
🌟 Dale una Estrella
Si te resulta útil, ¡apóyalo con una estrella!
🔄 Comparte
Ayuda a otros desarrolladores compartiendo este recurso
