https://github.com/jd-apprentice/javascript30solutions

💛 Retos de javascript30.com
https://github.com/jd-apprentice/javascript30solutions

javascript

Last synced: 8 months ago
JSON representation

💛 Retos de javascript30.com

• Host: GitHub
• URL: https://github.com/jd-apprentice/javascript30solutions
• Owner: jd-apprentice
• Created: 2021-08-23T20:35:39.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-09-22T21:17:16.000Z (over 4 years ago)
• Last Synced: 2025-02-02T12:15:02.751Z (about 1 year ago)
• Topics: javascript
• Language: HTML
• Homepage: javascript30-solutions.vercel.app
• Size: 26.9 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![](https://javascript30.com/images/JS3-social-share.png)

# JavaScript30

JavaScrtip30 es un reto donde en 30 dias armas 30 cosas diferentes, para ver mas sobre como es cada reto podes visitar su [Pagina]

## Dia 1 - Drum kit

- ✔️ Completado, codigo fuente [Drumkit]

- Drum Kit para tocar musica, reconoce el teclado

![1](https://user-images.githubusercontent.com/68082746/134415600-a1a65279-8f9e-45ca-8ccd-a0f671abe3b3.gif)

## Dia 2 - Clock JS

- ✔️ Completado, codigo fuente [ClockJS]

- Reloj simple con hora local

!![2](https://user-images.githubusercontent.com/68082746/134415653-80c03c87-2255-49eb-a035-4f188e54d571.gif)

 

## Dia 3 - CSS Variables

- ✔️ Completado, codigo fuente [CSSVariables]

- Actualizar variables de CSS en tiempo real con JS

![3](https://user-images.githubusercontent.com/68082746/134415696-41fa3569-6503-44cc-b8e9-da03a6d67a16.gif)

 

## Dia 5 - Flex Panel Gallery

- ✔️ Completado, codigo fuente [FlexPanelGallery]

- FlexBox/Manipulacion del dom para darle estilos on click

![5](https://user-images.githubusercontent.com/68082746/134416076-0e5f6b30-22f5-46bf-9f2e-c1d113a3a0d7.gif)

   

## Dia 6 - Type Ahead

- ✔️ Completado, codigo fuente [TypeAhead]

- Filtro de busqueda consumiendo JSON

![6](https://user-images.githubusercontent.com/68082746/134416147-8f6ae2f2-ef9b-4e4f-b7c1-159d2b9fba4e.gif)

 

## Dia 8 - HTML5 Canvas

- ✔️ Completado, codigo fuente [HTML5Canvas]

- Dibujar en pantalla con canvas

![8](https://user-images.githubusercontent.com/68082746/134416193-2563562f-3a0f-4860-a224-fb483ed4a414.gif)

 

## Dia 10 - Hold Shift and Check Checkboxes

- ✔️ Completado, codigo fuente [HoldShift]

- Atajos del teclado en la web

![10](https://user-images.githubusercontent.com/68082746/134416408-ebcfd8a5-4289-45ea-a1ba-b3dd3e304dd1.gif)

 

## Dia 11 - Custom Video Player

- ✔️ Completado, codigo fuente [VideoPlayer]

- Reproductor de video de HTML5 modificado

![11](https://user-images.githubusercontent.com/68082746/134416856-64c44f95-d9a1-4c18-92d3-b8d5c1b41289.gif)

 

## Dia 12 - Key Detection

- ✔️ Completado, codigo fuente [KeyDetection]

- Como detectar lo que escribis y activar un evento

![](https://i.imgur.com/tFNqE0w.png)

 

## Dia 13 - Slide in on Scroll

- ✔️ Completado, codigo fuente [SlideScroll]

- Animacion de fotos a medida que vas scrolleando

![13](https://user-images.githubusercontent.com/68082746/134416918-828b5579-796f-4db1-b60c-a8f66fe4ec90.gif)

 

## Dia 15 - LocalStorage

- ✔️ Completado, codigo fuente [LocalStorage]

- Persistencia de datos con localStorage

![15](https://user-images.githubusercontent.com/68082746/134416981-011fc84f-0d4a-4bcd-a9a1-7552c7876791.gif)

 

 ## Dia 16 - Mouse Shadow/Position

- ✔️ Completado, codigo fuente [Movement]

- Movimiento/Sombra en base a la posicion del cursor

![16](https://user-images.githubusercontent.com/68082746/134417019-ac3c3440-2271-4773-8561-3df493cc6501.gif)

 ## Dia 17 - Sort Without Articles

- ✔️ Completado, codigo fuente [SortArticles]

- Ordenando un array sin los articulos

![](https://i.imgur.com/cf3Y8xB.png)

 ## Dia 18 - Adding up times with Reduce

- ✔️ Completado, codigo fuente [Reduce]

- Convertir nodos a array y sumarlos con reduce

![](https://i.imgur.com/8R5Hc5v.png)

 ## Dia 19 - Webcam Fun

- ✔️ Completado, codigo fuente [Webcam]

- Manejo de la camara, algunos filtros pero estan comentados

![](https://i.imgur.com/4rZUclm.png)

 

 ## Dia 20 - Speech Detection

- ✔️ Completado, codigo fuente [Speech]

- SOLO FUNCIONA EN GOOGLE CHROME

- Detection de voz, con un comando especial para abrir mi perfil de gitub

![](https://i.imgur.com/KqYQDCw.png)

 

  ## Dia 21 - Geolocation

- ✔️ Completado, codigo fuente [Location]

- Utilizando bluestacks con un joystick como motor de movimiento

- Deteccion de geolocalizacion utilizado en el celular, incluyendo velocidad

![](https://i.imgur.com/iZRE2Hk.png)

 

  ## Dia 22 - Follow Along Link Highlighter

- ✔️ Completado, codigo fuente [Follow]

- Seguimiento de cursor y actualizacion flexible de hover/highlight

![22](https://user-images.githubusercontent.com/68082746/134417089-35dba4ae-36b3-4124-b5a7-db0d10e1d18e.gif)

 

  ## Dia 23 - Speech Synthesis

- ✔️ Completado, codigo fuente [Synthesis]

- Texto a voz, la cantidad de voces varia del sistema operativo

![](https://i.imgur.com/g4eQdOr.png)

  ## Dia 24 - Sticky Navbar

- ✔️ Completado, codigo fuente [NavBar]

- Fixed navbar con animacion

![24](https://user-images.githubusercontent.com/68082746/134417122-d914bff8-e1e0-41a6-bcf2-bca18160219a.gif)

  ## Dia 26 - Stripe Follow Along Nav

- ✔️ Completado, codigo fuente [Stripe]

- Dropdown que se autoajusta al contenido

![26](https://user-images.githubusercontent.com/68082746/134417175-155e6a9c-517a-4c8b-bcb4-90562ec8caec.gif)

 

  ## Dia 27 - Click and Drag

- ✔️ Completado, codigo fuente [Drag]

- Arrastrar elementos con el mouse, drag/swiper

![27](https://user-images.githubusercontent.com/68082746/134417203-2d0866cd-bd22-4379-885f-49921dbcb22a.gif)

 ## Dia 28 - Video Speed Controller

- ✔️ Completado, codigo fuente [Video]

- Controlar la velocidad del video

![28](https://user-images.githubusercontent.com/68082746/134417438-e24924d9-57e2-41ef-a7c7-7f71350de861.gif)

 

 ## Dia 29 - Countdown Timer

- ✔️ Completado, codigo fuente [Timer]

- Temporizador para tareas

![29](https://user-images.githubusercontent.com/68082746/134417251-0d33b4b0-b5df-45e3-99ff-b47a5f4e1f14.gif)

 ## Dia 30 - Whack A Mole

- ✔️ Completado, codigo fuente [Mole]

- Mini-juego de pegarle a los animalitos

![30](https://user-images.githubusercontent.com/68082746/134417267-9c82d7ae-fdde-4763-985d-abb9de874238.gif)

 

 [Pagina]: https://javascript30.com/

 [Drumkit]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/01%20Drum%20Kit/js/app.js

 [ClockJS]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/02%20JS%20Clock/js/app.js

 [CSSVariables]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/03%20CSS%20Variables/js/app.js

 [FlexPanelGallery]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/05%20Flex%20Panel%20Gallery/js/app.js

 [TypeAhead]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/6%20Type%20Ahead/js/app.js

 [HTML5Canvas]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/08%20Fun%20with%20HTML5%20Canvas/js/app.js

 [HoldShift]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/10%20Hold%20Shift%20and%20Check%20Checkboxes/js/app.js

 [VideoPlayer]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/11%20Custom%20Video%20Player/js/app.js

 [KeyDetection]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/12%20Key%20Sequence%20Detection/js/app.js

 [SlideScroll]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/13%20Slide%20in%20on%20Scroll/js/app.js

 [LocalStorage]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/15%20LocalStorage/js/app.js

 [Movement]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/16%20Mouse%20Shadow/js/app.js

 [SortArticles]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/17%20Sort%20Without%20Articles/js/app.js

 [Reduce]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/18%20Adding%20up%20times%20with%20Reduce/js/app.js

 [Webcam]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/19%20Webcam%20Fun/js/app.js

 [Speech]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/20%20Speech%20Detection/js/app.js

 [Location]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/21%20Geolocation/js/app.js

 [Follow]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/22%20Follow%20Along%20Link%20Highlighter/js/app.js

 [Synthesis]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/23%20Speech%20Synthesis/js/app.js

 [NavBar]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/24%20Sticky%20Nav/js/app.js

 [Stripe]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/26%20Stripe%20Follow%20Along%20Nav/js/app.js

 [Drag]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/27%20Click%20and%20Drag/js/app.js

 [Video]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/28%20Video%20Speed%20Controller/js/app.js

 [Timer]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/29%20Countdown%20Timer/js/app.js

 [Mole]: https://github.com/jd-apprentice/Javascript30Solutions/blob/main/30%20Whack%20A%20Mole/js/app.js