{"id":22558033,"url":"https://github.com/jd-apprentice/javascript30solutions","last_synced_at":"2025-06-15T17:01:36.783Z","repository":{"id":104427700,"uuid":"399240949","full_name":"jd-apprentice/Javascript30Solutions","owner":"jd-apprentice","description":"💛 Retos de javascript30.com","archived":false,"fork":false,"pushed_at":"2021-09-22T21:17:16.000Z","size":28224,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T12:15:02.751Z","etag":null,"topics":["javascript"],"latest_commit_sha":null,"homepage":"javascript30-solutions.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jd-apprentice.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-08-23T20:35:39.000Z","updated_at":"2022-03-30T16:10:23.000Z","dependencies_parsed_at":"2023-03-13T14:56:41.482Z","dependency_job_id":null,"html_url":"https://github.com/jd-apprentice/Javascript30Solutions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-apprentice%2FJavascript30Solutions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-apprentice%2FJavascript30Solutions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-apprentice%2FJavascript30Solutions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jd-apprentice%2FJavascript30Solutions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jd-apprentice","download_url":"https://codeload.github.com/jd-apprentice/Javascript30Solutions/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246020267,"owners_count":20710724,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript"],"created_at":"2024-12-07T20:10:46.370Z","updated_at":"2025-03-28T11:28:31.426Z","avatar_url":"https://github.com/jd-apprentice.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](https://javascript30.com/images/JS3-social-share.png)\n\n# JavaScript30\n\nJavaScrtip30 es un reto donde en 30 dias armas 30 cosas diferentes, para ver mas sobre como es cada reto podes visitar su [Pagina]\n\n## Dia 1 - Drum kit\n- ✔️ Completado, codigo fuente [Drumkit]\n- Drum Kit para tocar musica, reconoce el teclado\n![1](https://user-images.githubusercontent.com/68082746/134415600-a1a65279-8f9e-45ca-8ccd-a0f671abe3b3.gif)\n\n\n## Dia 2 - Clock JS\n- ✔️ Completado, codigo fuente [ClockJS]\n- Reloj simple con hora local\n!![2](https://user-images.githubusercontent.com/68082746/134415653-80c03c87-2255-49eb-a035-4f188e54d571.gif)\n\n \n## Dia 3 - CSS Variables\n- ✔️ Completado, codigo fuente [CSSVariables]\n- Actualizar variables de CSS en tiempo real con JS\n![3](https://user-images.githubusercontent.com/68082746/134415696-41fa3569-6503-44cc-b8e9-da03a6d67a16.gif)\n\n \n## Dia 5 - Flex Panel Gallery\n- ✔️ Completado, codigo fuente [FlexPanelGallery]\n- FlexBox/Manipulacion del dom para darle estilos on click\n![5](https://user-images.githubusercontent.com/68082746/134416076-0e5f6b30-22f5-46bf-9f2e-c1d113a3a0d7.gif)\n\n   \n## Dia 6 - Type Ahead\n- ✔️ Completado, codigo fuente [TypeAhead]\n- Filtro de busqueda consumiendo JSON\n![6](https://user-images.githubusercontent.com/68082746/134416147-8f6ae2f2-ef9b-4e4f-b7c1-159d2b9fba4e.gif)\n\n \n## Dia 8 - HTML5 Canvas\n- ✔️ Completado, codigo fuente [HTML5Canvas]\n- Dibujar en pantalla con canvas\n![8](https://user-images.githubusercontent.com/68082746/134416193-2563562f-3a0f-4860-a224-fb483ed4a414.gif)\n\n \n## Dia 10 - Hold Shift and Check Checkboxes\n- ✔️ Completado, codigo fuente [HoldShift]\n- Atajos del teclado en la web\n![10](https://user-images.githubusercontent.com/68082746/134416408-ebcfd8a5-4289-45ea-a1ba-b3dd3e304dd1.gif)\n\n \n## Dia 11 - Custom Video Player\n- ✔️ Completado, codigo fuente [VideoPlayer]\n- Reproductor de video de HTML5 modificado\n![11](https://user-images.githubusercontent.com/68082746/134416856-64c44f95-d9a1-4c18-92d3-b8d5c1b41289.gif)\n\n \n## Dia 12 - Key Detection\n- ✔️ Completado, codigo fuente [KeyDetection]\n- Como detectar lo que escribis y activar un evento\n![](https://i.imgur.com/tFNqE0w.png)\n \n## Dia 13 - Slide in on Scroll\n- ✔️ Completado, codigo fuente [SlideScroll]\n- Animacion de fotos a medida que vas scrolleando\n![13](https://user-images.githubusercontent.com/68082746/134416918-828b5579-796f-4db1-b60c-a8f66fe4ec90.gif)\n \n## Dia 15 - LocalStorage\n- ✔️ Completado, codigo fuente [LocalStorage]\n- Persistencia de datos con localStorage\n![15](https://user-images.githubusercontent.com/68082746/134416981-011fc84f-0d4a-4bcd-a9a1-7552c7876791.gif)\n \n ## Dia 16 - Mouse Shadow/Position\n- ✔️ Completado, codigo fuente [Movement]\n- Movimiento/Sombra en base a la posicion del cursor\n![16](https://user-images.githubusercontent.com/68082746/134417019-ac3c3440-2271-4773-8561-3df493cc6501.gif)\n\n ## Dia 17 - Sort Without Articles\n- ✔️ Completado, codigo fuente [SortArticles]\n- Ordenando un array sin los articulos\n![](https://i.imgur.com/cf3Y8xB.png)\n\n ## Dia 18 - Adding up times with Reduce\n- ✔️ Completado, codigo fuente [Reduce]\n- Convertir nodos a array y sumarlos con reduce\n![](https://i.imgur.com/8R5Hc5v.png)\n\n ## Dia 19 - Webcam Fun\n- ✔️ Completado, codigo fuente [Webcam]\n- Manejo de la camara, algunos filtros pero estan comentados\n![](https://i.imgur.com/4rZUclm.png)\n \n ## Dia 20 - Speech Detection\n- ✔️ Completado, codigo fuente [Speech]\n- SOLO FUNCIONA EN GOOGLE CHROME\n- Detection de voz, con un comando especial para abrir mi perfil de gitub\n![](https://i.imgur.com/KqYQDCw.png)\n \n  ## Dia 21 - Geolocation\n- ✔️ Completado, codigo fuente [Location]\n- Utilizando bluestacks con un joystick como motor de movimiento\n- Deteccion de geolocalizacion utilizado en el celular, incluyendo velocidad\n![](https://i.imgur.com/iZRE2Hk.png)\n \n  ## Dia 22 - Follow Along Link Highlighter\n- ✔️ Completado, codigo fuente [Follow]\n- Seguimiento de cursor y actualizacion flexible de hover/highlight\n![22](https://user-images.githubusercontent.com/68082746/134417089-35dba4ae-36b3-4124-b5a7-db0d10e1d18e.gif)\n \n  ## Dia 23 - Speech Synthesis\n- ✔️ Completado, codigo fuente [Synthesis]\n- Texto a voz, la cantidad de voces varia del sistema operativo\n![](https://i.imgur.com/g4eQdOr.png)\n\n  ## Dia 24 - Sticky Navbar\n- ✔️ Completado, codigo fuente [NavBar]\n- Fixed navbar con animacion\n![24](https://user-images.githubusercontent.com/68082746/134417122-d914bff8-e1e0-41a6-bcf2-bca18160219a.gif)\n\n  ## Dia 26 - Stripe Follow Along Nav\n- ✔️ Completado, codigo fuente [Stripe]\n- Dropdown que se autoajusta al contenido\n![26](https://user-images.githubusercontent.com/68082746/134417175-155e6a9c-517a-4c8b-bcb4-90562ec8caec.gif)\n \n  ## Dia 27 - Click and Drag\n- ✔️ Completado, codigo fuente [Drag]\n- Arrastrar elementos con el mouse, drag/swiper\n![27](https://user-images.githubusercontent.com/68082746/134417203-2d0866cd-bd22-4379-885f-49921dbcb22a.gif)\n\n ## Dia 28 - Video Speed Controller\n- ✔️ Completado, codigo fuente [Video]\n- Controlar la velocidad del video\n![28](https://user-images.githubusercontent.com/68082746/134417438-e24924d9-57e2-41ef-a7c7-7f71350de861.gif)\n \n ## Dia 29 - Countdown Timer\n- ✔️ Completado, codigo fuente [Timer]\n- Temporizador para tareas\n![29](https://user-images.githubusercontent.com/68082746/134417251-0d33b4b0-b5df-45e3-99ff-b47a5f4e1f14.gif)\n\n ## Dia 30 - Whack A Mole\n- ✔️ Completado, codigo fuente [Mole]\n- Mini-juego de pegarle a los animalitos\n![30](https://user-images.githubusercontent.com/68082746/134417267-9c82d7ae-fdde-4763-985d-abb9de874238.gif)\n \n [Pagina]: https://javascript30.com/\n [Drumkit]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/01%20Drum%20Kit/js/app.js\n [ClockJS]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/02%20JS%20Clock/js/app.js\n [CSSVariables]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/03%20CSS%20Variables/js/app.js\n [FlexPanelGallery]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/05%20Flex%20Panel%20Gallery/js/app.js\n [TypeAhead]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/6%20Type%20Ahead/js/app.js\n [HTML5Canvas]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/08%20Fun%20with%20HTML5%20Canvas/js/app.js\n [HoldShift]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/10%20Hold%20Shift%20and%20Check%20Checkboxes/js/app.js\n [VideoPlayer]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/11%20Custom%20Video%20Player/js/app.js\n [KeyDetection]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/12%20Key%20Sequence%20Detection/js/app.js\n [SlideScroll]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/13%20Slide%20in%20on%20Scroll/js/app.js\n [LocalStorage]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/15%20LocalStorage/js/app.js\n [Movement]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/16%20Mouse%20Shadow/js/app.js\n [SortArticles]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/17%20Sort%20Without%20Articles/js/app.js\n [Reduce]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/18%20Adding%20up%20times%20with%20Reduce/js/app.js\n [Webcam]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/19%20Webcam%20Fun/js/app.js\n [Speech]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/20%20Speech%20Detection/js/app.js\n [Location]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/21%20Geolocation/js/app.js\n [Follow]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/22%20Follow%20Along%20Link%20Highlighter/js/app.js\n [Synthesis]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/23%20Speech%20Synthesis/js/app.js\n [NavBar]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/24%20Sticky%20Nav/js/app.js\n [Stripe]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/26%20Stripe%20Follow%20Along%20Nav/js/app.js\n [Drag]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/27%20Click%20and%20Drag/js/app.js\n [Video]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/28%20Video%20Speed%20Controller/js/app.js\n [Timer]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/29%20Countdown%20Timer/js/app.js\n [Mole]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/30%20Whack%20A%20Mole/js/app.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd-apprentice%2Fjavascript30solutions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjd-apprentice%2Fjavascript30solutions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjd-apprentice%2Fjavascript30solutions/lists"}