├── .gitignore
├── .vscode
    ├── extensions.json
    └── settings.json
├── 01-tinder-swipe
    ├── index.html
    ├── iphone.webp
    ├── photos
    │   ├── 1.webp
    │   └── 2.webp
    ├── tinder-icons.webp
    └── tinder-logo.webp
├── 02-arkanoid-game
    ├── bkg.png
    ├── bricks.png
    ├── index.html
    └── sprite.png
├── 03-midu-typing-game
    ├── data.js
    └── index.html
├── 04-chatgpt-local
    ├── index.html
    └── worker.js
├── 05-api-geo-ip
    └── index.html
├── 06-tetris-canvas
    └── index.html
├── 07-tier-maker
    └── index.html
├── 08-excel-js
    └── index.html
├── 09-paint-win-95
    ├── cursors
    │   ├── erase.png
    │   ├── picker.png
    │   ├── pincel.png
    │   └── point.png
    ├── icon.png
    ├── icons
    │   ├── clear.png
    │   ├── draw.png
    │   ├── ellipse.png
    │   ├── erase.png
    │   ├── fill.png
    │   ├── picker.png
    │   ├── rectangle.png
    │   ├── save.png
    │   ├── star.png
    │   └── trash.png
    └── index.html
├── 10-stack-game
    └── index.html
├── 11-js-perf-benchmark
    ├── index.html
    └── worker.js
├── 12-moto-scroll
    ├── frames
    │   ├── 0.webp
    │   ├── moto-001.webp
    │   ├── moto-002.webp
    │   ├── moto-003.webp
    │   ├── moto-004.webp
    │   ├── moto-005.webp
    │   ├── moto-006.webp
    │   ├── moto-007.webp
    │   ├── moto-008.webp
    │   ├── moto-009.webp
    │   ├── moto-010.webp
    │   ├── moto-011.webp
    │   ├── moto-012.webp
    │   ├── moto-013.webp
    │   ├── moto-014.webp
    │   ├── moto-015.webp
    │   ├── moto-016.webp
    │   ├── moto-017.webp
    │   ├── moto-018.webp
    │   ├── moto-019.webp
    │   ├── moto-020.webp
    │   ├── moto-021.webp
    │   ├── moto-022.webp
    │   ├── moto-023.webp
    │   ├── moto-024.webp
    │   ├── moto-025.webp
    │   ├── moto-026.webp
    │   ├── moto-027.webp
    │   ├── moto-028.webp
    │   ├── moto-029.webp
    │   ├── moto-030.webp
    │   ├── moto-031.webp
    │   ├── moto-032.webp
    │   ├── moto-033.webp
    │   ├── moto-034.webp
    │   ├── moto-035.webp
    │   ├── moto-036.webp
    │   ├── moto-037.webp
    │   ├── moto-038.webp
    │   ├── moto-039.webp
    │   ├── moto-040.webp
    │   ├── moto-041.webp
    │   ├── moto-042.webp
    │   ├── moto-043.webp
    │   ├── moto-044.webp
    │   ├── moto-045.webp
    │   ├── moto-046.webp
    │   ├── moto-047.webp
    │   ├── moto-048.webp
    │   ├── moto-049.webp
    │   ├── moto-050.webp
    │   ├── moto-051.webp
    │   ├── moto-052.webp
    │   ├── moto-053.webp
    │   ├── moto-054.webp
    │   ├── moto-055.webp
    │   ├── moto-056.webp
    │   ├── moto-057.webp
    │   ├── moto-058.webp
    │   ├── moto-059.webp
    │   ├── moto-060.webp
    │   ├── moto-061.webp
    │   ├── moto-062.webp
    │   ├── moto-063.webp
    │   ├── moto-064.webp
    │   ├── moto-065.webp
    │   ├── moto-066.webp
    │   ├── moto-067.webp
    │   ├── moto-068.webp
    │   ├── moto-069.webp
    │   ├── moto-070.webp
    │   ├── moto-071.webp
    │   ├── moto-072.webp
    │   ├── moto-073.webp
    │   ├── moto-074.webp
    │   ├── moto-075.webp
    │   ├── moto-076.webp
    │   ├── moto-077.webp
    │   ├── moto-078.webp
    │   ├── moto-079.webp
    │   ├── moto-080.webp
    │   ├── moto-081.webp
    │   ├── moto-082.webp
    │   ├── moto-083.webp
    │   ├── moto-084.webp
    │   ├── moto-085.webp
    │   ├── moto-086.webp
    │   ├── moto-087.webp
    │   ├── moto-088.webp
    │   ├── moto-089.webp
    │   ├── moto-090.webp
    │   ├── moto-091.webp
    │   ├── moto-092.webp
    │   ├── moto-093.webp
    │   ├── moto-094.webp
    │   ├── moto-095.webp
    │   ├── moto-096.webp
    │   ├── moto-097.webp
    │   ├── moto-098.webp
    │   ├── moto-099.webp
    │   ├── moto-100.webp
    │   ├── moto-101.webp
    │   ├── moto-102.webp
    │   ├── moto-103.webp
    │   ├── moto-104.webp
    │   ├── moto-105.webp
    │   ├── moto-106.webp
    │   ├── moto-107.webp
    │   ├── moto-108.webp
    │   ├── moto-109.webp
    │   ├── moto-110.webp
    │   ├── moto-111.webp
    │   ├── moto-112.webp
    │   ├── moto-113.webp
    │   ├── moto-114.webp
    │   ├── moto-115.webp
    │   ├── moto-116.webp
    │   ├── moto-117.webp
    │   ├── moto-118.webp
    │   ├── moto-119.webp
    │   ├── moto-120.webp
    │   ├── moto-121.webp
    │   ├── moto-122.webp
    │   ├── moto-123.webp
    │   ├── moto-124.webp
    │   ├── moto-125.webp
    │   ├── moto-126.webp
    │   ├── moto-127.webp
    │   ├── moto-128.webp
    │   ├── moto-129.webp
    │   ├── moto-130.webp
    │   ├── moto-131.webp
    │   ├── moto-132.webp
    │   ├── moto-133.webp
    │   ├── moto-134.webp
    │   ├── moto-135.webp
    │   ├── moto-136.webp
    │   ├── moto-137.webp
    │   ├── moto-138.webp
    │   ├── moto-139.webp
    │   ├── moto-140.webp
    │   ├── moto-141.webp
    │   ├── moto-142.webp
    │   ├── moto-143.webp
    │   ├── moto-144.webp
    │   ├── moto-145.webp
    │   ├── moto-146.webp
    │   ├── moto-147.webp
    │   ├── moto-148.webp
    │   ├── moto-149.webp
    │   ├── moto-150.webp
    │   └── moto-151.webp
    ├── images.js
    ├── index.html
    └── logo.png
├── LICENSE.md
├── README.md
├── web
    ├── .astro
    │   ├── content-assets.mjs
    │   ├── content-modules.mjs
    │   ├── content.d.ts
    │   ├── data-store.json
    │   ├── settings.json
    │   └── types.d.ts
    ├── README.md
    ├── astro.config.mjs
    ├── bun.lockb
    ├── package.json
    ├── public
    │   ├── favicon.svg
    │   ├── me-blue.webp
    │   ├── me.webp
    │   ├── og.jpg
    │   ├── projects
    │   │   ├── 01-tinder-swipe
    │   │   │   ├── index.html
    │   │   │   ├── iphone.webp
    │   │   │   ├── photos
    │   │   │   │   ├── 1.webp
    │   │   │   │   └── 2.webp
    │   │   │   ├── tinder-icons.webp
    │   │   │   └── tinder-logo.webp
    │   │   ├── 01.webp
    │   │   ├── 02-arkanoid-game
    │   │   │   ├── bkg.png
    │   │   │   ├── bricks.png
    │   │   │   ├── index.html
    │   │   │   └── sprite.png
    │   │   ├── 02.webp
    │   │   ├── 03-midu-typing-game
    │   │   │   ├── data.js
    │   │   │   └── index.html
    │   │   ├── 03.webp
    │   │   ├── 04-chatgpt-local
    │   │   │   ├── index.html
    │   │   │   └── worker.js
    │   │   ├── 04.webp
    │   │   ├── 05-api-geo-ip
    │   │   │   └── index.html
    │   │   ├── 05.webp
    │   │   ├── 06-tetris-canvas
    │   │   │   └── index.html
    │   │   ├── 06.webp
    │   │   ├── 07-tier-maker
    │   │   │   └── index.html
    │   │   ├── 07.webp
    │   │   ├── 08-excel-js
    │   │   │   └── index.html
    │   │   ├── 08.webp
    │   │   ├── 09-paint-win-95
    │   │   │   ├── cursors
    │   │   │   │   ├── erase.png
    │   │   │   │   ├── picker.png
    │   │   │   │   ├── pincel.png
    │   │   │   │   └── point.png
    │   │   │   ├── icon.png
    │   │   │   ├── icons
    │   │   │   │   ├── clear.png
    │   │   │   │   ├── draw.png
    │   │   │   │   ├── ellipse.png
    │   │   │   │   ├── erase.png
    │   │   │   │   ├── fill.png
    │   │   │   │   ├── picker.png
    │   │   │   │   ├── rectangle.png
    │   │   │   │   ├── save.png
    │   │   │   │   ├── star.png
    │   │   │   │   └── trash.png
    │   │   │   └── index.html
    │   │   ├── 09.webp
    │   │   ├── 10-stack-game
    │   │   │   └── index.html
    │   │   ├── 10.webp
    │   │   ├── 11-js-perf-benchmark
    │   │   │   ├── index.html
    │   │   │   └── worker.js
    │   │   ├── 11.webp
    │   │   ├── 12-moto-scroll
    │   │   │   ├── frames
    │   │   │   │   └── 0.webp
    │   │   │   ├── images.js
    │   │   │   ├── index.html
    │   │   │   └── logo.png
    │   │   └── 12.webp
    │   └── readme.jpg
    ├── scripts
    │   └── copy-projects.js
    ├── src
    │   ├── components
    │   │   ├── Footer.astro
    │   │   ├── GitHubStar.astro
    │   │   ├── Header.astro
    │   │   ├── Hero.astro
    │   │   ├── InfoProject.astro
    │   │   └── Projects.astro
    │   ├── consts.js
    │   ├── env.d.ts
    │   ├── layouts
    │   │   └── Layout.astro
    │   └── pages
    │   │   ├── [project].astro
    │   │   └── index.astro
    ├── tailwind.config.mjs
    └── tsconfig.json
└── xx-dice
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | web/dist


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/.vscode/extensions.json


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/.vscode/settings.json


--------------------------------------------------------------------------------
/01-tinder-swipe/iphone.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/01-tinder-swipe/iphone.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/photos/1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/01-tinder-swipe/photos/1.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/photos/2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/01-tinder-swipe/photos/2.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/tinder-icons.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/01-tinder-swipe/tinder-icons.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/tinder-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/01-tinder-swipe/tinder-logo.webp


--------------------------------------------------------------------------------
/02-arkanoid-game/bkg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/02-arkanoid-game/bkg.png


--------------------------------------------------------------------------------
/02-arkanoid-game/bricks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/02-arkanoid-game/bricks.png


--------------------------------------------------------------------------------
/02-arkanoid-game/index.html:
--------------------------------------------------------------------------------
  1 | <title>Arkanoid en JavaScript</title>
  2 | <style>
  3 |   body {
  4 |     background-color: #f0f0f0;
  5 |     display: grid;
  6 |     place-content: center;
  7 |   }
  8 | 
  9 |   canvas {
 10 |     border: 4px solid #000;
 11 |     border-bottom: transparent;
 12 |     background: url('./bkg.png') repeat;
 13 |     margin: 0 auto;
 14 |     display: block;
 15 |     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
 16 |   }
 17 | </style>
 18 | 
 19 | <canvas></canvas>
 20 | 
 21 | <img hidden id="sprite" src="./sprite.png" alt="Sprite Arkanoid" />
 22 | <img hidden id="bricks" src="./bricks.png" alt="Sprite Bricks Arkanoid" />
 23 | 
 24 | <script>
 25 |   const canvas = document.querySelector('canvas')
 26 |   const ctx = canvas.getContext('2d')
 27 | 
 28 |   const $sprite = document.querySelector('#sprite')
 29 |   const $bricks = document.querySelector('#bricks')
 30 | 
 31 |   canvas.width = 448
 32 |   canvas.height = 400
 33 | 
 34 |   /* Variables de nuestro juego */
 35 | 
 36 |   /* VARIABLES DE LA PELOTA */
 37 |   const ballRadius = 3;
 38 |   // posicion de la pelota
 39 |   let x = canvas.width / 2
 40 |   let y = canvas.height - 30
 41 |   // velocidad de la pelota
 42 |   let dx = -3
 43 |   let dy = -3
 44 | 
 45 |   /* VARIABLES DE LA PALETA */
 46 |   const PADDLE_SENSITIVITY = 8
 47 | 
 48 |   const paddleHeight = 10;
 49 |   const paddleWidth = 50;
 50 | 
 51 |   let paddleX = (canvas.width - paddleWidth) / 2
 52 |   let paddleY = canvas.height - paddleHeight - 10
 53 | 
 54 |   let rightPressed = false
 55 |   let leftPressed = false
 56 | 
 57 |   /* VARIABLES DE LOS LADRILLOS */
 58 |   const brickRowCount = 6;
 59 |   const brickColumnCount = 13;
 60 |   const brickWidth = 32;
 61 |   const brickHeight = 16;
 62 |   const brickPadding = 0;
 63 |   const brickOffsetTop = 80;
 64 |   const brickOffsetLeft = 16;
 65 |   const bricks = [];
 66 | 
 67 |   const BRICK_STATUS = {
 68 |     ACTIVE: 1,
 69 |     DESTROYED: 0
 70 |   }
 71 | 
 72 |   for (let c = 0; c < brickColumnCount; c++) {
 73 |     bricks[c] = [] // inicializamos con un array vacio
 74 |     for (let r = 0; r < brickRowCount; r++) {
 75 |       // calculamos la posicion del ladrillo en la pantalla
 76 |       const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft
 77 |       const brickY = r * (brickHeight + brickPadding) + brickOffsetTop
 78 |       // Asignar un color aleatorio a cada ladrillo
 79 |       const random = Math.floor(Math.random() * 8)
 80 |       // Guardamos la información de cada ladrillo
 81 |       bricks[c][r] = {
 82 |         x: brickX,
 83 |         y: brickY,
 84 |         status: BRICK_STATUS.ACTIVE,
 85 |         color: random
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 | 
 91 |   function drawBall() {
 92 |     ctx.beginPath() // iniciar el trazado
 93 |     ctx.arc(x, y, ballRadius, 0, Math.PI * 2)
 94 |     ctx.fillStyle = '#fff'
 95 |     ctx.fill()
 96 |     ctx.closePath() // terminar el trazado
 97 |   }
 98 | 
 99 |   function drawPaddle() {
100 |     ctx.drawImage(
101 |       $sprite, // imagen
102 |       29, // clipX: coordenadas de recorte
103 |       174, // clipY: coordenadas de recorte
104 |       paddleWidth, // el tamaño del recorte
105 |       paddleHeight, // tamaño del recorte
106 |       paddleX, // posición X del dibujo
107 |       paddleY, // posición Y del dibujo
108 |       paddleWidth, // ancho del dibujo
109 |       paddleHeight // alto del dibujo
110 |     )
111 |   }
112 | 
113 |   function drawBricks() {
114 |     for (let c = 0; c < brickColumnCount; c++) {
115 |       for (let r = 0; r < brickRowCount; r++) {
116 |         const currentBrick = bricks[c][r]
117 |         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
118 | 
119 |         const clipX = currentBrick.color * 32
120 | 
121 |         ctx.drawImage(
122 |           $bricks,
123 |           clipX,
124 |           0,
125 |           brickWidth, // 31
126 |           brickHeight, // 14
127 |           currentBrick.x,
128 |           currentBrick.y,
129 |           brickWidth,
130 |           brickHeight
131 |         )
132 |       }
133 |     }
134 |   }
135 | 
136 |   function drawUI() {
137 |     ctx.fillText(`FPS: ${framesPerSec}`, 5, 10)
138 |   }
139 | 
140 |   function collisionDetection() {
141 |     for (let c = 0; c < brickColumnCount; c++) {
142 |       for (let r = 0; r < brickRowCount; r++) {
143 |         const currentBrick = bricks[c][r]
144 |         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
145 | 
146 |         const isBallSameXAsBrick =
147 |           x > currentBrick.x &&
148 |           x < currentBrick.x + brickWidth
149 | 
150 |         const isBallSameYAsBrick =
151 |           y > currentBrick.y &&
152 |           y < currentBrick.y + brickHeight
153 | 
154 |         if (isBallSameXAsBrick && isBallSameYAsBrick) {
155 |           dy = -dy
156 |           currentBrick.status = BRICK_STATUS.DESTROYED
157 |         }
158 |       }
159 |     }
160 |   }
161 | 
162 |   function ballMovement() {
163 |     // rebotar las pelotas en los laterales
164 |     if (
165 |       x + dx > canvas.width - ballRadius || // la pared derecha
166 |       x + dx < ballRadius // la pared izquierda
167 |     ) {
168 |       dx = -dx
169 |     }
170 | 
171 |     // rebotar en la parte de arriba
172 |     if (y + dy < ballRadius) {
173 |       dy = -dy
174 |     }
175 | 
176 |     // la pelota toca la pala
177 |     const isBallSameXAsPaddle =
178 |       x > paddleX &&
179 |       x < paddleX + paddleWidth
180 | 
181 |     const isBallTouchingPaddle =
182 |       y + dy > paddleY
183 | 
184 |     if (isBallSameXAsPaddle && isBallTouchingPaddle) {
185 |       dy = -dy // cambiamos la dirección de la pelota
186 |     } else if ( // la pelota toca el suelo
187 |       y + dy > canvas.height - ballRadius || y + dy > paddleY + paddleHeight
188 |     ) {
189 |       gameOver = true
190 |       console.log('Game Over')
191 |       document.location.reload()
192 |     }
193 | 
194 |     // mover la pelota
195 |     x += dx
196 |     y += dy
197 |   }
198 | 
199 |   function paddleMovement() {
200 |     if (rightPressed && paddleX < canvas.width - paddleWidth) {
201 |       paddleX += PADDLE_SENSITIVITY
202 |     } else if (leftPressed && paddleX > 0) {
203 |       paddleX -= PADDLE_SENSITIVITY
204 |     }
205 |   }
206 | 
207 |   function cleanCanvas() {
208 |     ctx.clearRect(0, 0, canvas.width, canvas.height)
209 |   }
210 | 
211 |   function initEvents() {
212 |     document.addEventListener('keydown', keyDownHandler)
213 |     document.addEventListener('keyup', keyUpHandler)
214 | 
215 |     function keyDownHandler(event) {
216 |       const { key } = event
217 |       if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
218 |         rightPressed = true
219 |       } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
220 |         leftPressed = true
221 |       }
222 |     }
223 | 
224 |     function keyUpHandler(event) {
225 |       const { key } = event
226 |       if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
227 |         rightPressed = false
228 |       } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
229 |         leftPressed = false
230 |       }
231 |     }
232 |   }
233 | 
234 |   // a que velocidad de fps queremos que renderice nuestro juego
235 |   const fps = 60
236 |   
237 |   let msPrev = window.performance.now()
238 |   let msFPSPrev = window.performance.now() + 1000;
239 |   const msPerFrame = 1000 / fps
240 |   let frames = 0
241 |   let framesPerSec = fps;
242 | 
243 |   let gameOver = false;
244 | 
245 |   function draw() {
246 |     if (gameOver) return
247 |     
248 |     window.requestAnimationFrame(draw)
249 | 
250 |     const msNow = window.performance.now()
251 |     const msPassed = msNow - msPrev
252 | 
253 |     if (msPassed < msPerFrame) return
254 | 
255 |     const excessTime = msPassed % msPerFrame
256 |     msPrev = msNow - excessTime
257 | 
258 |     frames++
259 | 
260 |     if (msFPSPrev < msNow)
261 |     {
262 |       msFPSPrev = window.performance.now() + 1000
263 |       framesPerSec = frames;
264 |       frames = 0;
265 |     }
266 | 
267 |     // ... render code
268 |     cleanCanvas()
269 |     // hay que dibujar los elementos
270 |     drawBall()
271 |     drawPaddle()
272 |     drawBricks()
273 |     drawUI()
274 | 
275 |     // colisiones y movimientos
276 |     collisionDetection()
277 |     ballMovement()
278 |     paddleMovement()
279 | 
280 |   }
281 | 
282 |   draw()
283 |   initEvents()
284 | </script>


--------------------------------------------------------------------------------
/02-arkanoid-game/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/02-arkanoid-game/sprite.png


--------------------------------------------------------------------------------
/03-midu-typing-game/data.js:
--------------------------------------------------------------------------------
  1 | export const words = [
  2 |   "a",
  3 |   "again",
  4 |   "all",
  5 |   "also",
  6 |   "and",
  7 |   "another",
  8 |   "any",
  9 |   "around",
 10 |   "as",
 11 |   "ask",
 12 |   "at",
 13 |   "back",
 14 |   "because",
 15 |   "become",
 16 |   "before",
 17 |   "begin",
 18 |   "both",
 19 |   "but",
 20 |   "by",
 21 |   "call",
 22 |   "can",
 23 |   "change",
 24 |   "child",
 25 |   "come",
 26 |   "could",
 27 |   "course",
 28 |   "day",
 29 |   "develop",
 30 |   "each",
 31 |   "early",
 32 |   "end",
 33 |   "even",
 34 |   "eye",
 35 |   "face",
 36 |   "fact",
 37 |   "few",
 38 |   "first",
 39 |   "follow",
 40 |   "from",
 41 |   "general",
 42 |   "get",
 43 |   "give",
 44 |   "good",
 45 |   "govern",
 46 |   "group",
 47 |   "hand",
 48 |   "have",
 49 |   "he",
 50 |   "head",
 51 |   "help",
 52 |   "here",
 53 |   "high",
 54 |   "hold",
 55 |   "home",
 56 |   "how",
 57 |   "however",
 58 |   "if",
 59 |   "increase",
 60 |   "interest",
 61 |   "it",
 62 |   "know",
 63 |   "large",
 64 |   "last",
 65 |   "lead",
 66 |   "leave",
 67 |   "life",
 68 |   "like",
 69 |   "line",
 70 |   "little",
 71 |   "look",
 72 |   "make",
 73 |   "man",
 74 |   "may",
 75 |   "mean",
 76 |   "might",
 77 |   "more",
 78 |   "must",
 79 |   "need",
 80 |   "never",
 81 |   "new",
 82 |   "no",
 83 |   "now",
 84 |   "number",
 85 |   "of",
 86 |   "off",
 87 |   "old",
 88 |   "on",
 89 |   "one",
 90 |   "open",
 91 |   "or",
 92 |   "order",
 93 |   "out",
 94 |   "over",
 95 |   "own",
 96 |   "part",
 97 |   "people",
 98 |   "person",
 99 |   "place",
100 |   "plan",
101 |   "play",
102 |   "point",
103 |   "possible",
104 |   "present",
105 |   "problem",
106 |   "program",
107 |   "public",
108 |   "real",
109 |   "right",
110 |   "run",
111 |   "say",
112 |   "see",
113 |   "seem",
114 |   "show",
115 |   "small",
116 |   "some",
117 |   "stand",
118 |   "state",
119 |   "still",
120 |   "such",
121 |   "system",
122 |   "take",
123 |   "than",
124 |   "that",
125 |   "the",
126 |   "then",
127 |   "there",
128 |   "these",
129 |   "they",
130 |   "thing",
131 |   "think",
132 |   "this",
133 |   "those",
134 |   "time",
135 |   "to",
136 |   "under",
137 |   "up",
138 |   "use",
139 |   "very",
140 |   "way",
141 |   "what",
142 |   "when",
143 |   "where",
144 |   "while",
145 |   "will",
146 |   "with",
147 |   "without",
148 |   "work",
149 |   "world",
150 |   "would",
151 |   "write",
152 |   "you",
153 |   "she",
154 |   "set",
155 |   "we",
156 |   "long",
157 |   "in",
158 |   "many",
159 |   "do",
160 |   "after",
161 |   "which",
162 |   "so",
163 |   "same",
164 |   "other",
165 |   "house",
166 |   "during",
167 |   "much",
168 |   "just",
169 |   "consider",
170 |   "since",
171 |   "should",
172 |   "only",
173 |   "tell",
174 |   "about"
175 | ]


--------------------------------------------------------------------------------
/04-chatgpt-local/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>ChatGPT Local 100% privado, gratis y maravilloso</title>
  8 | 
  9 |   <style>
 10 |     body {
 11 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 12 |       background: #f0f0f0;
 13 |       display: grid;
 14 |       place-content: center;
 15 |       height: 100dvh;
 16 |     }
 17 | 
 18 |     main {
 19 |       width: 400px;
 20 |       max-width: 100%;
 21 |       height: 70vh;
 22 | 
 23 |       background: #fff;
 24 |       border: 1px solid #ccc;
 25 |       border-radius: 4px;
 26 |       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 27 |       padding: 8px;
 28 |       margin-bottom: 16px;
 29 | 
 30 |       overflow-y: auto;
 31 |       scroll-behavior: smooth;
 32 |     }
 33 | 
 34 |     ul {
 35 |       display: flex;
 36 |       flex-direction: column;
 37 |       list-style: none;
 38 |       padding: 0;
 39 |     }
 40 | 
 41 |     .message {
 42 |       display: flex;
 43 |       flex-direction: column;
 44 |       margin: 4px 0;
 45 |       padding: 4px 8px;
 46 | 
 47 |       span {
 48 |         width: 36px;
 49 |         height: 36px;
 50 |         background: #eee;
 51 |         font-size: 12px;
 52 |         font-weight: 500;
 53 |         display: flex;
 54 |         justify-content: center;
 55 |         align-items: center;
 56 |         border-radius: 999999px;
 57 |       }
 58 | 
 59 |       p {
 60 |         border-radius: 4px;
 61 |         padding: 4px 8px;
 62 |         margin-top: 4px;
 63 |       }
 64 | 
 65 |       &.user {
 66 |         align-self: flex-end;
 67 |         align-items: flex-end;
 68 | 
 69 |         span,
 70 |         p {
 71 |           background: rgb(219, 236, 255);
 72 |         }
 73 |       }
 74 | 
 75 |       &.bot {
 76 |         align-self: flex-start;
 77 | 
 78 |         span,
 79 |         p {
 80 |           background: rgb(198, 255, 220);
 81 |         }
 82 |       }
 83 |     }
 84 | 
 85 |     form {
 86 |       display: flex;
 87 | 
 88 |       input {
 89 |         border-radius: 999999px;
 90 |         flex-grow: 1;
 91 |         border: 0;
 92 |         padding: 8px;
 93 |         margin-right: 8px;
 94 |         border: 1px solid #ccc;
 95 |       }
 96 | 
 97 |       button {
 98 |         background: #09f;
 99 |         border: 0;
100 |         color: white;
101 |         border-radius: 6px;
102 |         cursor: pointer;
103 |         padding: 8px;
104 |         transition: background .3s ease;
105 | 
106 |         &[disabled] {
107 |           background: #ccc;
108 |           opacity: .6;
109 |           pointer-events: none;
110 |         }
111 | 
112 |         &:hover {
113 |           background: rgb(0, 104, 173);
114 |         }
115 |       }
116 |     }
117 | 
118 |     small {
119 |       font-size: 10px;
120 |       color: #555;
121 |       position: fixed;
122 |       bottom: 10px;
123 |       left: 0;
124 |       right: 0;
125 |       margin: auto;
126 |       width: 400px;
127 |     }
128 | 
129 |     .loading {
130 |       text-align: center;
131 |       display: flex;
132 |       justify-content: center;
133 |       height: 100%;
134 |       align-items: center;
135 |       flex-direction: column;
136 |       margin-top: 50%;
137 | 
138 |       i {
139 |         pointer-events: none;
140 |         width: 2.5em;
141 |         height: 2.5em;
142 |         border: 0.4em solid transparent;
143 |         border-color: #eee;
144 |         border-top-color: #3E67EC;
145 |         border-radius: 50%;
146 |         animation: loadingspin 1s linear infinite;
147 |       }
148 | 
149 |       h4 {
150 |         color: #444;
151 |         margin-bottom: 8px;
152 |       }
153 | 
154 |       h5 {
155 |         font-weight: 400;
156 |         margin: 0;
157 |         font-size: 10px;
158 |         opacity: .4;
159 |       }
160 |     }
161 | 
162 |     @keyframes loadingspin {
163 |       100% {
164 |         transform: rotate(360deg)
165 |       }
166 |     }
167 |   </style>
168 | 
169 |   <script type="module">
170 |     /* 
171 |     en el vídeo usamos "https://esm.run/@mlc-ai/web-llm"
172 |     el problema es que eso siempre es la versión más reciente
173 |     en el código usamos https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm
174 |     para fijar la versión */
175 |     import { CreateWebWorkerMLCEngine } from "https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm"
176 | 
177 |     const $ = el => document.querySelector(el)
178 | 
179 |     // pongo delante de la variable un símbolo de $
180 |     // para indicar que es un elemento del DOM
181 |     const $form = $('form')
182 |     const $input = $('input')
183 |     const $template = $('#message-template')
184 |     const $messages = $('ul')
185 |     const $container = $('main')
186 |     const $button = $('button')
187 |     const $info = $('small')
188 |     const $loading = $('.loading')
189 | 
190 |     let messages = []
191 |     let end = false
192 | 
193 |     const SELECTED_MODEL = 'Llama-3-8B-Instruct-q4f32_1-MLC-1k'
194 | 
195 |     const engine = await CreateWebWorkerMLCEngine(
196 |       new Worker('./worker.js', { type: 'module' }),
197 |       SELECTED_MODEL,
198 |       {
199 |         initProgressCallback: (info) => {
200 |           $info.textContent = info.text
201 |           if (info.progress === 1 && !end) {
202 |             end = true
203 |             $loading?.parentNode?.removeChild($loading)
204 |             $button.removeAttribute('disabled')
205 |             addMessage("¡Hola! Soy un ChatGPT que se ejecuta completamente en tu navegador. ¿En qué puedo ayudarte hoy?", 'bot')
206 |             $input.focus()
207 |           }
208 |         }
209 |       }
210 |     )
211 | 
212 |     $form.addEventListener('submit', async (event) => {
213 |       event.preventDefault()
214 |       const messageText = $input.value.trim()
215 | 
216 |       if (messageText !== '') {
217 |         // añadimos el mensaje en el DOM
218 |         $input.value = ''
219 |       }
220 | 
221 |       addMessage(messageText, 'user')
222 |       $button.setAttribute('disabled', '')
223 | 
224 |       const userMessage = {
225 |         role: 'user',
226 |         content: messageText
227 |       }
228 | 
229 |       messages.push(userMessage)
230 | 
231 |       const chunks = await engine.chat.completions.create({
232 |         messages,
233 |         stream: true
234 |       })
235 | 
236 |       let reply = ""
237 | 
238 |       const $botMessage = addMessage("", 'bot')
239 | 
240 |       for await (const chunk of chunks) {
241 |         const choice = chunk.choices[0]
242 |         const content = choice?.delta?.content ?? ""
243 |         reply += content
244 |         $botMessage.textContent = reply
245 |       }
246 | 
247 |       $button.removeAttribute('disabled')
248 |       messages.push({
249 |         role: 'assistant',
250 |         content: reply
251 |       })
252 |       $container.scrollTop = $container.scrollHeight
253 |     })
254 | 
255 |     function addMessage(text, sender) {
256 |       // clonar el template
257 |       const clonedTemplate = $template.content.cloneNode(true)
258 |       const $newMessage = clonedTemplate.querySelector('.message')
259 | 
260 |       const $who = $newMessage.querySelector('span')
261 |       const $text = $newMessage.querySelector('p')
262 | 
263 |       $text.textContent = text
264 |       $who.textContent = sender === 'bot' ? 'GPT' : 'Tú'
265 |       $newMessage.classList.add(sender)
266 | 
267 |       $messages.appendChild($newMessage)
268 | 
269 |       $container.scrollTop = $container.scrollHeight
270 | 
271 |       return $text
272 |     }
273 |   </script>
274 | </head>
275 | 
276 | <body>
277 |   <main>
278 |     <ul>
279 |       <li class="loading">
280 |         <i></i>
281 |         <h4>Cargando...</h4>
282 |         <h5>Esto puede tardar un poco. Paciencia.</h5>
283 |       </li>
284 |     </ul>
285 |   </main>
286 | 
287 |   <form>
288 |     <input placeholder="Escribe tu mensaje aquí...">
289 |     <button disabled>Enviar</button>
290 |   </form>
291 | 
292 |   <small>&nbsp;</small>
293 | 
294 |   <template id="message-template">
295 |     <li class="message">
296 |       <span></span>
297 |       <p></p>
298 |     </li>
299 |   </template>
300 | </body>
301 | 
302 | </html>
303 | 


--------------------------------------------------------------------------------
/04-chatgpt-local/worker.js:
--------------------------------------------------------------------------------
1 | import { WebWorkerMLCEngineHandler } from "https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm"
2 | 
3 | const handler = new WebWorkerMLCEngineHandler()
4 | 
5 | self.onmessage = (msg) => {
6 |   handler.onmessage(msg)
7 | }


--------------------------------------------------------------------------------
/05-api-geo-ip/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>IP Geolocation</title>
 9 |   <link rel="stylesheet" href="style.css" />
10 |   <script type="module">
11 |     const OPTIONS = {
12 |       method: 'GET',
13 |       headers: {
14 |         'X-RapidAPI-Key': 'XXX',
15 |         'X-RapidAPI-Host': 'YYY'
16 |       }
17 |     }
18 | 
19 |     const fetchIpInfo = ip => {
20 |       return fetch(`https://freeipapi.com/api/json/${ip}`, OPTIONS)
21 |         .then(res => res.json())
22 |         .catch(err => console.error(err))
23 |     }
24 | 
25 |     const $ = selector => document.querySelector(selector)
26 | 
27 |     const $form = $('#form')
28 |     const $input = $('#input')
29 |     const $submit = $('#submit')
30 |     const $results = $('#results')
31 | 
32 |     $form.addEventListener('submit', async (event) => {
33 |       event.preventDefault()
34 |       const {value} = $input
35 |       if (!value) return
36 | 
37 |       $submit.setAttribute('disabled', '')
38 |       $submit.setAttribute('aria-busy', 'true')
39 | 
40 |       const ipInfo = await fetchIpInfo(value)
41 | 
42 |       if (ipInfo) {
43 |         $results.innerHTML = JSON.stringify(ipInfo, null, 2)
44 |       }
45 | 
46 |       $submit.removeAttribute('disabled')
47 |       $submit.removeAttribute('aria-busy')
48 | 
49 |     })
50 |   </script>
51 | </head>
52 | 
53 | <body>
54 |   <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
55 | 
56 |   <main class="container">
57 |     <form id="form">
58 |       <label>
59 |         IP del usuario
60 |         <input required id="input" type="text" placeholder="Introduce aquí la IP">
61 |         <small>Por ejemplo: 54.85.132.205</small>
62 |       </label>
63 | 
64 |       <button type="submit" id="submit">
65 |         Buscar información de esta IP
66 |       </button>
67 | 
68 |     </form>
69 | 
70 |     <div>
71 |       <pre id="results"></pre>
72 |     </div>
73 |   </main>
74 | 
75 | </body>
76 | 
77 | </html>


--------------------------------------------------------------------------------
/08-excel-js/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Excel.js</title>
  8 |   <style>
  9 |     body {
 10 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 11 |     }
 12 | 
 13 |     *,
 14 |     *::before,
 15 |     *::after {
 16 |       box-sizing: border-box;
 17 |     }
 18 | 
 19 |     img {
 20 |       max-width: 20px;
 21 |       height: auto;
 22 |     }
 23 | 
 24 |     table {
 25 |       border-collapse: collapse;
 26 |     }
 27 | 
 28 |     thead,
 29 |     tr td:first-child {
 30 |       background: #eee;
 31 |     }
 32 | 
 33 |     th,
 34 |     td {
 35 |       border: 1px solid #ccc;
 36 |       font-weight: normal;
 37 |       font-size: 12px;
 38 |       text-align: center;
 39 |       width: 64px;
 40 |       height: 20px;
 41 |       vertical-align: middle;
 42 |       position: relative
 43 |     }
 44 | 
 45 |     /* td:active {
 46 |       border-radius: 2px;
 47 |       outline: 2px solid #09f;
 48 |     } */
 49 | 
 50 |     span,
 51 |     input {
 52 |       position: absolute;
 53 |       inset: 0;
 54 |       vertical-align: middle;
 55 |       display: inline-flex;
 56 |       justify-content: center;
 57 |       align-items: center;
 58 |     }
 59 | 
 60 |     input {
 61 |       border: 0;
 62 |       opacity: 0;
 63 |       pointer-events: none;
 64 |       width: 100%;
 65 |       border-radius: 2px;
 66 | 
 67 |       &:focus {
 68 |         opacity: 1;
 69 |         outline: 2px solid #09f;
 70 |       }
 71 |     }
 72 | 
 73 |     .selected {
 74 |       background: rgb(174, 223, 255);
 75 |     }
 76 | 
 77 |     th.selected {
 78 |       background: rgb(146, 211, 255);
 79 |     }
 80 |   </style>
 81 |   <script type="module">
 82 |     const $ = el => document.querySelector(el)
 83 |     const $$ = el => document.querySelectorAll(el)
 84 | 
 85 |     const $table = $('table')
 86 |     const $head = $('thead')
 87 |     const $body = $('tbody')
 88 | 
 89 |     const ROWS = 10
 90 |     const COLUMNS = 5
 91 |     const FIRST_CHAR_CODE = 65
 92 | 
 93 |     const times = length => Array.from({ length }, (_, i) => i)
 94 |     const getColumn = i => String.fromCharCode(FIRST_CHAR_CODE + i)
 95 | 
 96 |     let selectedColumn = null
 97 | 
 98 |     let STATE = times(COLUMNS)
 99 |       .map(i => times(ROWS).map(j => ({ computedValue: 0, value: 0 })))
100 | 
101 |     console.log(STATE)
102 | 
103 |     function updateCell({ x, y, value }) {
104 |       const newState = structuredClone(STATE)
105 |       const constants = generateCellsConstants(newState)
106 | 
107 |       const cell = newState[x][y]
108 | 
109 |       cell.computedValue = computeValue(value, constants) // -> span
110 |       cell.value = value // -> input
111 | 
112 |       newState[x][y] = cell
113 | 
114 |       computeAllCells(newState, generateCellsConstants(newState))
115 | 
116 |       STATE = newState
117 | 
118 |       renderSpreadSheet()
119 |     }
120 | 
121 |     function generateCellsConstants(cells) {
122 |       return cells.map((rows, x) => {
123 |         return rows.map((cell, y) => {
124 |           const letter = getColumn(x) // -> A
125 |           const cellId = `${letter}${y + 1}` // -> A1
126 |           return `const ${cellId} = ${cell.computedValue};`
127 |         }).join('\n')
128 |       }).join('\n')
129 |     }
130 | 
131 |     function computeAllCells(cells, constants) {
132 |       console.log('computeAllCells')
133 |       cells.forEach((rows, x) => {
134 |         rows.forEach((cell, y) => {
135 |           const computedValue = computeValue(cell.value, constants)
136 |           cell.computedValue = computedValue
137 |         })
138 |       })
139 |     }
140 | 
141 |     function computeValue(value, constants) {
142 |       if (typeof value === 'number') return value
143 |       if (!value.startsWith('=')) return value
144 | 
145 |       const formula = value.slice(1)
146 | 
147 |       let computedValue
148 |       try {
149 |         computedValue = eval(`(() => {
150 |         ${constants}
151 |         return ${formula};
152 |       })()`)
153 |       } catch (e) {
154 |         computedValue = `!ERROR: ${e.message}`
155 |       }
156 | 
157 |       console.log({ value, computedValue })
158 | 
159 |       return computedValue
160 |     }
161 | 
162 |     const renderSpreadSheet = () => {
163 |       const headerHTML = `<tr>
164 |           <th></th>
165 |           ${times(COLUMNS).map(i => `<th>${getColumn(i)}</th>`).join('')}
166 |         </tr>`
167 | 
168 |       $head.innerHTML = headerHTML
169 | 
170 |       const bodyHTML = times(ROWS).map(row => {
171 |         return `<tr>
172 |           <td>${row + 1}</td>
173 |           ${times(COLUMNS).map(column => `
174 |           <td data-x="${column}" data-y="${row}">
175 |             <span>${STATE[column][row].computedValue}</span>
176 |             <input type="text" value="${STATE[column][row].value}" />
177 |           </td>
178 |           `).join('')}
179 |         </tr>`
180 |       }).join('')
181 | 
182 |       $body.innerHTML = bodyHTML
183 |     }
184 | 
185 |     $body.addEventListener('click', event => {
186 |       const td = event.target.closest('td')
187 |       if (!td) return
188 | 
189 |       const { x, y } = td.dataset
190 |       const input = td.querySelector('input')
191 |       const span = td.querySelector('span')
192 | 
193 |       const end = input.value.length
194 |       input.setSelectionRange(end, end)
195 |       input.focus()
196 | 
197 |       $$('.selected').forEach(el => el.classList.remove('selected'))
198 |       selectedColumn = null
199 | 
200 |       input.addEventListener('keydown', (event) => {
201 |         if (event.key === 'Enter') input.blur()
202 |       })
203 | 
204 |       input.addEventListener('blur', () => {
205 |         console.log({ value: input.value, state: STATE[x][y].value })
206 | 
207 |         if (input.value === STATE[x][y].value) return
208 | 
209 |         updateCell({ x, y, value: input.value })
210 |       }, { once: true })
211 |     })
212 | 
213 |     $head.addEventListener('click', event => {
214 |       const th = event.target.closest('th')
215 |       if (!th) return
216 | 
217 |       const x = [...th.parentNode.children].indexOf(th)
218 |       if (x <= 0) return
219 | 
220 |       selectedColumn = x - 1
221 | 
222 |       $$('.selected').forEach(el => el.classList.remove('selected'))
223 |       th.classList.add('selected')
224 |       $$(`tr td:nth-child(${x + 1})`).forEach(el => el.classList.add('selected'))
225 |     })
226 | 
227 |     document.addEventListener('keydown', event => {
228 |       if (event.key === 'Backspace' && selectedColumn !== null) {
229 |         times(ROWS).forEach(row => {
230 |           updateCell({ x: selectedColumn, y: row, value: '' })
231 |         })
232 |         renderSpreadSheet()
233 |       }
234 |     })
235 | 
236 |     document.addEventListener('copy', event => {
237 |       if (selectedColumn !== null) {
238 |         const columnValues = times(ROWS).map(row => {
239 |           return STATE[selectedColumn][row].computedValue
240 |         })
241 | 
242 |         event.clipboardData.setData('text/plain', columnValues.join('\n'))
243 |         event.preventDefault()
244 |       }
245 |     })
246 | 
247 |     document.addEventListener('click', event => {
248 |       const { target } = event
249 | 
250 |       const isThClicked = target.closest('th')
251 |       const isTdClicked = target.closest('td')
252 | 
253 |       if (!isThClicked && !isTdClicked) {
254 |         $$('.selected').forEach(el => el.classList.remove('selected'))
255 |         selectedColumn = null
256 |       }
257 |     })
258 | 
259 |     renderSpreadSheet()
260 |   </script>
261 | </head>
262 | 
263 | <body>
264 |   <img
265 |     src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Microsoft_Excel_2013-2019_logo.svg/1200px-Microsoft_Excel_2013-2019_logo.svg.png" />
266 | 
267 |   <table>
268 |     <thead></thead>
269 |     <tbody></tbody>
270 |   </table>
271 | </body>
272 | 
273 | </html>
274 | 
275 | 
276 | <!--
277 | 
278 | - Añadir la funconalidad de filas
279 | - Haz la suma por rangos=A1:A20
280 | - Seleccionar por celas
281 | 
282 | 
283 | -->


--------------------------------------------------------------------------------
/09-paint-win-95/cursors/erase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/cursors/erase.png


--------------------------------------------------------------------------------
/09-paint-win-95/cursors/picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/cursors/picker.png


--------------------------------------------------------------------------------
/09-paint-win-95/cursors/pincel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/cursors/pincel.png


--------------------------------------------------------------------------------
/09-paint-win-95/cursors/point.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/cursors/point.png


--------------------------------------------------------------------------------
/09-paint-win-95/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icon.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/clear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/clear.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/draw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/draw.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/ellipse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/ellipse.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/erase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/erase.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/fill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/fill.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/picker.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/rectangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/rectangle.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/save.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/save.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/star.png


--------------------------------------------------------------------------------
/09-paint-win-95/icons/trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/09-paint-win-95/icons/trash.png


--------------------------------------------------------------------------------
/10-stack-game/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>10 - Stack Game</title>
  8 |   <style>
  9 |     body {
 10 |       background: #000;
 11 |       margin: 0;
 12 |       display: grid;
 13 |       place-content: center;
 14 |       height: 100vh;
 15 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 16 |     }
 17 | 
 18 |     canvas {
 19 |       border: 1px solid white;
 20 |     }
 21 | 
 22 |     span {
 23 |       color: white;
 24 |       font-size: 12px;
 25 |     }
 26 |   </style>
 27 | 
 28 |   <script type="module">
 29 |     const canvas = document.querySelector('canvas')
 30 |     const context = canvas.getContext('2d')
 31 | 
 32 |     const score = document.querySelector('#score')
 33 | 
 34 |     // CONSTANTS
 35 |     const MODES = {
 36 |       FALL: 'fall',
 37 |       BOUNCE: 'bounce',
 38 |       GAMEOVER: 'gameover'
 39 |     }
 40 |     const INITIAL_BOX_WIDTH = 200
 41 |     const INITIAL_BOX_Y = 600
 42 | 
 43 |     const BOX_HEIGHT = 50
 44 |     const INITIAL_Y_SPEED = 5
 45 |     const INITIAL_X_SPEED = 2
 46 | 
 47 |     // STATE
 48 |     let boxes = []
 49 |     let debris = { x: 0, y: 0, width: 0 }
 50 |     let scrollCounter, cameraY, current, mode, xSpeed, ySpeed
 51 | 
 52 |     function createStepColor(step) {
 53 |       if (step === 0) return 'white'
 54 | 
 55 |       const red = Math.floor(Math.random() * 255)
 56 |       const green = Math.floor(Math.random() * 255)
 57 |       const blue = Math.floor(Math.random() * 255)
 58 | 
 59 |       return `rgb(${red}, ${green}, ${blue})`
 60 |     }
 61 | 
 62 |     function updateCamera() {
 63 |       if (scrollCounter > 0) {
 64 |         cameraY++
 65 |         scrollCounter--
 66 |       }
 67 |     }
 68 | 
 69 |     function initializeGameState() {
 70 |       boxes = [{
 71 |         x: (canvas.width / 2) - (INITIAL_BOX_WIDTH / 2),
 72 |         y: 200,
 73 |         width: INITIAL_BOX_WIDTH,
 74 |         color: 'white'
 75 |       }]
 76 | 
 77 |       debris = { x: 0, y: 0, width: 0 }
 78 |       current = 1
 79 |       mode = MODES.BOUNCE
 80 |       xSpeed = INITIAL_X_SPEED
 81 |       ySpeed = INITIAL_Y_SPEED
 82 |       scrollCounter = 0
 83 |       cameraY = 0
 84 | 
 85 |       createNewBox()
 86 |     }
 87 | 
 88 |     function restart() {
 89 |       initializeGameState()
 90 |       draw()
 91 |     }
 92 | 
 93 |     function draw() {
 94 |       if (mode === MODES.GAMEOVER) return
 95 | 
 96 |       drawBackground()
 97 |       drawBoxes()
 98 |       drawDebris()
 99 | 
100 |       if (mode === MODES.BOUNCE) {
101 |         moveAndDetectCollision()
102 |       } else if (mode === MODES.FALL) {
103 |         updateFallMode()
104 |       }
105 | 
106 |       debris.y -= ySpeed
107 |       updateCamera()
108 | 
109 |       window.requestAnimationFrame(draw)
110 |     }
111 | 
112 |     function drawBackground() {
113 |       context.fillStyle = 'rgba(0, 0, 0, 0.5)'
114 |       context.fillRect(0, 0, canvas.width, canvas.height)
115 |     }
116 | 
117 |     function drawDebris() {
118 |       const { x, y, width } = debris
119 |       const newY = INITIAL_BOX_Y - y + cameraY
120 | 
121 |       context.fillStyle = 'red'
122 |       context.fillRect(x, newY, width, BOX_HEIGHT)
123 |     }
124 | 
125 |     function drawBoxes() {
126 |       boxes.forEach((box) => {
127 |         const { x, y, width, color } = box
128 |         const newY = INITIAL_BOX_Y - y + cameraY
129 | 
130 |         context.fillStyle = color
131 |         context.fillRect(x, newY, width, BOX_HEIGHT)
132 |       })
133 |     }
134 | 
135 |     function createNewBox() {
136 |       boxes[current] = {
137 |         x: 0,
138 |         y: (current + 10) * BOX_HEIGHT,
139 |         width: boxes[current - 1].width,
140 |         color: createStepColor(current)
141 |       }
142 |     }
143 | 
144 |     function createNewDebris(difference) {
145 |       const currentBox = boxes[current]
146 |       const previousBox = boxes[current - 1]
147 | 
148 |       const debrisX = currentBox.x > previousBox.x
149 |         ? currentBox.x + currentBox.width
150 |         : currentBox.x
151 | 
152 |       debris = {
153 |         x: debrisX,
154 |         y: currentBox.y,
155 |         width: difference
156 |       }
157 |     }
158 | 
159 |     function updateFallMode() {
160 |       const currentBox = boxes[current]
161 |       currentBox.y -= ySpeed
162 | 
163 |       const positionPreviousBox = boxes[current - 1].y + BOX_HEIGHT
164 | 
165 |       if (currentBox.y === positionPreviousBox) {
166 |         handleBoxLanding()
167 |       }
168 |     }
169 | 
170 |     function adjustCurrentBox(difference) {
171 |       const currentBox = boxes[current]
172 |       const previousBox = boxes[current - 1]
173 | 
174 |       if (currentBox.x > previousBox.x) {
175 |         currentBox.width -= difference
176 |       } else {
177 |         currentBox.width += difference
178 |         currentBox.x = previousBox.x
179 |       }
180 |     }
181 | 
182 |     function gameOver() {
183 |       mode = MODES.GAMEOVER
184 | 
185 |       context.fillStyle = 'rgba(255, 0, 0, 0.5)'
186 |       context.fillRect(0, 0, canvas.width, canvas.height)
187 | 
188 |       context.font = 'bold 20px Arial'
189 |       context.fillStyle = 'white'
190 |       context.textAlign = 'center'
191 |       context.fillText(
192 |         'Game Over',
193 |         canvas.width / 2,
194 |         canvas.height / 2
195 |       )
196 |     }
197 | 
198 |     function handleBoxLanding() {
199 |       const currentBox = boxes[current]
200 |       const previousBox = boxes[current - 1]
201 | 
202 |       const difference = currentBox.x - previousBox.x
203 | 
204 |       if (Math.abs(difference) >= currentBox.width) {
205 |         gameOver()
206 |         return
207 |       }
208 | 
209 |       adjustCurrentBox(difference)
210 |       createNewDebris(difference)
211 | 
212 |       xSpeed += xSpeed > 0 ? 1 : -1
213 |       current++
214 |       scrollCounter = BOX_HEIGHT
215 |       mode = MODES.BOUNCE
216 | 
217 |       score.textContent = current - 1 
218 | 
219 |       createNewBox()
220 |     }
221 | 
222 |     function moveAndDetectCollision() {
223 |       const currentBox = boxes[current]
224 |       currentBox.x += xSpeed
225 | 
226 |       const isMovingRight = xSpeed > 0
227 |       const isMovingLeft = xSpeed < 0
228 | 
229 |       const hasHitRightSide =
230 |         currentBox.x + currentBox.width > canvas.width
231 | 
232 |       const hasHitLeftSide = currentBox.x < 0
233 | 
234 |       if (
235 |         (isMovingRight && hasHitRightSide) ||
236 |         (isMovingLeft && hasHitLeftSide)
237 |       ) {
238 |         xSpeed = -xSpeed
239 |       }
240 |     }
241 | 
242 |     document.addEventListener('keydown', (event) => {
243 |       if (event.key === ' ' && mode === MODES.BOUNCE) {
244 |         mode = MODES.FALL
245 |       }
246 |     })
247 | 
248 |     canvas.onpointerdown = () => {
249 |       if (mode === MODES.GAMEOVER) {
250 |         restart()
251 |       } else if (mode === MODES.BOUNCE) {
252 |         mode = MODES.FALL
253 |       }
254 |     }
255 | 
256 |     restart()
257 |   </script>
258 | </head>
259 | 
260 | <body>
261 |   <span>Puntuación: <span id="score">0</span></span>
262 |   <canvas id="canvas" width="320" height="500"></canvas>
263 | </body>
264 | 
265 | </html>


--------------------------------------------------------------------------------
/11-js-perf-benchmark/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>11 - JS Perf Benchmark</title>
  8 |   <style>
  9 |     *,
 10 |     *::before,
 11 |     *::after {
 12 |       box-sizing: border-box;
 13 |     }
 14 | 
 15 |     body {
 16 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 17 |       background: #1e1e1e;
 18 |       color: #fff;
 19 |       margin: 0;
 20 |       padding: 16px;
 21 |       display: grid;
 22 |       place-content: center;
 23 |       min-height: 100vh;
 24 |     }
 25 | 
 26 |     .container {
 27 |       max-width: 1280px;
 28 |       margin: 0 auto;
 29 |       display: flex;
 30 |       gap: 32px;
 31 |       justify-content: center;
 32 |     }
 33 | 
 34 |     @media (max-width: 768px) {
 35 |       .container {
 36 |         flex-direction: column;
 37 |       }
 38 |     }
 39 | 
 40 |     .content {
 41 |       display: flex;
 42 |       flex-direction: column;
 43 |       gap: 16px;
 44 | 
 45 |       h2 {
 46 |         font-size: 12px;
 47 |         opacity: .5;
 48 |         font-weight: 500;
 49 |         margin: 0;
 50 |         padding: 0;
 51 |       }
 52 |     }
 53 | 
 54 |     .code {
 55 |       background: #141414;
 56 |       border-radius: 6px;
 57 |       border: 0;
 58 |       color: #d4d4d4;
 59 |       font-family: monospace;
 60 |       font-size: 12px;
 61 |       padding: 8px;
 62 |       resize: none;
 63 |       width: 100%;
 64 |       field-sizing: content;
 65 |     }
 66 | 
 67 |     .test-cases {
 68 |       display: flex;
 69 |       flex-direction: column;
 70 |       gap: 16px;
 71 |     }
 72 | 
 73 |     .test-case {
 74 |       background: #2a2a2a;
 75 |       border-radius: 6px;
 76 |       display: flex;
 77 |       flex-direction: column;
 78 | 
 79 |       header {
 80 |         display: flex;
 81 |         justify-content: space-between;
 82 |         font-size: 12px;
 83 |         padding: 8px;
 84 |         align-items: center;
 85 | 
 86 |         .test-id {
 87 |           border-radius: 50%;
 88 |           background: #141414;
 89 |           width: 20px;
 90 |           height: 20px;
 91 |           display: flex;
 92 |           justify-content: center;
 93 |           align-items: center;
 94 |           text-align: center;
 95 |           color: rgba(255, 255, 255, .7);
 96 |         }
 97 | 
 98 |         .ops {
 99 |           opacity: .5;
100 |           font-size: 9px;
101 |         }
102 |       }
103 | 
104 |       .code {
105 |         border-radius: 0 0 6px 6px;
106 |       }
107 |     }
108 | 
109 |     .send-button {
110 |       border-radius: 6px;
111 |       background: rgba(255, 255, 255, .3);
112 |       border: 0;
113 |       color: white;
114 |       cursor: pointer;
115 |       padding: 6px 12px;
116 |       transition: background .3s ease;
117 |       width: fit-content;
118 | 
119 |       &:hover {
120 |         background: rgba(255, 255, 255, .5);
121 |       }
122 |     }
123 | 
124 |     .chart-container {
125 |       display: flex;
126 |       flex-direction: column;
127 |       align-items: center;
128 |       justify-content: center;
129 | 
130 |       .chart {
131 |         width: 200px;
132 |         height: 300px;
133 |       }
134 | 
135 |       .bar {
136 |         transform: scale(1, -1);
137 |         transition: height .5s ease;
138 |       }
139 | 
140 |       .percentages {
141 |         opacity: .5;
142 |         display: flex;
143 |         font-size: 10px;
144 |         justify-content: space-between;
145 |         gap: 32px;
146 |         margin-top: 16px;
147 |       }
148 |     }
149 |   </style>
150 | 
151 |   <script type="module">
152 |     const $globalCode = document.querySelector('#global')
153 |     const $sendButton = document.querySelector('.send-button')
154 |     const $bars = document.querySelectorAll('.bar')
155 |     const $percentages = document.querySelectorAll('.percentage')
156 | 
157 |     const COLORS = ['green', 'yellow', 'orange', 'red', 'purple']
158 | 
159 |     async function runTest({ code, data }) {
160 |       const worker = new Worker('worker.js')
161 |       worker.postMessage({ code, data, duration: 1000 })
162 | 
163 |       // return new Promise(resolve => {
164 |       //   worker.onmessage = event => {
165 |       //     resolve(event.data)
166 |       //   }
167 |       // })
168 | 
169 |       const { resolve, promise } = Promise.withResolvers()
170 |       worker.onmessage = event => { resolve(event.data) }
171 |       return promise
172 |     }
173 | 
174 |     async function runTestCases() {
175 |       const $testCases = document.querySelectorAll('.test-case')
176 | 
177 |       $bars.forEach(bar => bar.setAttribute('height', 0))
178 |       $percentages.forEach(percentage => percentage.textContent = '')
179 | 
180 |       const globalCode = $globalCode.value
181 | 
182 |       const promises = Array.from($testCases).map(async (testCase, index) => {
183 |         const $code = testCase.querySelector('.code')
184 |         const $ops = testCase.querySelector('.ops')
185 | 
186 |         const codeValue = $code.value
187 |         $ops.textContent = 'Loading...'
188 | 
189 |         const result = await runTest({ code: codeValue, data: globalCode })
190 | 
191 |         $ops.textContent = `${result.toLocaleString()} ops/s`
192 | 
193 |         return result
194 |       })
195 | 
196 |       const results = await Promise.all(promises)
197 | 
198 |       const maxOps = Math.max(...results)
199 | 
200 |       const sortedResults = results
201 |         .map((result, index) => ({ result, index }))
202 |         .sort((a, b) => b.result - a.result)
203 | 
204 |       console.log({ sortedResults })
205 | 
206 |       results.forEach((result, index) => {
207 |         const bar = $bars[index]
208 |         const percentage = $percentages[index]
209 | 
210 |         const indexColor = sortedResults.findIndex(x => x.index === index)
211 |         const color = COLORS[indexColor]
212 | 
213 |         const height = result / maxOps * 300 // 300 is the height of the chart
214 |         bar.setAttribute('height', height)
215 |         bar.setAttribute('fill', color)
216 | 
217 |         const percentageValue = Math.round(result / maxOps * 100)
218 |         percentage.textContent = `${percentageValue}%`
219 |       })
220 |     }
221 | 
222 |     // run test cases on init
223 |     runTestCases()
224 | 
225 |     $sendButton.addEventListener('click', () => {
226 |       runTestCases()
227 |     })
228 |   </script>
229 | </head>
230 | 
231 | <body>
232 |   <main class="container">
233 |     <div class="content">
234 |       <h2>Global</h2>
235 | 
236 |       <textarea id="global" class="code" rows="1">const data = [...Array(1000).keys()]</textarea>
237 | 
238 |       <h2>Test cases</h2>
239 |       <div class="test-cases">
240 |         <article class="test-case">
241 |           <header>
242 |             <span class="test-id">1</span>
243 |             <span class="ops"></span>
244 |           </header>
245 | 
246 |           <textarea class="code" rows="1">data.find(x => x == 100)</textarea>
247 |         </article>
248 | 
249 |         <article class="test-case">
250 |           <header>
251 |             <span class="test-id">2</span>
252 |             <span class="ops"></span>
253 |           </header>
254 | 
255 |           <textarea class="code" rows="1">data.find(x => x == 200)</textarea>
256 |         </article>
257 | 
258 |         <article class="test-case">
259 |           <header>
260 |             <span class="test-id">3</span>
261 |             <span class="ops"></span>
262 |           </header>
263 | 
264 |           <textarea class="code" rows="1">data.find(x => x == 400)</textarea>
265 |         </article>
266 | 
267 |         <article class="test-case">
268 |           <header>
269 |             <span class="test-id">4</span>
270 |             <span class="ops"></span>
271 |           </header>
272 | 
273 |           <textarea class="code" rows="1">data.find(x => x == 800)</textarea>
274 |         </article>
275 |       </div>
276 | 
277 |       <button class="send-button">Benchmark code! 🚀</button>
278 | 
279 |     </div>
280 |     <aside class="chart-container">
281 |       <svg class="chart" viewBox="0 0 200 300">
282 |         <rect class="bar" x="20" y="-300" width="2" height="300" fill="green"></rect>
283 |         <rect class="bar" x="70" y="-300" width="2" height="50" fill="yellow"></rect>
284 |         <rect class="bar" x="120" y="-300" width="2" height="80" fill="orange"></rect>
285 |         <rect class="bar" x="170" y="-300" width="2" height="100" fill="red"></rect>
286 |       </svg>
287 | 
288 |       <div class="percentages">
289 |         <span class="percentage">100%</span>
290 |         <span class="percentage">40%</span>
291 |         <span class="percentage">60%</span>
292 |         <span class="percentage">80%</span>
293 |       </div>
294 |     </aside>
295 |   </main>
296 | </body>
297 | 
298 | </html>


--------------------------------------------------------------------------------
/11-js-perf-benchmark/worker.js:
--------------------------------------------------------------------------------
 1 | onmessage = async event => {
 2 |   const { code, data, duration } = event.data
 3 | 
 4 |   let result
 5 |   try {
 6 |     result = await eval(`(async () => {
 7 |       let PERF__ops = 0; 
 8 |       let PERF__start = Date.now();
 9 |       let PERF__end = Date.now() + ${duration};
10 |       ${data};
11 | 
12 |       while (Date.now() < PERF__end) {
13 |         ${code};
14 |         PERF__ops++;
15 |       }
16 |       return PERF__ops
17 |   })()`)
18 |   } catch (error) {
19 |     console.log(error)
20 |     result = 0
21 |   }
22 | 
23 |   postMessage(result)
24 | }


--------------------------------------------------------------------------------
/12-moto-scroll/frames/0.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/0.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-001.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-001.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-002.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-002.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-003.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-003.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-004.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-004.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-005.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-005.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-006.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-006.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-007.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-007.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-008.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-008.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-009.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-009.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-010.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-010.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-011.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-011.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-012.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-012.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-013.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-013.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-014.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-014.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-015.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-015.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-016.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-016.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-017.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-017.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-018.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-018.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-019.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-019.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-020.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-020.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-021.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-021.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-022.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-022.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-023.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-023.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-024.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-024.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-025.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-025.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-026.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-026.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-027.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-027.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-028.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-028.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-029.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-029.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-030.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-030.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-031.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-031.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-032.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-032.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-033.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-033.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-034.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-034.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-035.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-035.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-036.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-036.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-037.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-037.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-038.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-038.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-039.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-039.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-040.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-040.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-041.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-041.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-042.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-042.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-043.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-043.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-044.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-044.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-045.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-045.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-046.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-046.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-047.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-047.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-048.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-048.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-049.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-049.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-050.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-050.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-051.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-051.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-052.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-052.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-053.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-053.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-054.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-054.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-055.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-055.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-056.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-056.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-057.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-057.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-058.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-058.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-059.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-059.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-060.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-060.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-061.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-061.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-062.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-062.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-063.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-063.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-064.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-064.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-065.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-065.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-066.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-066.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-067.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-067.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-068.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-068.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-069.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-069.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-070.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-070.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-071.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-071.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-072.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-072.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-073.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-073.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-074.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-074.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-075.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-075.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-076.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-076.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-077.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-077.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-078.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-078.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-079.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-079.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-080.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-080.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-081.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-081.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-082.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-082.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-083.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-083.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-084.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-084.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-085.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-085.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-086.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-086.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-087.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-087.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-088.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-088.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-089.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-089.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-090.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-090.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-091.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-091.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-092.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-092.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-093.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-093.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-094.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-094.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-095.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-095.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-096.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-096.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-097.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-097.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-098.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-098.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-099.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-099.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-100.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-100.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-101.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-101.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-102.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-102.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-103.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-103.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-104.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-104.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-105.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-105.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-106.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-106.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-107.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-107.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-108.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-108.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-109.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-109.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-110.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-110.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-111.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-111.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-112.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-112.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-113.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-113.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-114.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-114.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-115.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-115.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-116.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-116.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-117.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-117.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-118.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-118.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-119.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-119.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-120.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-120.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-121.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-121.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-122.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-122.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-123.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-123.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-124.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-124.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-125.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-125.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-126.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-126.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-127.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-127.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-128.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-128.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-129.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-129.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-130.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-130.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-131.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-131.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-132.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-132.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-133.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-133.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-134.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-134.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-135.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-135.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-136.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-136.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-137.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-137.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-138.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-138.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-139.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-139.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-140.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-140.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-141.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-141.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-142.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-142.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-143.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-143.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-144.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-144.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-145.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-145.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-146.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-146.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-147.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-147.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-148.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-148.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-149.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-149.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-150.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-150.webp


--------------------------------------------------------------------------------
/12-moto-scroll/frames/moto-151.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/frames/moto-151.webp


--------------------------------------------------------------------------------
/12-moto-scroll/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>🏍️ Moto Scroll</title>
  8 |   <style>
  9 |     *,
 10 |     *::before,
 11 |     *::after {
 12 |       box-sizing: border-box;
 13 |     }
 14 | 
 15 |     body {
 16 |       margin: 0;
 17 |     }
 18 | 
 19 |     img {
 20 |       width: 100vw;
 21 |       height: 100dvh;
 22 |       object-fit: cover;
 23 |       position: fixed;
 24 |     }
 25 | 
 26 |     main {
 27 |       height: 300dvh;
 28 |     }
 29 | 
 30 |     header {
 31 |       background: linear-gradient(40deg, #ba3816, #a41705 40%);
 32 |       width: 300px;
 33 |       height: 300px;
 34 |       border-radius: 1000px;
 35 |       position: absolute;
 36 |       top: 0;
 37 |       left: 50%;
 38 |       transform: translateX(-50%);
 39 |       z-index: 1;
 40 |       margin-top: -230px;
 41 |       display: flex;
 42 |       align-items: flex-end;
 43 |       justify-content: center;
 44 |       animation: slideInDown 1500ms ease-out;
 45 | 
 46 |       img {
 47 |         width: 130px;
 48 |         margin: 0 auto;
 49 |         height: auto;
 50 |         margin-bottom: 30px;
 51 |       }
 52 |     }
 53 | 
 54 |     @keyframes slideInDown {
 55 |       from {
 56 |         transform: translate3d(-50%, -100%, 0);
 57 |         opacity: 0;
 58 |       }
 59 | 
 60 |       to {
 61 |         transform: translate3d(-50%, 0, 0);
 62 |         opacity: 1;
 63 |       }
 64 |     }
 65 |   </style>
 66 | 
 67 |   <script type="module">
 68 |     import { images } from './images.js'
 69 | 
 70 |     const main = document.querySelector('main')
 71 |     const MAX_FRAMES = 151
 72 |     let currentFrame = 0
 73 | 
 74 |     function updateImage(frame = 0) {
 75 |       const src = images[frame].p
 76 |       img.src = src
 77 |     }
 78 | 
 79 |     // init with the first image
 80 |     const img = document.createElement('img')
 81 |     // append img to main
 82 |     main.appendChild(img)
 83 |     updateImage(currentFrame)
 84 | 
 85 |     // Altura máxima del scroll
 86 |     let maxScroll = document.documentElement.scrollHeight - window.innerHeight;
 87 | 
 88 |     window.addEventListener('resize', () => {
 89 |       maxScroll = document.documentElement.scrollHeight - window.innerHeight;
 90 |     });
 91 | 
 92 |     let lastFrameUpdate = 0
 93 | 
 94 |     window.addEventListener('scroll', () => {
 95 |       if (Date.now() - lastFrameUpdate < 1) return true
 96 |       // Actualizamos el contador
 97 |       lastFrameUpdate = Date.now()
 98 |       // Posición actual del scroll
 99 |       const scrollPosition = window.scrollY
100 |       // Calcular el porcentaje del scroll
101 |       const scrollFraction = scrollPosition / maxScroll;
102 |       // ¿Qué frame le toca?
103 |       const frame = Math.floor(scrollFraction * MAX_FRAMES)
104 |       // nos evitemos algo de trabajo cuando
105 |       // al hacer scroll, el frame que le toca es el mismo
106 |       // que ya tenía
107 |       if (currentFrame !== frame) {
108 |         // creamos el id del nombre del archivo
109 |         updateImage(frame)
110 |         currentFrame = frame
111 |       }
112 |     });
113 |   </script>
114 | </head>
115 | 
116 | <body>
117 |   <main>
118 |     <header>
119 |       <img src="logo.png" alt="Ichiban - Your Way to Freedom" />
120 |     </header>
121 |   </main>
122 | </body>
123 | 
124 | </html>


--------------------------------------------------------------------------------
/12-moto-scroll/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/12-moto-scroll/logo.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <div align="center">
  2 |     <a href="https://www.javascript100.dev">
  3 |     <img src="./web/public/readme.jpg" /> 
  4 |     </a>
  5 |   <h3>
  6 |     <strong>100 proyectos de JavaScript con código y vídeos</strong>
  7 |   </h3>
  8 | </div>
  9 | 
 10 | <div align="center">
 11 |     <a href="https://www.javascript100.dev">
 12 |         Website
 13 |     </a>
 14 |     <span>&nbsp;❖&nbsp;</span>
 15 |     <a href="#-proyectos">
 16 |         Proyectos
 17 |     </a>
 18 |     <span>&nbsp;❖&nbsp;</span>
 19 |     <a href="#-contribuir">
 20 |         Contribuir
 21 |     </a>
 22 |     <span>&nbsp;❖&nbsp;</span>
 23 |     <a href="https://www.youtube.com/c/midudev">
 24 |         YouTube
 25 |     </a>
 26 |     <span>&nbsp;❖&nbsp;</span>
 27 |     <a href="https://twitter.com/midudev">
 28 |         Twitter
 29 |     </a>
 30 |     <span>&nbsp;❖&nbsp;</span>
 31 |     <a href="https://twitch.tv/midudev">
 32 |         Twitch
 33 |     </a>
 34 | </div>
 35 | 
 36 | <p></p>
 37 | 
 38 | <div align="center">
 39 | 
 40 | ![JavaScript Badge](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000&style=flat)
 41 | ![GitHub stars](https://img.shields.io/github/stars/midudev/javascript-100-proyectos)
 42 | ![GitHub issues](https://img.shields.io/github/issues/midudev/javascript-100-proyectos)
 43 | ![GitHub forks](https://img.shields.io/github/forks/midudev/javascript-100-proyectos)
 44 | ![GitHub PRs](https://img.shields.io/github/issues-pr/midudev/javascript-100-proyectos)
 45 | ![Astro Badge](https://img.shields.io/badge/Astro-BC52EE?logo=astro&logoColor=fff&style=flat)
 46 | 
 47 | </div>
 48 | 
 49 | ## ✨ Proyectos
 50 | 
 51 | |  #   | Proyecto         | Descripción                                                              | Código                                                                                                                                                                                   | Website                                                       |
 52 | | --- | ---------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
 53 | | 1   | **tinder-swipe** | Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript. | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/01-tinder-swipe) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/01-tinder-swipe) |
 54 | | 2   | **arkanoid-game** | Juego mítico y clásico de Arkanoid para controlar con teclado. | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/02-arkanoid-game) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/02-arkanoid-game) |
 55 | | 3   | **mecanografía** | Pon a prueba a qué velocidad tecleas | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/03-midu-typing-game) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/03-midu-typing-game) |
 56 | | 4   | **chatgpt-local** | Creamos un ChatGPT que se ejecuta en tu navegador. 100% privado y gratuito | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/04-chatgpt-local) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/04-chatgpt-local) |
 57 | | 5   | **buscar-info-IP** | Llama a una api para obtener información de cualquier IP | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/05-api-geo-ip) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/05-api-geo-ip) |
 58 | | 6   | **tetris-canvas** | Creamos el famoso juego tetris como desafío de una prueba técnica | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/06-tetris-canvas) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/06-tetris-canvas) |
 59 | | 7   | **tier-maker** | Arrastra imágenes de cosas y ponlas en el nivel que creas | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/07-tier-maker) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/07-tier-maker) |
 60 | | 8   | **excel-js** | Creamos una hoja de SpreadSheets editable | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/08-excel-js) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/08-excel-js) |
 61 | | 9   | **paint-win-95** | El clásico editor de imágenes de Windows | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/09-paint-win-95) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/09-paint-win-95) |
 62 | | 10   | **stack-game** | Stack Game en 2D | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/10-stack-game) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/10-stack-game) |
 63 | | 11   | **js-perf-benchmark** | Benchmark con JS | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/11-js-perf-benchmark) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/11-js-perf-benchmark) |
 64 | | 12   | **moto-scroll** | Animación de fondo por scroll | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/12-moto-scroll) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/12-moto-scroll) |
 65 | 
 66 | ## 🚀 Contribuir
 67 | 
 68 | ### **Introducción**
 69 | 
 70 | 1. Para contribuir, crea un [Fork](https://github.com/midudev/javascript-100-proyectos/fork) del proyecto.
 71 | 
 72 | 2. Clona el repositorio en tu máquina local:
 73 | 
 74 | ```bash
 75 | git clone git@github.com:tu_username/javascript-100-proyectos.git
 76 | ```
 77 | 
 78 | ### **Proyectos**
 79 | 
 80 | 1. Accede a la carpeta del proyecto que quieras:
 81 | 
 82 | ```bash
 83 | cd 01-tinder-swipe
 84 | ```
 85 | 
 86 | 2. Instala la extensión [**Live Preview**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) en Visual Studio Code.
 87 | 
 88 | 3. Presiona `F1` y selecciona `Live Preview: Start Server`.
 89 | 
 90 | Realiza los cambios y crea una pull request 🚀.
 91 | 
 92 | ### **Sitio web**
 93 | 
 94 | - Para contribuir al sitio web es necesario tener [Node.js +18](https://nodejs.org/) instalado y [pnpm](https://pnpm.io/):
 95 | 
 96 | ```bash
 97 | npm install -g pnpm
 98 | ```
 99 | 
100 | 1. Instala las dependencias:
101 | 
102 | ```bash
103 | cd web
104 | pnpm install
105 | ```
106 | 
107 | 2. Inicia el servidor de desarrollo:
108 | 
109 | ```bash
110 | pnpm dev
111 | ```
112 | 
113 | Realiza los cambios y crea una pull request 🚀.
114 | 
115 | ## 🛠️ Stack
116 | 
117 | **Proyectos**:
118 | 
119 | - HTML, CSS & Javascript.
120 | 
121 | **Website**:
122 | 
123 | - [**Astro**](https://astro.build/) - The web framework for content-driven websites.
124 | - [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.
125 | - [**Tailwind CSS**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
126 | - [**@midudev/tailwind-animations**](https://tailwindcss-animations.vercel.app) - Easy peasy animations for your Tailwind project.
127 | 
128 | ## 👑 Contribuidores
129 | 
130 | <a href="https://github.com/midudev/javascript-100-proyectos/graphs/contributors">
131 |   <img src="https://contrib.rocks/image?repo=midudev/javascript-100-proyectos" />
132 | </a>
133 | 


--------------------------------------------------------------------------------
/web/.astro/content-assets.mjs:
--------------------------------------------------------------------------------
1 | export default new Map();


--------------------------------------------------------------------------------
/web/.astro/content-modules.mjs:
--------------------------------------------------------------------------------
1 | export default new Map();


--------------------------------------------------------------------------------
/web/.astro/content.d.ts:
--------------------------------------------------------------------------------
  1 | declare module 'astro:content' {
  2 | 	export interface RenderResult {
  3 | 		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
  4 | 		headings: import('astro').MarkdownHeading[];
  5 | 		remarkPluginFrontmatter: Record<string, any>;
  6 | 	}
  7 | 	interface Render {
  8 | 		'.md': Promise<RenderResult>;
  9 | 	}
 10 | 
 11 | 	export interface RenderedContent {
 12 | 		html: string;
 13 | 		metadata?: {
 14 | 			imagePaths: Array<string>;
 15 | 			[key: string]: unknown;
 16 | 		};
 17 | 	}
 18 | }
 19 | 
 20 | declare module 'astro:content' {
 21 | 	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
 22 | 
 23 | 	export type CollectionKey = keyof AnyEntryMap;
 24 | 	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
 25 | 
 26 | 	export type ContentCollectionKey = keyof ContentEntryMap;
 27 | 	export type DataCollectionKey = keyof DataEntryMap;
 28 | 
 29 | 	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
 30 | 	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
 31 | 		ContentEntryMap[C]
 32 | 	>['slug'];
 33 | 
 34 | 	/** @deprecated Use `getEntry` instead. */
 35 | 	export function getEntryBySlug<
 36 | 		C extends keyof ContentEntryMap,
 37 | 		E extends ValidContentEntrySlug<C> | (string & {}),
 38 | 	>(
 39 | 		collection: C,
 40 | 		// Note that this has to accept a regular string too, for SSR
 41 | 		entrySlug: E,
 42 | 	): E extends ValidContentEntrySlug<C>
 43 | 		? Promise<CollectionEntry<C>>
 44 | 		: Promise<CollectionEntry<C> | undefined>;
 45 | 
 46 | 	/** @deprecated Use `getEntry` instead. */
 47 | 	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
 48 | 		collection: C,
 49 | 		entryId: E,
 50 | 	): Promise<CollectionEntry<C>>;
 51 | 
 52 | 	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
 53 | 		collection: C,
 54 | 		filter?: (entry: CollectionEntry<C>) => entry is E,
 55 | 	): Promise<E[]>;
 56 | 	export function getCollection<C extends keyof AnyEntryMap>(
 57 | 		collection: C,
 58 | 		filter?: (entry: CollectionEntry<C>) => unknown,
 59 | 	): Promise<CollectionEntry<C>[]>;
 60 | 
 61 | 	export function getEntry<
 62 | 		C extends keyof ContentEntryMap,
 63 | 		E extends ValidContentEntrySlug<C> | (string & {}),
 64 | 	>(entry: {
 65 | 		collection: C;
 66 | 		slug: E;
 67 | 	}): E extends ValidContentEntrySlug<C>
 68 | 		? Promise<CollectionEntry<C>>
 69 | 		: Promise<CollectionEntry<C> | undefined>;
 70 | 	export function getEntry<
 71 | 		C extends keyof DataEntryMap,
 72 | 		E extends keyof DataEntryMap[C] | (string & {}),
 73 | 	>(entry: {
 74 | 		collection: C;
 75 | 		id: E;
 76 | 	}): E extends keyof DataEntryMap[C]
 77 | 		? Promise<DataEntryMap[C][E]>
 78 | 		: Promise<CollectionEntry<C> | undefined>;
 79 | 	export function getEntry<
 80 | 		C extends keyof ContentEntryMap,
 81 | 		E extends ValidContentEntrySlug<C> | (string & {}),
 82 | 	>(
 83 | 		collection: C,
 84 | 		slug: E,
 85 | 	): E extends ValidContentEntrySlug<C>
 86 | 		? Promise<CollectionEntry<C>>
 87 | 		: Promise<CollectionEntry<C> | undefined>;
 88 | 	export function getEntry<
 89 | 		C extends keyof DataEntryMap,
 90 | 		E extends keyof DataEntryMap[C] | (string & {}),
 91 | 	>(
 92 | 		collection: C,
 93 | 		id: E,
 94 | 	): E extends keyof DataEntryMap[C]
 95 | 		? string extends keyof DataEntryMap[C]
 96 | 			? Promise<DataEntryMap[C][E]> | undefined
 97 | 			: Promise<DataEntryMap[C][E]>
 98 | 		: Promise<CollectionEntry<C> | undefined>;
 99 | 
100 | 	/** Resolve an array of entry references from the same collection */
101 | 	export function getEntries<C extends keyof ContentEntryMap>(
102 | 		entries: {
103 | 			collection: C;
104 | 			slug: ValidContentEntrySlug<C>;
105 | 		}[],
106 | 	): Promise<CollectionEntry<C>[]>;
107 | 	export function getEntries<C extends keyof DataEntryMap>(
108 | 		entries: {
109 | 			collection: C;
110 | 			id: keyof DataEntryMap[C];
111 | 		}[],
112 | 	): Promise<CollectionEntry<C>[]>;
113 | 
114 | 	export function render<C extends keyof AnyEntryMap>(
115 | 		entry: AnyEntryMap[C][string],
116 | 	): Promise<RenderResult>;
117 | 
118 | 	export function reference<C extends keyof AnyEntryMap>(
119 | 		collection: C,
120 | 	): import('astro/zod').ZodEffects<
121 | 		import('astro/zod').ZodString,
122 | 		C extends keyof ContentEntryMap
123 | 			? {
124 | 					collection: C;
125 | 					slug: ValidContentEntrySlug<C>;
126 | 				}
127 | 			: {
128 | 					collection: C;
129 | 					id: keyof DataEntryMap[C];
130 | 				}
131 | 	>;
132 | 	// Allow generic `string` to avoid excessive type errors in the config
133 | 	// if `dev` is not running to update as you edit.
134 | 	// Invalid collection names will be caught at build time.
135 | 	export function reference<C extends string>(
136 | 		collection: C,
137 | 	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
138 | 
139 | 	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
140 | 	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
141 | 		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
142 | 	>;
143 | 
144 | 	type ContentEntryMap = {
145 | 		
146 | 	};
147 | 
148 | 	type DataEntryMap = {
149 | 		
150 | 	};
151 | 
152 | 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
153 | 
154 | 	export type ContentConfig = typeof import("../src/content.config.mjs");
155 | }
156 | 


--------------------------------------------------------------------------------
/web/.astro/data-store.json:
--------------------------------------------------------------------------------
1 | [["Map",1,2],"meta::meta",["Map",3,4],"astro-version","5.0.5"]


--------------------------------------------------------------------------------
/web/.astro/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"_variables": {
3 | 		"lastUpdateCheck": 1733944381251
4 | 	}
5 | }


--------------------------------------------------------------------------------
/web/.astro/types.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | /// <reference path="content.d.ts" />


--------------------------------------------------------------------------------
/web/README.md:
--------------------------------------------------------------------------------
 1 | # Astro Starter Kit: Basics
 2 | 
 3 | ```sh
 4 | npm create astro@latest -- --template basics
 5 | ```
 6 | 
 7 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
 8 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
 9 | [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
10 | 
11 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
12 | 
13 | ![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
14 | 
15 | ## 🚀 Project Structure
16 | 
17 | Inside of your Astro project, you'll see the following folders and files:
18 | 
19 | ```text
20 | /
21 | ├── public/
22 | │   └── favicon.svg
23 | ├── src/
24 | │   ├── components/
25 | │   │   └── Card.astro
26 | │   ├── layouts/
27 | │   │   └── Layout.astro
28 | │   └── pages/
29 | │       └── index.astro
30 | └── package.json
31 | ```
32 | 
33 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
34 | 
35 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
36 | 
37 | Any static assets, like images, can be placed in the `public/` directory.
38 | 
39 | ## 🧞 Commands
40 | 
41 | All commands are run from the root of the project, from a terminal:
42 | 
43 | | Command                   | Action                                           |
44 | | :------------------------ | :----------------------------------------------- |
45 | | `npm install`             | Installs dependencies                            |
46 | | `npm run dev`             | Starts local dev server at `localhost:4321`      |
47 | | `npm run build`           | Build your production site to `./dist/`          |
48 | | `npm run preview`         | Preview your build locally, before deploying     |
49 | | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
50 | | `npm run astro -- --help` | Get help using the Astro CLI                     |
51 | 
52 | ## 👀 Want to learn more?
53 | 
54 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
55 | 


--------------------------------------------------------------------------------
/web/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'astro/config';
2 | 
3 | import tailwind from "@astrojs/tailwind";
4 | 
5 | // https://astro.build/config
6 | export default defineConfig({
7 |   integrations: [tailwind()]
8 | });


--------------------------------------------------------------------------------
/web/bun.lockb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/bun.lockb


--------------------------------------------------------------------------------
/web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "js-100-web",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "prepare": "node ./scripts/copy-projects.js",
 7 |     "dev": "astro dev",
 8 |     "start": "astro dev",
 9 |     "build": "astro check && astro build",
10 |     "preview": "astro preview",
11 |     "astro": "astro"
12 |   },
13 |   "dependencies": {
14 |     "@astrojs/check": "0.9.4",
15 |     "@astrojs/tailwind": "5.1.3",
16 |     "@midudev/tailwind-animations": "0.1.0",
17 |     "astro": "5.0.5",
18 |     "tailwindcss": "3.4.16",
19 |     "typescript": "5.7.2"
20 |   }
21 | }


--------------------------------------------------------------------------------
/web/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg
 2 |         class="rounded"
 3 |         width="128"
 4 |         height="128"
 5 |         xmlns="http://www.w3.org/2000/svg"
 6 |         viewBox="0 0 630 630"
 7 |       >
 8 |         <rect width="630" height="630" fill="#f7df1e"></rect>
 9 |         <path
10 |           d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"
11 |         ></path>
12 |       </svg>


--------------------------------------------------------------------------------
/web/public/me-blue.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/me-blue.webp


--------------------------------------------------------------------------------
/web/public/me.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/me.webp


--------------------------------------------------------------------------------
/web/public/og.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/og.jpg


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/iphone.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/01-tinder-swipe/iphone.webp


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/photos/1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/01-tinder-swipe/photos/1.webp


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/photos/2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/01-tinder-swipe/photos/2.webp


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/tinder-icons.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/01-tinder-swipe/tinder-icons.webp


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/tinder-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/01-tinder-swipe/tinder-logo.webp


--------------------------------------------------------------------------------
/web/public/projects/01.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/01.webp


--------------------------------------------------------------------------------
/web/public/projects/02-arkanoid-game/bkg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/02-arkanoid-game/bkg.png


--------------------------------------------------------------------------------
/web/public/projects/02-arkanoid-game/bricks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/02-arkanoid-game/bricks.png


--------------------------------------------------------------------------------
/web/public/projects/02-arkanoid-game/index.html:
--------------------------------------------------------------------------------
  1 | <title>Arkanoid en JavaScript</title>
  2 | <style>
  3 |   body {
  4 |     background-color: #f0f0f0;
  5 |     display: grid;
  6 |     place-content: center;
  7 |   }
  8 | 
  9 |   canvas {
 10 |     border: 4px solid #000;
 11 |     border-bottom: transparent;
 12 |     background: url('./bkg.png') repeat;
 13 |     margin: 0 auto;
 14 |     display: block;
 15 |     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
 16 |   }
 17 | </style>
 18 | 
 19 | <canvas></canvas>
 20 | 
 21 | <img hidden id="sprite" src="./sprite.png" alt="Sprite Arkanoid" />
 22 | <img hidden id="bricks" src="./bricks.png" alt="Sprite Bricks Arkanoid" />
 23 | 
 24 | <script>
 25 |   const canvas = document.querySelector('canvas')
 26 |   const ctx = canvas.getContext('2d')
 27 | 
 28 |   const $sprite = document.querySelector('#sprite')
 29 |   const $bricks = document.querySelector('#bricks')
 30 | 
 31 |   canvas.width = 448
 32 |   canvas.height = 400
 33 | 
 34 |   /* Variables de nuestro juego */
 35 | 
 36 |   /* VARIABLES DE LA PELOTA */
 37 |   const ballRadius = 3;
 38 |   // posicion de la pelota
 39 |   let x = canvas.width / 2
 40 |   let y = canvas.height - 30
 41 |   // velocidad de la pelota
 42 |   let dx = -3
 43 |   let dy = -3
 44 | 
 45 |   /* VARIABLES DE LA PALETA */
 46 |   const PADDLE_SENSITIVITY = 8
 47 | 
 48 |   const paddleHeight = 10;
 49 |   const paddleWidth = 50;
 50 | 
 51 |   let paddleX = (canvas.width - paddleWidth) / 2
 52 |   let paddleY = canvas.height - paddleHeight - 10
 53 | 
 54 |   let rightPressed = false
 55 |   let leftPressed = false
 56 | 
 57 |   /* VARIABLES DE LOS LADRILLOS */
 58 |   const brickRowCount = 6;
 59 |   const brickColumnCount = 13;
 60 |   const brickWidth = 32;
 61 |   const brickHeight = 16;
 62 |   const brickPadding = 0;
 63 |   const brickOffsetTop = 80;
 64 |   const brickOffsetLeft = 16;
 65 |   const bricks = [];
 66 | 
 67 |   const BRICK_STATUS = {
 68 |     ACTIVE: 1,
 69 |     DESTROYED: 0
 70 |   }
 71 | 
 72 |   for (let c = 0; c < brickColumnCount; c++) {
 73 |     bricks[c] = [] // inicializamos con un array vacio
 74 |     for (let r = 0; r < brickRowCount; r++) {
 75 |       // calculamos la posicion del ladrillo en la pantalla
 76 |       const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft
 77 |       const brickY = r * (brickHeight + brickPadding) + brickOffsetTop
 78 |       // Asignar un color aleatorio a cada ladrillo
 79 |       const random = Math.floor(Math.random() * 8)
 80 |       // Guardamos la información de cada ladrillo
 81 |       bricks[c][r] = {
 82 |         x: brickX,
 83 |         y: brickY,
 84 |         status: BRICK_STATUS.ACTIVE,
 85 |         color: random
 86 |       }
 87 |     }
 88 |   }
 89 | 
 90 | 
 91 |   function drawBall() {
 92 |     ctx.beginPath() // iniciar el trazado
 93 |     ctx.arc(x, y, ballRadius, 0, Math.PI * 2)
 94 |     ctx.fillStyle = '#fff'
 95 |     ctx.fill()
 96 |     ctx.closePath() // terminar el trazado
 97 |   }
 98 | 
 99 |   function drawPaddle() {
100 |     ctx.drawImage(
101 |       $sprite, // imagen
102 |       29, // clipX: coordenadas de recorte
103 |       174, // clipY: coordenadas de recorte
104 |       paddleWidth, // el tamaño del recorte
105 |       paddleHeight, // tamaño del recorte
106 |       paddleX, // posición X del dibujo
107 |       paddleY, // posición Y del dibujo
108 |       paddleWidth, // ancho del dibujo
109 |       paddleHeight // alto del dibujo
110 |     )
111 |   }
112 | 
113 |   function drawBricks() {
114 |     for (let c = 0; c < brickColumnCount; c++) {
115 |       for (let r = 0; r < brickRowCount; r++) {
116 |         const currentBrick = bricks[c][r]
117 |         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
118 | 
119 |         const clipX = currentBrick.color * 32
120 | 
121 |         ctx.drawImage(
122 |           $bricks,
123 |           clipX,
124 |           0,
125 |           brickWidth, // 31
126 |           brickHeight, // 14
127 |           currentBrick.x,
128 |           currentBrick.y,
129 |           brickWidth,
130 |           brickHeight
131 |         )
132 |       }
133 |     }
134 |   }
135 | 
136 |   function drawUI() {
137 |     ctx.fillText(`FPS: ${framesPerSec}`, 5, 10)
138 |   }
139 | 
140 |   function collisionDetection() {
141 |     for (let c = 0; c < brickColumnCount; c++) {
142 |       for (let r = 0; r < brickRowCount; r++) {
143 |         const currentBrick = bricks[c][r]
144 |         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
145 | 
146 |         const isBallSameXAsBrick =
147 |           x > currentBrick.x &&
148 |           x < currentBrick.x + brickWidth
149 | 
150 |         const isBallSameYAsBrick =
151 |           y > currentBrick.y &&
152 |           y < currentBrick.y + brickHeight
153 | 
154 |         if (isBallSameXAsBrick && isBallSameYAsBrick) {
155 |           dy = -dy
156 |           currentBrick.status = BRICK_STATUS.DESTROYED
157 |         }
158 |       }
159 |     }
160 |   }
161 | 
162 |   function ballMovement() {
163 |     // rebotar las pelotas en los laterales
164 |     if (
165 |       x + dx > canvas.width - ballRadius || // la pared derecha
166 |       x + dx < ballRadius // la pared izquierda
167 |     ) {
168 |       dx = -dx
169 |     }
170 | 
171 |     // rebotar en la parte de arriba
172 |     if (y + dy < ballRadius) {
173 |       dy = -dy
174 |     }
175 | 
176 |     // la pelota toca la pala
177 |     const isBallSameXAsPaddle =
178 |       x > paddleX &&
179 |       x < paddleX + paddleWidth
180 | 
181 |     const isBallTouchingPaddle =
182 |       y + dy > paddleY
183 | 
184 |     if (isBallSameXAsPaddle && isBallTouchingPaddle) {
185 |       dy = -dy // cambiamos la dirección de la pelota
186 |     } else if ( // la pelota toca el suelo
187 |       y + dy > canvas.height - ballRadius || y + dy > paddleY + paddleHeight
188 |     ) {
189 |       gameOver = true
190 |       console.log('Game Over')
191 |       document.location.reload()
192 |     }
193 | 
194 |     // mover la pelota
195 |     x += dx
196 |     y += dy
197 |   }
198 | 
199 |   function paddleMovement() {
200 |     if (rightPressed && paddleX < canvas.width - paddleWidth) {
201 |       paddleX += PADDLE_SENSITIVITY
202 |     } else if (leftPressed && paddleX > 0) {
203 |       paddleX -= PADDLE_SENSITIVITY
204 |     }
205 |   }
206 | 
207 |   function cleanCanvas() {
208 |     ctx.clearRect(0, 0, canvas.width, canvas.height)
209 |   }
210 | 
211 |   function initEvents() {
212 |     document.addEventListener('keydown', keyDownHandler)
213 |     document.addEventListener('keyup', keyUpHandler)
214 | 
215 |     function keyDownHandler(event) {
216 |       const { key } = event
217 |       if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
218 |         rightPressed = true
219 |       } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
220 |         leftPressed = true
221 |       }
222 |     }
223 | 
224 |     function keyUpHandler(event) {
225 |       const { key } = event
226 |       if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
227 |         rightPressed = false
228 |       } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
229 |         leftPressed = false
230 |       }
231 |     }
232 |   }
233 | 
234 |   // a que velocidad de fps queremos que renderice nuestro juego
235 |   const fps = 60
236 |   
237 |   let msPrev = window.performance.now()
238 |   let msFPSPrev = window.performance.now() + 1000;
239 |   const msPerFrame = 1000 / fps
240 |   let frames = 0
241 |   let framesPerSec = fps;
242 | 
243 |   let gameOver = false;
244 | 
245 |   function draw() {
246 |     if (gameOver) return
247 |     
248 |     window.requestAnimationFrame(draw)
249 | 
250 |     const msNow = window.performance.now()
251 |     const msPassed = msNow - msPrev
252 | 
253 |     if (msPassed < msPerFrame) return
254 | 
255 |     const excessTime = msPassed % msPerFrame
256 |     msPrev = msNow - excessTime
257 | 
258 |     frames++
259 | 
260 |     if (msFPSPrev < msNow)
261 |     {
262 |       msFPSPrev = window.performance.now() + 1000
263 |       framesPerSec = frames;
264 |       frames = 0;
265 |     }
266 | 
267 |     // ... render code
268 |     cleanCanvas()
269 |     // hay que dibujar los elementos
270 |     drawBall()
271 |     drawPaddle()
272 |     drawBricks()
273 |     drawUI()
274 | 
275 |     // colisiones y movimientos
276 |     collisionDetection()
277 |     ballMovement()
278 |     paddleMovement()
279 | 
280 |   }
281 | 
282 |   draw()
283 |   initEvents()
284 | </script>


--------------------------------------------------------------------------------
/web/public/projects/02-arkanoid-game/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/02-arkanoid-game/sprite.png


--------------------------------------------------------------------------------
/web/public/projects/02.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/02.webp


--------------------------------------------------------------------------------
/web/public/projects/03-midu-typing-game/data.js:
--------------------------------------------------------------------------------
  1 | export const words = [
  2 |   "a",
  3 |   "again",
  4 |   "all",
  5 |   "also",
  6 |   "and",
  7 |   "another",
  8 |   "any",
  9 |   "around",
 10 |   "as",
 11 |   "ask",
 12 |   "at",
 13 |   "back",
 14 |   "because",
 15 |   "become",
 16 |   "before",
 17 |   "begin",
 18 |   "both",
 19 |   "but",
 20 |   "by",
 21 |   "call",
 22 |   "can",
 23 |   "change",
 24 |   "child",
 25 |   "come",
 26 |   "could",
 27 |   "course",
 28 |   "day",
 29 |   "develop",
 30 |   "each",
 31 |   "early",
 32 |   "end",
 33 |   "even",
 34 |   "eye",
 35 |   "face",
 36 |   "fact",
 37 |   "few",
 38 |   "first",
 39 |   "follow",
 40 |   "from",
 41 |   "general",
 42 |   "get",
 43 |   "give",
 44 |   "good",
 45 |   "govern",
 46 |   "group",
 47 |   "hand",
 48 |   "have",
 49 |   "he",
 50 |   "head",
 51 |   "help",
 52 |   "here",
 53 |   "high",
 54 |   "hold",
 55 |   "home",
 56 |   "how",
 57 |   "however",
 58 |   "if",
 59 |   "increase",
 60 |   "interest",
 61 |   "it",
 62 |   "know",
 63 |   "large",
 64 |   "last",
 65 |   "lead",
 66 |   "leave",
 67 |   "life",
 68 |   "like",
 69 |   "line",
 70 |   "little",
 71 |   "look",
 72 |   "make",
 73 |   "man",
 74 |   "may",
 75 |   "mean",
 76 |   "might",
 77 |   "more",
 78 |   "must",
 79 |   "need",
 80 |   "never",
 81 |   "new",
 82 |   "no",
 83 |   "now",
 84 |   "number",
 85 |   "of",
 86 |   "off",
 87 |   "old",
 88 |   "on",
 89 |   "one",
 90 |   "open",
 91 |   "or",
 92 |   "order",
 93 |   "out",
 94 |   "over",
 95 |   "own",
 96 |   "part",
 97 |   "people",
 98 |   "person",
 99 |   "place",
100 |   "plan",
101 |   "play",
102 |   "point",
103 |   "possible",
104 |   "present",
105 |   "problem",
106 |   "program",
107 |   "public",
108 |   "real",
109 |   "right",
110 |   "run",
111 |   "say",
112 |   "see",
113 |   "seem",
114 |   "show",
115 |   "small",
116 |   "some",
117 |   "stand",
118 |   "state",
119 |   "still",
120 |   "such",
121 |   "system",
122 |   "take",
123 |   "than",
124 |   "that",
125 |   "the",
126 |   "then",
127 |   "there",
128 |   "these",
129 |   "they",
130 |   "thing",
131 |   "think",
132 |   "this",
133 |   "those",
134 |   "time",
135 |   "to",
136 |   "under",
137 |   "up",
138 |   "use",
139 |   "very",
140 |   "way",
141 |   "what",
142 |   "when",
143 |   "where",
144 |   "while",
145 |   "will",
146 |   "with",
147 |   "without",
148 |   "work",
149 |   "world",
150 |   "would",
151 |   "write",
152 |   "you",
153 |   "she",
154 |   "set",
155 |   "we",
156 |   "long",
157 |   "in",
158 |   "many",
159 |   "do",
160 |   "after",
161 |   "which",
162 |   "so",
163 |   "same",
164 |   "other",
165 |   "house",
166 |   "during",
167 |   "much",
168 |   "just",
169 |   "consider",
170 |   "since",
171 |   "should",
172 |   "only",
173 |   "tell",
174 |   "about"
175 | ]


--------------------------------------------------------------------------------
/web/public/projects/03.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/03.webp


--------------------------------------------------------------------------------
/web/public/projects/04-chatgpt-local/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>ChatGPT Local 100% privado, gratis y maravilloso</title>
  8 | 
  9 |   <style>
 10 |     body {
 11 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 12 |       background: #f0f0f0;
 13 |       display: grid;
 14 |       place-content: center;
 15 |       height: 100dvh;
 16 |     }
 17 | 
 18 |     main {
 19 |       width: 400px;
 20 |       max-width: 100%;
 21 |       height: 70vh;
 22 | 
 23 |       background: #fff;
 24 |       border: 1px solid #ccc;
 25 |       border-radius: 4px;
 26 |       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 27 |       padding: 8px;
 28 |       margin-bottom: 16px;
 29 | 
 30 |       overflow-y: auto;
 31 |       scroll-behavior: smooth;
 32 |     }
 33 | 
 34 |     ul {
 35 |       display: flex;
 36 |       flex-direction: column;
 37 |       list-style: none;
 38 |       padding: 0;
 39 |     }
 40 | 
 41 |     .message {
 42 |       display: flex;
 43 |       flex-direction: column;
 44 |       margin: 4px 0;
 45 |       padding: 4px 8px;
 46 | 
 47 |       span {
 48 |         width: 36px;
 49 |         height: 36px;
 50 |         background: #eee;
 51 |         font-size: 12px;
 52 |         font-weight: 500;
 53 |         display: flex;
 54 |         justify-content: center;
 55 |         align-items: center;
 56 |         border-radius: 999999px;
 57 |       }
 58 | 
 59 |       p {
 60 |         border-radius: 4px;
 61 |         padding: 4px 8px;
 62 |         margin-top: 4px;
 63 |       }
 64 | 
 65 |       &.user {
 66 |         align-self: flex-end;
 67 |         align-items: flex-end;
 68 | 
 69 |         span,
 70 |         p {
 71 |           background: rgb(219, 236, 255);
 72 |         }
 73 |       }
 74 | 
 75 |       &.bot {
 76 |         align-self: flex-start;
 77 | 
 78 |         span,
 79 |         p {
 80 |           background: rgb(198, 255, 220);
 81 |         }
 82 |       }
 83 |     }
 84 | 
 85 |     form {
 86 |       display: flex;
 87 | 
 88 |       input {
 89 |         border-radius: 999999px;
 90 |         flex-grow: 1;
 91 |         border: 0;
 92 |         padding: 8px;
 93 |         margin-right: 8px;
 94 |         border: 1px solid #ccc;
 95 |       }
 96 | 
 97 |       button {
 98 |         background: #09f;
 99 |         border: 0;
100 |         color: white;
101 |         border-radius: 6px;
102 |         cursor: pointer;
103 |         padding: 8px;
104 |         transition: background .3s ease;
105 | 
106 |         &[disabled] {
107 |           background: #ccc;
108 |           opacity: .6;
109 |           pointer-events: none;
110 |         }
111 | 
112 |         &:hover {
113 |           background: rgb(0, 104, 173);
114 |         }
115 |       }
116 |     }
117 | 
118 |     small {
119 |       font-size: 10px;
120 |       color: #555;
121 |       position: fixed;
122 |       bottom: 10px;
123 |       left: 0;
124 |       right: 0;
125 |       margin: auto;
126 |       width: 400px;
127 |     }
128 | 
129 |     .loading {
130 |       text-align: center;
131 |       display: flex;
132 |       justify-content: center;
133 |       height: 100%;
134 |       align-items: center;
135 |       flex-direction: column;
136 |       margin-top: 50%;
137 | 
138 |       i {
139 |         pointer-events: none;
140 |         width: 2.5em;
141 |         height: 2.5em;
142 |         border: 0.4em solid transparent;
143 |         border-color: #eee;
144 |         border-top-color: #3E67EC;
145 |         border-radius: 50%;
146 |         animation: loadingspin 1s linear infinite;
147 |       }
148 | 
149 |       h4 {
150 |         color: #444;
151 |         margin-bottom: 8px;
152 |       }
153 | 
154 |       h5 {
155 |         font-weight: 400;
156 |         margin: 0;
157 |         font-size: 10px;
158 |         opacity: .4;
159 |       }
160 |     }
161 | 
162 |     @keyframes loadingspin {
163 |       100% {
164 |         transform: rotate(360deg)
165 |       }
166 |     }
167 |   </style>
168 | 
169 |   <script type="module">
170 |     /* 
171 |     en el vídeo usamos "https://esm.run/@mlc-ai/web-llm"
172 |     el problema es que eso siempre es la versión más reciente
173 |     en el código usamos https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm
174 |     para fijar la versión */
175 |     import { CreateWebWorkerMLCEngine } from "https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm"
176 | 
177 |     const $ = el => document.querySelector(el)
178 | 
179 |     // pongo delante de la variable un símbolo de $
180 |     // para indicar que es un elemento del DOM
181 |     const $form = $('form')
182 |     const $input = $('input')
183 |     const $template = $('#message-template')
184 |     const $messages = $('ul')
185 |     const $container = $('main')
186 |     const $button = $('button')
187 |     const $info = $('small')
188 |     const $loading = $('.loading')
189 | 
190 |     let messages = []
191 |     let end = false
192 | 
193 |     const SELECTED_MODEL = 'Llama-3-8B-Instruct-q4f32_1-MLC-1k'
194 | 
195 |     const engine = await CreateWebWorkerMLCEngine(
196 |       new Worker('./worker.js', { type: 'module' }),
197 |       SELECTED_MODEL,
198 |       {
199 |         initProgressCallback: (info) => {
200 |           $info.textContent = info.text
201 |           if (info.progress === 1 && !end) {
202 |             end = true
203 |             $loading?.parentNode?.removeChild($loading)
204 |             $button.removeAttribute('disabled')
205 |             addMessage("¡Hola! Soy un ChatGPT que se ejecuta completamente en tu navegador. ¿En qué puedo ayudarte hoy?", 'bot')
206 |             $input.focus()
207 |           }
208 |         }
209 |       }
210 |     )
211 | 
212 |     $form.addEventListener('submit', async (event) => {
213 |       event.preventDefault()
214 |       const messageText = $input.value.trim()
215 | 
216 |       if (messageText !== '') {
217 |         // añadimos el mensaje en el DOM
218 |         $input.value = ''
219 |       }
220 | 
221 |       addMessage(messageText, 'user')
222 |       $button.setAttribute('disabled', '')
223 | 
224 |       const userMessage = {
225 |         role: 'user',
226 |         content: messageText
227 |       }
228 | 
229 |       messages.push(userMessage)
230 | 
231 |       const chunks = await engine.chat.completions.create({
232 |         messages,
233 |         stream: true
234 |       })
235 | 
236 |       let reply = ""
237 | 
238 |       const $botMessage = addMessage("", 'bot')
239 | 
240 |       for await (const chunk of chunks) {
241 |         const choice = chunk.choices[0]
242 |         const content = choice?.delta?.content ?? ""
243 |         reply += content
244 |         $botMessage.textContent = reply
245 |       }
246 | 
247 |       $button.removeAttribute('disabled')
248 |       messages.push({
249 |         role: 'assistant',
250 |         content: reply
251 |       })
252 |       $container.scrollTop = $container.scrollHeight
253 |     })
254 | 
255 |     function addMessage(text, sender) {
256 |       // clonar el template
257 |       const clonedTemplate = $template.content.cloneNode(true)
258 |       const $newMessage = clonedTemplate.querySelector('.message')
259 | 
260 |       const $who = $newMessage.querySelector('span')
261 |       const $text = $newMessage.querySelector('p')
262 | 
263 |       $text.textContent = text
264 |       $who.textContent = sender === 'bot' ? 'GPT' : 'Tú'
265 |       $newMessage.classList.add(sender)
266 | 
267 |       $messages.appendChild($newMessage)
268 | 
269 |       $container.scrollTop = $container.scrollHeight
270 | 
271 |       return $text
272 |     }
273 |   </script>
274 | </head>
275 | 
276 | <body>
277 |   <main>
278 |     <ul>
279 |       <li class="loading">
280 |         <i></i>
281 |         <h4>Cargando...</h4>
282 |         <h5>Esto puede tardar un poco. Paciencia.</h5>
283 |       </li>
284 |     </ul>
285 |   </main>
286 | 
287 |   <form>
288 |     <input placeholder="Escribe tu mensaje aquí...">
289 |     <button disabled>Enviar</button>
290 |   </form>
291 | 
292 |   <small>&nbsp;</small>
293 | 
294 |   <template id="message-template">
295 |     <li class="message">
296 |       <span></span>
297 |       <p></p>
298 |     </li>
299 |   </template>
300 | </body>
301 | 
302 | </html>
303 | 


--------------------------------------------------------------------------------
/web/public/projects/04-chatgpt-local/worker.js:
--------------------------------------------------------------------------------
1 | import { WebWorkerMLCEngineHandler } from "https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.46/+esm"
2 | 
3 | const handler = new WebWorkerMLCEngineHandler()
4 | 
5 | self.onmessage = (msg) => {
6 |   handler.onmessage(msg)
7 | }


--------------------------------------------------------------------------------
/web/public/projects/04.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/04.webp


--------------------------------------------------------------------------------
/web/public/projects/05-api-geo-ip/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="es">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>IP Geolocation</title>
 9 |   <link rel="stylesheet" href="style.css" />
10 |   <script type="module">
11 |     const OPTIONS = {
12 |       method: 'GET',
13 |       headers: {
14 |         'X-RapidAPI-Key': 'XXX',
15 |         'X-RapidAPI-Host': 'YYY'
16 |       }
17 |     }
18 | 
19 |     const fetchIpInfo = ip => {
20 |       return fetch(`https://freeipapi.com/api/json/${ip}`, OPTIONS)
21 |         .then(res => res.json())
22 |         .catch(err => console.error(err))
23 |     }
24 | 
25 |     const $ = selector => document.querySelector(selector)
26 | 
27 |     const $form = $('#form')
28 |     const $input = $('#input')
29 |     const $submit = $('#submit')
30 |     const $results = $('#results')
31 | 
32 |     $form.addEventListener('submit', async (event) => {
33 |       event.preventDefault()
34 |       const {value} = $input
35 |       if (!value) return
36 | 
37 |       $submit.setAttribute('disabled', '')
38 |       $submit.setAttribute('aria-busy', 'true')
39 | 
40 |       const ipInfo = await fetchIpInfo(value)
41 | 
42 |       if (ipInfo) {
43 |         $results.innerHTML = JSON.stringify(ipInfo, null, 2)
44 |       }
45 | 
46 |       $submit.removeAttribute('disabled')
47 |       $submit.removeAttribute('aria-busy')
48 | 
49 |     })
50 |   </script>
51 | </head>
52 | 
53 | <body>
54 |   <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
55 | 
56 |   <main class="container">
57 |     <form id="form">
58 |       <label>
59 |         IP del usuario
60 |         <input required id="input" type="text" placeholder="Introduce aquí la IP">
61 |         <small>Por ejemplo: 54.85.132.205</small>
62 |       </label>
63 | 
64 |       <button type="submit" id="submit">
65 |         Buscar información de esta IP
66 |       </button>
67 | 
68 |     </form>
69 | 
70 |     <div>
71 |       <pre id="results"></pre>
72 |     </div>
73 |   </main>
74 | 
75 | </body>
76 | 
77 | </html>


--------------------------------------------------------------------------------
/web/public/projects/05.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/05.webp


--------------------------------------------------------------------------------
/web/public/projects/06.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/06.webp


--------------------------------------------------------------------------------
/web/public/projects/07.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/07.webp


--------------------------------------------------------------------------------
/web/public/projects/08-excel-js/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Excel.js</title>
  8 |   <style>
  9 |     body {
 10 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 11 |     }
 12 | 
 13 |     *,
 14 |     *::before,
 15 |     *::after {
 16 |       box-sizing: border-box;
 17 |     }
 18 | 
 19 |     img {
 20 |       max-width: 20px;
 21 |       height: auto;
 22 |     }
 23 | 
 24 |     table {
 25 |       border-collapse: collapse;
 26 |     }
 27 | 
 28 |     thead,
 29 |     tr td:first-child {
 30 |       background: #eee;
 31 |     }
 32 | 
 33 |     th,
 34 |     td {
 35 |       border: 1px solid #ccc;
 36 |       font-weight: normal;
 37 |       font-size: 12px;
 38 |       text-align: center;
 39 |       width: 64px;
 40 |       height: 20px;
 41 |       vertical-align: middle;
 42 |       position: relative
 43 |     }
 44 | 
 45 |     /* td:active {
 46 |       border-radius: 2px;
 47 |       outline: 2px solid #09f;
 48 |     } */
 49 | 
 50 |     span,
 51 |     input {
 52 |       position: absolute;
 53 |       inset: 0;
 54 |       vertical-align: middle;
 55 |       display: inline-flex;
 56 |       justify-content: center;
 57 |       align-items: center;
 58 |     }
 59 | 
 60 |     input {
 61 |       border: 0;
 62 |       opacity: 0;
 63 |       pointer-events: none;
 64 |       width: 100%;
 65 |       border-radius: 2px;
 66 | 
 67 |       &:focus {
 68 |         opacity: 1;
 69 |         outline: 2px solid #09f;
 70 |       }
 71 |     }
 72 | 
 73 |     .selected {
 74 |       background: rgb(174, 223, 255);
 75 |     }
 76 | 
 77 |     th.selected {
 78 |       background: rgb(146, 211, 255);
 79 |     }
 80 |   </style>
 81 |   <script type="module">
 82 |     const $ = el => document.querySelector(el)
 83 |     const $$ = el => document.querySelectorAll(el)
 84 | 
 85 |     const $table = $('table')
 86 |     const $head = $('thead')
 87 |     const $body = $('tbody')
 88 | 
 89 |     const ROWS = 10
 90 |     const COLUMNS = 5
 91 |     const FIRST_CHAR_CODE = 65
 92 | 
 93 |     const times = length => Array.from({ length }, (_, i) => i)
 94 |     const getColumn = i => String.fromCharCode(FIRST_CHAR_CODE + i)
 95 | 
 96 |     let selectedColumn = null
 97 | 
 98 |     let STATE = times(COLUMNS)
 99 |       .map(i => times(ROWS).map(j => ({ computedValue: 0, value: 0 })))
100 | 
101 |     console.log(STATE)
102 | 
103 |     function updateCell({ x, y, value }) {
104 |       const newState = structuredClone(STATE)
105 |       const constants = generateCellsConstants(newState)
106 | 
107 |       const cell = newState[x][y]
108 | 
109 |       cell.computedValue = computeValue(value, constants) // -> span
110 |       cell.value = value // -> input
111 | 
112 |       newState[x][y] = cell
113 | 
114 |       computeAllCells(newState, generateCellsConstants(newState))
115 | 
116 |       STATE = newState
117 | 
118 |       renderSpreadSheet()
119 |     }
120 | 
121 |     function generateCellsConstants(cells) {
122 |       return cells.map((rows, x) => {
123 |         return rows.map((cell, y) => {
124 |           const letter = getColumn(x) // -> A
125 |           const cellId = `${letter}${y + 1}` // -> A1
126 |           return `const ${cellId} = ${cell.computedValue};`
127 |         }).join('\n')
128 |       }).join('\n')
129 |     }
130 | 
131 |     function computeAllCells(cells, constants) {
132 |       console.log('computeAllCells')
133 |       cells.forEach((rows, x) => {
134 |         rows.forEach((cell, y) => {
135 |           const computedValue = computeValue(cell.value, constants)
136 |           cell.computedValue = computedValue
137 |         })
138 |       })
139 |     }
140 | 
141 |     function computeValue(value, constants) {
142 |       if (typeof value === 'number') return value
143 |       if (!value.startsWith('=')) return value
144 | 
145 |       const formula = value.slice(1)
146 | 
147 |       let computedValue
148 |       try {
149 |         computedValue = eval(`(() => {
150 |         ${constants}
151 |         return ${formula};
152 |       })()`)
153 |       } catch (e) {
154 |         computedValue = `!ERROR: ${e.message}`
155 |       }
156 | 
157 |       console.log({ value, computedValue })
158 | 
159 |       return computedValue
160 |     }
161 | 
162 |     const renderSpreadSheet = () => {
163 |       const headerHTML = `<tr>
164 |           <th></th>
165 |           ${times(COLUMNS).map(i => `<th>${getColumn(i)}</th>`).join('')}
166 |         </tr>`
167 | 
168 |       $head.innerHTML = headerHTML
169 | 
170 |       const bodyHTML = times(ROWS).map(row => {
171 |         return `<tr>
172 |           <td>${row + 1}</td>
173 |           ${times(COLUMNS).map(column => `
174 |           <td data-x="${column}" data-y="${row}">
175 |             <span>${STATE[column][row].computedValue}</span>
176 |             <input type="text" value="${STATE[column][row].value}" />
177 |           </td>
178 |           `).join('')}
179 |         </tr>`
180 |       }).join('')
181 | 
182 |       $body.innerHTML = bodyHTML
183 |     }
184 | 
185 |     $body.addEventListener('click', event => {
186 |       const td = event.target.closest('td')
187 |       if (!td) return
188 | 
189 |       const { x, y } = td.dataset
190 |       const input = td.querySelector('input')
191 |       const span = td.querySelector('span')
192 | 
193 |       const end = input.value.length
194 |       input.setSelectionRange(end, end)
195 |       input.focus()
196 | 
197 |       $$('.selected').forEach(el => el.classList.remove('selected'))
198 |       selectedColumn = null
199 | 
200 |       input.addEventListener('keydown', (event) => {
201 |         if (event.key === 'Enter') input.blur()
202 |       })
203 | 
204 |       input.addEventListener('blur', () => {
205 |         console.log({ value: input.value, state: STATE[x][y].value })
206 | 
207 |         if (input.value === STATE[x][y].value) return
208 | 
209 |         updateCell({ x, y, value: input.value })
210 |       }, { once: true })
211 |     })
212 | 
213 |     $head.addEventListener('click', event => {
214 |       const th = event.target.closest('th')
215 |       if (!th) return
216 | 
217 |       const x = [...th.parentNode.children].indexOf(th)
218 |       if (x <= 0) return
219 | 
220 |       selectedColumn = x - 1
221 | 
222 |       $$('.selected').forEach(el => el.classList.remove('selected'))
223 |       th.classList.add('selected')
224 |       $$(`tr td:nth-child(${x + 1})`).forEach(el => el.classList.add('selected'))
225 |     })
226 | 
227 |     document.addEventListener('keydown', event => {
228 |       if (event.key === 'Backspace' && selectedColumn !== null) {
229 |         times(ROWS).forEach(row => {
230 |           updateCell({ x: selectedColumn, y: row, value: '' })
231 |         })
232 |         renderSpreadSheet()
233 |       }
234 |     })
235 | 
236 |     document.addEventListener('copy', event => {
237 |       if (selectedColumn !== null) {
238 |         const columnValues = times(ROWS).map(row => {
239 |           return STATE[selectedColumn][row].computedValue
240 |         })
241 | 
242 |         event.clipboardData.setData('text/plain', columnValues.join('\n'))
243 |         event.preventDefault()
244 |       }
245 |     })
246 | 
247 |     document.addEventListener('click', event => {
248 |       const { target } = event
249 | 
250 |       const isThClicked = target.closest('th')
251 |       const isTdClicked = target.closest('td')
252 | 
253 |       if (!isThClicked && !isTdClicked) {
254 |         $$('.selected').forEach(el => el.classList.remove('selected'))
255 |         selectedColumn = null
256 |       }
257 |     })
258 | 
259 |     renderSpreadSheet()
260 |   </script>
261 | </head>
262 | 
263 | <body>
264 |   <img
265 |     src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Microsoft_Excel_2013-2019_logo.svg/1200px-Microsoft_Excel_2013-2019_logo.svg.png" />
266 | 
267 |   <table>
268 |     <thead></thead>
269 |     <tbody></tbody>
270 |   </table>
271 | </body>
272 | 
273 | </html>
274 | 
275 | 
276 | <!--
277 | 
278 | - Añadir la funconalidad de filas
279 | - Haz la suma por rangos=A1:A20
280 | - Seleccionar por celas
281 | 
282 | 
283 | -->


--------------------------------------------------------------------------------
/web/public/projects/08.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/08.webp


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/cursors/erase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/cursors/erase.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/cursors/picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/cursors/picker.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/cursors/pincel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/cursors/pincel.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/cursors/point.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/cursors/point.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icon.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/clear.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/clear.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/draw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/draw.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/ellipse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/ellipse.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/erase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/erase.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/fill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/fill.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/picker.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/picker.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/rectangle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/rectangle.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/save.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/save.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/star.png


--------------------------------------------------------------------------------
/web/public/projects/09-paint-win-95/icons/trash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09-paint-win-95/icons/trash.png


--------------------------------------------------------------------------------
/web/public/projects/09.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/09.webp


--------------------------------------------------------------------------------
/web/public/projects/10-stack-game/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>10 - Stack Game</title>
  8 |   <style>
  9 |     body {
 10 |       background: #000;
 11 |       margin: 0;
 12 |       display: grid;
 13 |       place-content: center;
 14 |       height: 100vh;
 15 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 16 |     }
 17 | 
 18 |     canvas {
 19 |       border: 1px solid white;
 20 |     }
 21 | 
 22 |     span {
 23 |       color: white;
 24 |       font-size: 12px;
 25 |     }
 26 |   </style>
 27 | 
 28 |   <script type="module">
 29 |     const canvas = document.querySelector('canvas')
 30 |     const context = canvas.getContext('2d')
 31 | 
 32 |     const score = document.querySelector('#score')
 33 | 
 34 |     // CONSTANTS
 35 |     const MODES = {
 36 |       FALL: 'fall',
 37 |       BOUNCE: 'bounce',
 38 |       GAMEOVER: 'gameover'
 39 |     }
 40 |     const INITIAL_BOX_WIDTH = 200
 41 |     const INITIAL_BOX_Y = 600
 42 | 
 43 |     const BOX_HEIGHT = 50
 44 |     const INITIAL_Y_SPEED = 5
 45 |     const INITIAL_X_SPEED = 2
 46 | 
 47 |     // STATE
 48 |     let boxes = []
 49 |     let debris = { x: 0, y: 0, width: 0 }
 50 |     let scrollCounter, cameraY, current, mode, xSpeed, ySpeed
 51 | 
 52 |     function createStepColor(step) {
 53 |       if (step === 0) return 'white'
 54 | 
 55 |       const red = Math.floor(Math.random() * 255)
 56 |       const green = Math.floor(Math.random() * 255)
 57 |       const blue = Math.floor(Math.random() * 255)
 58 | 
 59 |       return `rgb(${red}, ${green}, ${blue})`
 60 |     }
 61 | 
 62 |     function updateCamera() {
 63 |       if (scrollCounter > 0) {
 64 |         cameraY++
 65 |         scrollCounter--
 66 |       }
 67 |     }
 68 | 
 69 |     function initializeGameState() {
 70 |       boxes = [{
 71 |         x: (canvas.width / 2) - (INITIAL_BOX_WIDTH / 2),
 72 |         y: 200,
 73 |         width: INITIAL_BOX_WIDTH,
 74 |         color: 'white'
 75 |       }]
 76 | 
 77 |       debris = { x: 0, y: 0, width: 0 }
 78 |       current = 1
 79 |       mode = MODES.BOUNCE
 80 |       xSpeed = INITIAL_X_SPEED
 81 |       ySpeed = INITIAL_Y_SPEED
 82 |       scrollCounter = 0
 83 |       cameraY = 0
 84 | 
 85 |       createNewBox()
 86 |     }
 87 | 
 88 |     function restart() {
 89 |       initializeGameState()
 90 |       draw()
 91 |     }
 92 | 
 93 |     function draw() {
 94 |       if (mode === MODES.GAMEOVER) return
 95 | 
 96 |       drawBackground()
 97 |       drawBoxes()
 98 |       drawDebris()
 99 | 
100 |       if (mode === MODES.BOUNCE) {
101 |         moveAndDetectCollision()
102 |       } else if (mode === MODES.FALL) {
103 |         updateFallMode()
104 |       }
105 | 
106 |       debris.y -= ySpeed
107 |       updateCamera()
108 | 
109 |       window.requestAnimationFrame(draw)
110 |     }
111 | 
112 |     function drawBackground() {
113 |       context.fillStyle = 'rgba(0, 0, 0, 0.5)'
114 |       context.fillRect(0, 0, canvas.width, canvas.height)
115 |     }
116 | 
117 |     function drawDebris() {
118 |       const { x, y, width } = debris
119 |       const newY = INITIAL_BOX_Y - y + cameraY
120 | 
121 |       context.fillStyle = 'red'
122 |       context.fillRect(x, newY, width, BOX_HEIGHT)
123 |     }
124 | 
125 |     function drawBoxes() {
126 |       boxes.forEach((box) => {
127 |         const { x, y, width, color } = box
128 |         const newY = INITIAL_BOX_Y - y + cameraY
129 | 
130 |         context.fillStyle = color
131 |         context.fillRect(x, newY, width, BOX_HEIGHT)
132 |       })
133 |     }
134 | 
135 |     function createNewBox() {
136 |       boxes[current] = {
137 |         x: 0,
138 |         y: (current + 10) * BOX_HEIGHT,
139 |         width: boxes[current - 1].width,
140 |         color: createStepColor(current)
141 |       }
142 |     }
143 | 
144 |     function createNewDebris(difference) {
145 |       const currentBox = boxes[current]
146 |       const previousBox = boxes[current - 1]
147 | 
148 |       const debrisX = currentBox.x > previousBox.x
149 |         ? currentBox.x + currentBox.width
150 |         : currentBox.x
151 | 
152 |       debris = {
153 |         x: debrisX,
154 |         y: currentBox.y,
155 |         width: difference
156 |       }
157 |     }
158 | 
159 |     function updateFallMode() {
160 |       const currentBox = boxes[current]
161 |       currentBox.y -= ySpeed
162 | 
163 |       const positionPreviousBox = boxes[current - 1].y + BOX_HEIGHT
164 | 
165 |       if (currentBox.y === positionPreviousBox) {
166 |         handleBoxLanding()
167 |       }
168 |     }
169 | 
170 |     function adjustCurrentBox(difference) {
171 |       const currentBox = boxes[current]
172 |       const previousBox = boxes[current - 1]
173 | 
174 |       if (currentBox.x > previousBox.x) {
175 |         currentBox.width -= difference
176 |       } else {
177 |         currentBox.width += difference
178 |         currentBox.x = previousBox.x
179 |       }
180 |     }
181 | 
182 |     function gameOver() {
183 |       mode = MODES.GAMEOVER
184 | 
185 |       context.fillStyle = 'rgba(255, 0, 0, 0.5)'
186 |       context.fillRect(0, 0, canvas.width, canvas.height)
187 | 
188 |       context.font = 'bold 20px Arial'
189 |       context.fillStyle = 'white'
190 |       context.textAlign = 'center'
191 |       context.fillText(
192 |         'Game Over',
193 |         canvas.width / 2,
194 |         canvas.height / 2
195 |       )
196 |     }
197 | 
198 |     function handleBoxLanding() {
199 |       const currentBox = boxes[current]
200 |       const previousBox = boxes[current - 1]
201 | 
202 |       const difference = currentBox.x - previousBox.x
203 | 
204 |       if (Math.abs(difference) >= currentBox.width) {
205 |         gameOver()
206 |         return
207 |       }
208 | 
209 |       adjustCurrentBox(difference)
210 |       createNewDebris(difference)
211 | 
212 |       xSpeed += xSpeed > 0 ? 1 : -1
213 |       current++
214 |       scrollCounter = BOX_HEIGHT
215 |       mode = MODES.BOUNCE
216 | 
217 |       score.textContent = current - 1 
218 | 
219 |       createNewBox()
220 |     }
221 | 
222 |     function moveAndDetectCollision() {
223 |       const currentBox = boxes[current]
224 |       currentBox.x += xSpeed
225 | 
226 |       const isMovingRight = xSpeed > 0
227 |       const isMovingLeft = xSpeed < 0
228 | 
229 |       const hasHitRightSide =
230 |         currentBox.x + currentBox.width > canvas.width
231 | 
232 |       const hasHitLeftSide = currentBox.x < 0
233 | 
234 |       if (
235 |         (isMovingRight && hasHitRightSide) ||
236 |         (isMovingLeft && hasHitLeftSide)
237 |       ) {
238 |         xSpeed = -xSpeed
239 |       }
240 |     }
241 | 
242 |     document.addEventListener('keydown', (event) => {
243 |       if (event.key === ' ' && mode === MODES.BOUNCE) {
244 |         mode = MODES.FALL
245 |       }
246 |     })
247 | 
248 |     canvas.onpointerdown = () => {
249 |       if (mode === MODES.GAMEOVER) {
250 |         restart()
251 |       } else if (mode === MODES.BOUNCE) {
252 |         mode = MODES.FALL
253 |       }
254 |     }
255 | 
256 |     restart()
257 |   </script>
258 | </head>
259 | 
260 | <body>
261 |   <span>Puntuación: <span id="score">0</span></span>
262 |   <canvas id="canvas" width="320" height="500"></canvas>
263 | </body>
264 | 
265 | </html>


--------------------------------------------------------------------------------
/web/public/projects/10.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/10.webp


--------------------------------------------------------------------------------
/web/public/projects/11-js-perf-benchmark/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>11 - JS Perf Benchmark</title>
  8 |   <style>
  9 |     *,
 10 |     *::before,
 11 |     *::after {
 12 |       box-sizing: border-box;
 13 |     }
 14 | 
 15 |     body {
 16 |       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 17 |       background: #1e1e1e;
 18 |       color: #fff;
 19 |       margin: 0;
 20 |       padding: 16px;
 21 |       display: grid;
 22 |       place-content: center;
 23 |       min-height: 100vh;
 24 |     }
 25 | 
 26 |     .container {
 27 |       max-width: 1280px;
 28 |       margin: 0 auto;
 29 |       display: flex;
 30 |       gap: 32px;
 31 |       justify-content: center;
 32 |     }
 33 | 
 34 |     @media (max-width: 768px) {
 35 |       .container {
 36 |         flex-direction: column;
 37 |       }
 38 |     }
 39 | 
 40 |     .content {
 41 |       display: flex;
 42 |       flex-direction: column;
 43 |       gap: 16px;
 44 | 
 45 |       h2 {
 46 |         font-size: 12px;
 47 |         opacity: .5;
 48 |         font-weight: 500;
 49 |         margin: 0;
 50 |         padding: 0;
 51 |       }
 52 |     }
 53 | 
 54 |     .code {
 55 |       background: #141414;
 56 |       border-radius: 6px;
 57 |       border: 0;
 58 |       color: #d4d4d4;
 59 |       font-family: monospace;
 60 |       font-size: 12px;
 61 |       padding: 8px;
 62 |       resize: none;
 63 |       width: 100%;
 64 |       field-sizing: content;
 65 |     }
 66 | 
 67 |     .test-cases {
 68 |       display: flex;
 69 |       flex-direction: column;
 70 |       gap: 16px;
 71 |     }
 72 | 
 73 |     .test-case {
 74 |       background: #2a2a2a;
 75 |       border-radius: 6px;
 76 |       display: flex;
 77 |       flex-direction: column;
 78 | 
 79 |       header {
 80 |         display: flex;
 81 |         justify-content: space-between;
 82 |         font-size: 12px;
 83 |         padding: 8px;
 84 |         align-items: center;
 85 | 
 86 |         .test-id {
 87 |           border-radius: 50%;
 88 |           background: #141414;
 89 |           width: 20px;
 90 |           height: 20px;
 91 |           display: flex;
 92 |           justify-content: center;
 93 |           align-items: center;
 94 |           text-align: center;
 95 |           color: rgba(255, 255, 255, .7);
 96 |         }
 97 | 
 98 |         .ops {
 99 |           opacity: .5;
100 |           font-size: 9px;
101 |         }
102 |       }
103 | 
104 |       .code {
105 |         border-radius: 0 0 6px 6px;
106 |       }
107 |     }
108 | 
109 |     .send-button {
110 |       border-radius: 6px;
111 |       background: rgba(255, 255, 255, .3);
112 |       border: 0;
113 |       color: white;
114 |       cursor: pointer;
115 |       padding: 6px 12px;
116 |       transition: background .3s ease;
117 |       width: fit-content;
118 | 
119 |       &:hover {
120 |         background: rgba(255, 255, 255, .5);
121 |       }
122 |     }
123 | 
124 |     .chart-container {
125 |       display: flex;
126 |       flex-direction: column;
127 |       align-items: center;
128 |       justify-content: center;
129 | 
130 |       .chart {
131 |         width: 200px;
132 |         height: 300px;
133 |       }
134 | 
135 |       .bar {
136 |         transform: scale(1, -1);
137 |         transition: height .5s ease;
138 |       }
139 | 
140 |       .percentages {
141 |         opacity: .5;
142 |         display: flex;
143 |         font-size: 10px;
144 |         justify-content: space-between;
145 |         gap: 32px;
146 |         margin-top: 16px;
147 |       }
148 |     }
149 |   </style>
150 | 
151 |   <script type="module">
152 |     const $globalCode = document.querySelector('#global')
153 |     const $sendButton = document.querySelector('.send-button')
154 |     const $bars = document.querySelectorAll('.bar')
155 |     const $percentages = document.querySelectorAll('.percentage')
156 | 
157 |     const COLORS = ['green', 'yellow', 'orange', 'red', 'purple']
158 | 
159 |     async function runTest({ code, data }) {
160 |       const worker = new Worker('worker.js')
161 |       worker.postMessage({ code, data, duration: 1000 })
162 | 
163 |       // return new Promise(resolve => {
164 |       //   worker.onmessage = event => {
165 |       //     resolve(event.data)
166 |       //   }
167 |       // })
168 | 
169 |       const { resolve, promise } = Promise.withResolvers()
170 |       worker.onmessage = event => { resolve(event.data) }
171 |       return promise
172 |     }
173 | 
174 |     async function runTestCases() {
175 |       const $testCases = document.querySelectorAll('.test-case')
176 | 
177 |       $bars.forEach(bar => bar.setAttribute('height', 0))
178 |       $percentages.forEach(percentage => percentage.textContent = '')
179 | 
180 |       const globalCode = $globalCode.value
181 | 
182 |       const promises = Array.from($testCases).map(async (testCase, index) => {
183 |         const $code = testCase.querySelector('.code')
184 |         const $ops = testCase.querySelector('.ops')
185 | 
186 |         const codeValue = $code.value
187 |         $ops.textContent = 'Loading...'
188 | 
189 |         const result = await runTest({ code: codeValue, data: globalCode })
190 | 
191 |         $ops.textContent = `${result.toLocaleString()} ops/s`
192 | 
193 |         return result
194 |       })
195 | 
196 |       const results = await Promise.all(promises)
197 | 
198 |       const maxOps = Math.max(...results)
199 | 
200 |       const sortedResults = results
201 |         .map((result, index) => ({ result, index }))
202 |         .sort((a, b) => b.result - a.result)
203 | 
204 |       console.log({ sortedResults })
205 | 
206 |       results.forEach((result, index) => {
207 |         const bar = $bars[index]
208 |         const percentage = $percentages[index]
209 | 
210 |         const indexColor = sortedResults.findIndex(x => x.index === index)
211 |         const color = COLORS[indexColor]
212 | 
213 |         const height = result / maxOps * 300 // 300 is the height of the chart
214 |         bar.setAttribute('height', height)
215 |         bar.setAttribute('fill', color)
216 | 
217 |         const percentageValue = Math.round(result / maxOps * 100)
218 |         percentage.textContent = `${percentageValue}%`
219 |       })
220 |     }
221 | 
222 |     // run test cases on init
223 |     runTestCases()
224 | 
225 |     $sendButton.addEventListener('click', () => {
226 |       runTestCases()
227 |     })
228 |   </script>
229 | </head>
230 | 
231 | <body>
232 |   <main class="container">
233 |     <div class="content">
234 |       <h2>Global</h2>
235 | 
236 |       <textarea id="global" class="code" rows="1">const data = [...Array(1000).keys()]</textarea>
237 | 
238 |       <h2>Test cases</h2>
239 |       <div class="test-cases">
240 |         <article class="test-case">
241 |           <header>
242 |             <span class="test-id">1</span>
243 |             <span class="ops"></span>
244 |           </header>
245 | 
246 |           <textarea class="code" rows="1">data.find(x => x == 100)</textarea>
247 |         </article>
248 | 
249 |         <article class="test-case">
250 |           <header>
251 |             <span class="test-id">2</span>
252 |             <span class="ops"></span>
253 |           </header>
254 | 
255 |           <textarea class="code" rows="1">data.find(x => x == 200)</textarea>
256 |         </article>
257 | 
258 |         <article class="test-case">
259 |           <header>
260 |             <span class="test-id">3</span>
261 |             <span class="ops"></span>
262 |           </header>
263 | 
264 |           <textarea class="code" rows="1">data.find(x => x == 400)</textarea>
265 |         </article>
266 | 
267 |         <article class="test-case">
268 |           <header>
269 |             <span class="test-id">4</span>
270 |             <span class="ops"></span>
271 |           </header>
272 | 
273 |           <textarea class="code" rows="1">data.find(x => x == 800)</textarea>
274 |         </article>
275 |       </div>
276 | 
277 |       <button class="send-button">Benchmark code! 🚀</button>
278 | 
279 |     </div>
280 |     <aside class="chart-container">
281 |       <svg class="chart" viewBox="0 0 200 300">
282 |         <rect class="bar" x="20" y="-300" width="2" height="300" fill="green"></rect>
283 |         <rect class="bar" x="70" y="-300" width="2" height="50" fill="yellow"></rect>
284 |         <rect class="bar" x="120" y="-300" width="2" height="80" fill="orange"></rect>
285 |         <rect class="bar" x="170" y="-300" width="2" height="100" fill="red"></rect>
286 |       </svg>
287 | 
288 |       <div class="percentages">
289 |         <span class="percentage">100%</span>
290 |         <span class="percentage">40%</span>
291 |         <span class="percentage">60%</span>
292 |         <span class="percentage">80%</span>
293 |       </div>
294 |     </aside>
295 |   </main>
296 | </body>
297 | 
298 | </html>


--------------------------------------------------------------------------------
/web/public/projects/11-js-perf-benchmark/worker.js:
--------------------------------------------------------------------------------
 1 | onmessage = async event => {
 2 |   const { code, data, duration } = event.data
 3 | 
 4 |   let result
 5 |   try {
 6 |     result = await eval(`(async () => {
 7 |       let PERF__ops = 0; 
 8 |       let PERF__start = Date.now();
 9 |       let PERF__end = Date.now() + ${duration};
10 |       ${data};
11 | 
12 |       while (Date.now() < PERF__end) {
13 |         ${code};
14 |         PERF__ops++;
15 |       }
16 |       return PERF__ops
17 |   })()`)
18 |   } catch (error) {
19 |     console.log(error)
20 |     result = 0
21 |   }
22 | 
23 |   postMessage(result)
24 | }


--------------------------------------------------------------------------------
/web/public/projects/11.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/11.webp


--------------------------------------------------------------------------------
/web/public/projects/12-moto-scroll/frames/0.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/12-moto-scroll/frames/0.webp


--------------------------------------------------------------------------------
/web/public/projects/12-moto-scroll/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>🏍️ Moto Scroll</title>
  8 |   <style>
  9 |     *,
 10 |     *::before,
 11 |     *::after {
 12 |       box-sizing: border-box;
 13 |     }
 14 | 
 15 |     body {
 16 |       margin: 0;
 17 |     }
 18 | 
 19 |     img {
 20 |       width: 100vw;
 21 |       height: 100dvh;
 22 |       object-fit: cover;
 23 |       position: fixed;
 24 |     }
 25 | 
 26 |     main {
 27 |       height: 300dvh;
 28 |     }
 29 | 
 30 |     header {
 31 |       background: linear-gradient(40deg, #ba3816, #a41705 40%);
 32 |       width: 300px;
 33 |       height: 300px;
 34 |       border-radius: 1000px;
 35 |       position: absolute;
 36 |       top: 0;
 37 |       left: 50%;
 38 |       transform: translateX(-50%);
 39 |       z-index: 1;
 40 |       margin-top: -230px;
 41 |       display: flex;
 42 |       align-items: flex-end;
 43 |       justify-content: center;
 44 |       animation: slideInDown 1500ms ease-out;
 45 | 
 46 |       img {
 47 |         width: 130px;
 48 |         margin: 0 auto;
 49 |         height: auto;
 50 |         margin-bottom: 30px;
 51 |       }
 52 |     }
 53 | 
 54 |     @keyframes slideInDown {
 55 |       from {
 56 |         transform: translate3d(-50%, -100%, 0);
 57 |         opacity: 0;
 58 |       }
 59 | 
 60 |       to {
 61 |         transform: translate3d(-50%, 0, 0);
 62 |         opacity: 1;
 63 |       }
 64 |     }
 65 |   </style>
 66 | 
 67 |   <script type="module">
 68 |     import { images } from './images.js'
 69 | 
 70 |     const main = document.querySelector('main')
 71 |     const MAX_FRAMES = 151
 72 |     let currentFrame = 0
 73 | 
 74 |     function updateImage(frame = 0) {
 75 |       const src = images[frame].p
 76 |       img.src = src
 77 |     }
 78 | 
 79 |     // init with the first image
 80 |     const img = document.createElement('img')
 81 |     // append img to main
 82 |     main.appendChild(img)
 83 |     updateImage(currentFrame)
 84 | 
 85 |     // Altura máxima del scroll
 86 |     let maxScroll = document.documentElement.scrollHeight - window.innerHeight;
 87 | 
 88 |     window.addEventListener('resize', () => {
 89 |       maxScroll = document.documentElement.scrollHeight - window.innerHeight;
 90 |     });
 91 | 
 92 |     let lastFrameUpdate = 0
 93 | 
 94 |     window.addEventListener('scroll', () => {
 95 |       if (Date.now() - lastFrameUpdate < 1) return true
 96 |       // Actualizamos el contador
 97 |       lastFrameUpdate = Date.now()
 98 |       // Posición actual del scroll
 99 |       const scrollPosition = window.scrollY
100 |       // Calcular el porcentaje del scroll
101 |       const scrollFraction = scrollPosition / maxScroll;
102 |       // ¿Qué frame le toca?
103 |       const frame = Math.floor(scrollFraction * MAX_FRAMES)
104 |       // nos evitemos algo de trabajo cuando
105 |       // al hacer scroll, el frame que le toca es el mismo
106 |       // que ya tenía
107 |       if (currentFrame !== frame) {
108 |         // creamos el id del nombre del archivo
109 |         updateImage(frame)
110 |         currentFrame = frame
111 |       }
112 |     });
113 |   </script>
114 | </head>
115 | 
116 | <body>
117 |   <main>
118 |     <header>
119 |       <img src="/logo.png" alt="Ichiban - Your Way to Freedom" />
120 |     </header>
121 |   </main>
122 | </body>
123 | 
124 | </html>


--------------------------------------------------------------------------------
/web/public/projects/12-moto-scroll/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/12-moto-scroll/logo.png


--------------------------------------------------------------------------------
/web/public/projects/12.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/projects/12.webp


--------------------------------------------------------------------------------
/web/public/readme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/midudev/javascript-100-proyectos/c0027856d9263eede488d4263b5beb197a34a530/web/public/readme.jpg


--------------------------------------------------------------------------------
/web/scripts/copy-projects.js:
--------------------------------------------------------------------------------
 1 | import fs from 'node:fs/promises'
 2 | 
 3 | const files = await fs.readdir('../')
 4 | 
 5 | const projects = files.filter(file => /^[0-9]/.test(file))
 6 | 
 7 | await Promise.all(
 8 |   projects.map(
 9 |     project => fs.cp(`../${project}`, `public/projects/${project}`, { recursive: true })
10 |   )
11 | )
12 | 
13 | 


--------------------------------------------------------------------------------
/web/src/components/Footer.astro:
--------------------------------------------------------------------------------
 1 | <footer class="flex place-content-center">
 2 |   <div class="container text-center mt-8 p-10">
 3 |     <div class="flex flex-col items-center">
 4 |       <div class="flex flex-col sm:flex-row items-center gap-3 sm:gap-1 mt-4 mb-4">
 5 |         <span class="opacity-55 text-[0.8125rem]/6">Una iniciativa de</span><a
 6 |           class="px-1 rounded-3xl hover:scale-110 transition"
 7 |           href="https://midu.dev"
 8 |           target="_blank"
 9 |           rel="noreferrer"
10 |           title="Ir a la página de midudev"
11 |           ><img
12 |             alt="Logo de midudev"
13 |             src="https://midu.dev/logo.png"
14 |             width="92"
15 |             height="28"
16 |             loading="lazy"
17 |           /></a
18 |         >
19 |       </div>
20 |     </div>
21 |     <div class="flex gap-2 place-content-center">
22 |       <p class="flex flex-col sm:flex-row items-center sm:items-baseline gap-3 sm:gap-1 text-[0.8125rem]/6 text-gray-500">
23 |         Sígueme en
24 |         <a
25 |           class="group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-black/30 transition gap-x-0.5 hover:text-purple-500 hover:scale-110"
26 |           href="https://twitch.tv/midudev"
27 |           ><svg
28 |             class="flex-none h-6 w-6 text-purple-600"
29 |             viewBox="0 0 16 16"
30 |             xmlns="http://www.w3.org/2000/svg"
31 |             fill="none"
32 |             ><g fill="currentColor"
33 |               ><path
34 |                 d="M4.5 1L2 3.5v9h3V15l2.5-2.5h2L14 8V1H4.5zM13 7.5l-2 2H9l-1.75 1.75V9.5H5V2h8v5.5z"
35 |               ></path><path d="M11.5 3.75h-1v3h1v-3zM8.75 3.75h-1v3h1v-3z"
36 |               ></path></g
37 |             ></svg
38 |           ><span class="self-baseline text-black">twitch.tv/midudev</span></a
39 |         ><a
40 |           class="group relative isolate flex items-center rounded-lg px-2 py-0.5 text-[0.8125rem]/6 font-medium text-black/30 transition hover:text-sky-300 gap-x-0.5 hover:scale-110"
41 |           href="https://twitter.com/midudev"
42 |           ><svg
43 |             class="text-sky-300 size-6"
44 |             viewBox="0 0 16 16"
45 |             aria-hidden="true"
46 |             fill="currentColor"
47 |             class="flex-none h-6 w-6"
48 |             ><path
49 |               d="M5.526 13.502c5.032 0 7.784-4.168 7.784-7.783 0-.119 0-.237-.008-.353a5.566 5.566 0 0 0 1.364-1.418 5.46 5.46 0 0 1-1.571.431c.571-.342.998-.88 1.203-1.513a5.483 5.483 0 0 1-1.737.664 2.738 2.738 0 0 0-4.662 2.495 7.767 7.767 0 0 1-5.638-2.858 2.737 2.737 0 0 0 .847 3.651 2.715 2.715 0 0 1-1.242-.341v.035a2.737 2.737 0 0 0 2.195 2.681 2.73 2.73 0 0 1-1.235.047 2.739 2.739 0 0 0 2.556 1.9 5.49 5.49 0 0 1-4.049 1.133A7.744 7.744 0 0 0 5.526 13.5"
50 |             ></path></svg
51 |           ><span class="self-baseline text-black">@midudev</span></a
52 |         >
53 |       </p>
54 |     </div>
55 |   </div>
56 | </footer>
57 | 
58 | <img
59 |   class="w-1 h-1 opacity-0"
60 |   src="https://librecounter.org/counter.svg"
61 |   referrerpolicy="unsafe-url"
62 |   alt="librecounter"
63 | />
64 | 


--------------------------------------------------------------------------------
/web/src/components/GitHubStar.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const response = await fetch(
 3 |   "https://api.github.com/repos/midudev/javascript-100-proyectos"
 4 | )
 5 | 
 6 | const data = await response.json()
 7 | 
 8 | const starCounter = data.stargazers_count
 9 | ---
10 | 
11 | <div
12 |   class="absolute left-0 right-0 md:top-4 md:mr-4 md:justify-end mx-auto w-full flex justify-center"
13 | >
14 |   <a
15 |     class="flex hover:scale-105 group transition"
16 |     href="https://github.com/midudev/javascript-100-proyectos"
17 |     target="_blank"
18 |     rel="noopener noreferrer"
19 |   >
20 |     <div
21 |       class="flex h-8 w-8 items-center justify-center space-x-2 rounded-md border"
22 |     >
23 |       <svg fill="currentColor" viewBox="0 0 24 24" class="h-5 w-5">
24 |         <path
25 |           d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
26 |         >
27 |         </path>
28 |       </svg>
29 |     </div>
30 | 
31 |     <div class="flex items-center">
32 |       <div
33 |         class="h-4 w-4 border-y-8 border-l-0 border-r-8 border-solid border-gray-100 border-y-transparent group-hover:border-x-yellow-200"
34 |       >
35 |       </div>
36 |       <div
37 |         class="overflow-hidden flex flex-col h-8 items-center rounded-md bg-gray-100 px-4 font-medium text-xs justify-center group-hover:bg-yellow-200 transition w-36 relative"
38 |       >
39 |         <span class="absolute group-hover:animate-fade-out-up"
40 |           >{`${starCounter} ⭐️ en GitHub`}</span
41 |         >
42 |         <span
43 |           class="absolute opacity-0 -translate-y-5 group-hover:animate-fade-in-up"
44 |           >¡Deja tu estrella!</span
45 |         >
46 |       </div>
47 |     </div>
48 |   </a>
49 | </div>
50 | 


--------------------------------------------------------------------------------
/web/src/components/Header.astro:
--------------------------------------------------------------------------------
 1 | <header
 2 |   class="flex justify-center flex-col max-w-xl mx-auto items-center pt-12"
 3 | >
 4 |   <h1 class="font-bold items-center mb-8 mt-4 flex gap-4 animate-fade-in-up">
 5 |     <span class="flex flex-col text-center gap-3 sm:gap-0">
 6 |       <span
 7 |         class="tracking-tighter text-7xl px-1 bg-clip-text inline-block text-transparent bg-gradient-to-r from-slate-400 to-slate-600 sm:text-9xl"
 8 |         >100</span
 9 |       >
10 |       <span class="tracking-tighter text-slate-800 text-[32px] sm:text-[48px] -mt-8"
11 |         >proyectos</span
12 |       >
13 |     </span>
14 | 
15 |     <span class="rotate-6">
16 |       <svg
17 |         class="rounded"
18 |         width="128"
19 |         height="128"
20 |         xmlns="http://www.w3.org/2000/svg"
21 |         viewBox="0 0 630 630"
22 |       >
23 |         <rect width="630" height="630" fill="#f7df1e"></rect>
24 |         <path
25 |           d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"
26 |         ></path>
27 |       </svg>
28 |     </span>
29 |   </h1>
30 | </header>
31 | 


--------------------------------------------------------------------------------
/web/src/components/Hero.astro:
--------------------------------------------------------------------------------
 1 | <section class="flex flex-col max-w-3xl mx-auto mb-12 gap-12">
 2 |   <article class="flex flex-col items-center justify-center gap-10 md:flex-row">
 3 |     <div
 4 |       class="[&>p]:mb-4 [&>p>strong]:text-black [&>p>strong]:bg-yellow-300 [&>p>strong]:font-normal [&>p>strong]:text-base text-black/80 [&>p>strong]:py-0.5 [&>p>strong]:px-1 [&>p>strong]:font-mono text-lg text-pretty order-2 md:order-1 leading-normal"
 5 |     >
 6 |       <p>
 7 |         ¡Hola, soy <strong>midudev</strong>! Mi objetivo es mejorar la
 8 |         <strong>empleabilidad</strong> de la comunidad de Programación Hispana y
 9 |         el acceso a contenido de calidad sobre <strong>Desarrollo Web</strong>.
10 |       </p>
11 |       <footer class="flex flex-wrap gap-4 items-center">
12 |         <a
13 |           target="_blank"
14 |           rel="noopener"
15 |           href="https://youtube.com/midulive?sub_confirmation=1"
16 |           class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black bg-white transition border border-[#c4302b] rounded-lg md:px-4 md:py-2 hover:bg-[#ffc8c6] md:text-sm"
17 |           ><svg
18 |             class="w-6 h-6 mr-2"
19 |             xmlns="http://www.w3.org/2000/svg"
20 |             viewBox="0 0 28.57 20"
21 |             ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.57 20"
22 |               ><path
23 |                 fill="red"
24 |                 d="M27.9727 3.12324C27.6435 1.89323 26.6768.926623 25.4468.597366 23.2197 2.2e-7 14.285 0 14.285 0S5.35042 2.2e-7 3.12323.597366C1.89323.926623.926623 1.89323.597366 3.12324 2.2e-7 5.35042 0 10 0 10s2.2e-7 4.6496.597366 6.8768c.329257 1.23 1.295864 2.1966 2.525864 2.5258C5.35042 20 14.285 20 14.285 20s8.9347 0 11.1618-.5974c1.23-.3292 2.1967-1.2958 2.5259-2.5258.5974-2.2272.5974-6.8768.5974-6.8768s-.0024-4.64958-.5974-6.87676Z"
25 |               ></path><path
26 |                 fill="#fff"
27 |                 d="m11.4253 14.2854 7.4224-4.285-7.4224-4.28507v8.57007Z"
28 |               ></path></svg
29 |             ></svg
30 |           >Sígueme en YouTube</a
31 |         >
32 | 
33 |         <a
34 |           href="https://twitch.tv/midudev"
35 |           target="_blank"
36 |           rel="noopener"
37 |           class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black transition bg-white rounded-lg md:px-4 md:py-2 hover:bg-[#d1b9ff] md:text-sm border border-[#874af6]"
38 |         >
39 |           <svg
40 |             class="w-6 h-6 mr-1"
41 |             xmlns="http://www.w3.org/2000/svg"
42 |             width="118"
43 |             height="138"
44 |             viewBox="0 0 118 138"
45 |             ><g fill="none" fill-rule="evenodd"
46 |               ><path
47 |                 fill="#FFF"
48 |                 d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
49 |               ></path><path
50 |                 fill="#9146FF"
51 |                 d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
52 |               ></path></g
53 |             ></svg
54 |           >Sígueme en Twitch</a
55 |         >
56 |         
57 |         <a
58 |             href="https://discord.gg/midudev"
59 |             target="_blank"
60 |             rel="noopener"
61 |             class="inline-flex items-center justify-center px-2 py-1 text-xs font-semibold text-center text-black transition bg-white rounded-lg md:px-4 md:py-2 hover:bg-[#5865F2]/20 md:text-sm border border-[#5865F2]"
62 |           >
63 |           <svg
64 |           class="w-6 h-6 mr-1"
65 |           xmlns="http://www.w3.org/2000/svg"
66 |           width="256"
67 |           height="256"
68 |           viewBox="0 0 256 256">
69 |           <path fill="#5865F2" d="M216.856339 16.5966031C200.285002 8.84328665 182.566144 3.2084988 164.041564 0c-2.275041 4.11318106-4.93294 9.64549908-6.765465 14.0464379-19.692104-2.9614483-39.203132-2.9614483-58.5330827 0C96.9108417 9.64549908 94.1925838 4.11318106 91.8971895 0 73.3526068 3.2084988 55.6133949 8.86399117 39.0420583 16.6376612 5.61752293 67.146514-3.4433191 116.400813 1.08711069 164.955721c22.16890891 16.555194 43.65325271 26.611976 64.77502181 33.192855 5.2150826-7.17745 9.8662303-14.807241 13.8730814-22.848315-7.6311949-2.899686-14.9402415-6.478059-21.8464273-10.632298 1.8321746-1.357374 3.6243438-2.776511 5.3558032-4.236706 42.1228202 19.70193 87.8903382 19.70193 129.5099332 0 1.751813 1.460195 3.543631 2.879332 5.355803 4.236706-6.926539 4.174593-14.255589 7.752966-21.886784 10.653002 4.006851 8.02037 8.637996 15.670866 13.873082 22.847965 21.142122-6.580879 42.646399-16.637311 64.815325-33.213209 5.315798-56.28752-9.080862-105.0894778-38.05561-148.3591179ZM85.4738752 135.09489c-12.6448471 0-23.0146535-11.804735-23.0146535-26.179989 0-14.3752538 10.1483733-26.2003423 23.0146535-26.2003423 12.8666312 0 23.2360868 11.804384 23.0146538 26.2003423.020002 14.375254-10.1480226 26.179989-23.0146538 26.179989Zm85.0513618 0c-12.644847 0-23.014653-11.804735-23.014653-26.179989 0-14.3752538 10.148022-26.2003423 23.014653-26.2003423 12.866281 0 23.236087 11.804384 23.014654 26.2003423 0 14.375254-10.148373 26.179989-23.014654 26.179989Z"/>
70 |           </svg>
71 |           Entrar a la comunidad de Discord</a
72 |         >
73 |       </footer>
74 |     </div>
75 |     <img
76 |       width="200"
77 |       height="200"
78 |       src="/me.webp"
79 |       alt="Miguel Ángel"
80 |       class="order-1 object-cover w-52 h-full p-1 bg-white md:order-2 rotate-3 lg:p-2 aspect-square rounded-2xl dark:bg-yellow-500/5"
81 |       style="object-position: center"
82 |     />
83 |   </article>
84 | </section>
85 | 


--------------------------------------------------------------------------------
/web/src/components/InfoProject.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | const { info } = Astro.props
 3 | const { theme = {} } = info
 4 | const { isDark = false } = theme
 5 | ---
 6 | 
 7 | <div class="hidden sm:block absolute left-4 bottom-4 px-8 py-1 rounded-lg">
 8 |   <h1 class="font-bold mt-4 animate-fade-in-up">
 9 |     <a
10 |       class="text-xs items-center flex gap-2 hover:scale-110 transition"
11 |       href="/"
12 |     >
13 |       <div class="flex flex-col text-center leading-none">
14 |         <span
15 |           class:list={[
16 |             {
17 |               "from-slate-400 to-slate-600": !isDark,
18 |               "from-slate-100 via-slate-400 to-slate-500": isDark,
19 |             },
20 |             "tracking-tighter text-4xl px-1 bg-clip-text inline-block text-transparent bg-gradient-to-r",
21 |           ]}>100</span
22 |         >
23 |         <span
24 |           class:list={[
25 |             isDark ? "text-white/80" : "text-black/80",
26 |             "tracking-tighter text-slate-800 text-[14px]",
27 |           ]}>proyectos</span
28 |         >
29 |       </div>
30 | 
31 |       <span class="rotate-6">
32 |         <svg class="rounded" width="52" height="52" viewBox="0 0 630 630">
33 |           <rect width="630" height="630" fill="#f7df1e"></rect>
34 |           <path
35 |             d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"
36 |           ></path>
37 |         </svg>
38 |       </span>
39 |     </a>
40 |   </h1>
41 |   <h2
42 |     class:list={[
43 |       isDark ? "text-yellow-400" : "text-yellow-600",
44 |       "font-semibold animate-fade-in animate-delay-300 mt-2 text-base text-center tracking-tighter",
45 |     ]}
46 |   >
47 |     #{info.number} - {info.title}
48 |   </h2>
49 |   <a
50 |     class:list={[
51 |       "text-xs animate-fade-in animate-delay-800 hover:underline",
52 |       isDark ? "text-white/90" : "text-black/90",
53 |     ]}
54 |     href="/">← Volver a los proyectos</a
55 |   >
56 | </div>
57 | 


--------------------------------------------------------------------------------
/web/src/components/Projects.astro:
--------------------------------------------------------------------------------
  1 | ---
  2 | import { PROJECTS } from "../consts"
  3 | 
  4 | const finalProjects = PROJECTS.filter((project) => !project.hidden)
  5 |   .slice()
  6 |   .reverse()
  7 | ---
  8 | 
  9 | <div
 10 |   class="grid gap-8 mb-6 lg:mb-16 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto"
 11 | >
 12 |   <article
 13 |     class="min-h-60 relative items-center text-black rounded-lg bg-purple-50"
 14 |   >
 15 |     <a
 16 |       href="https://twitch.tv/midudev"
 17 |       target="_blank"
 18 |       rel="noopener noreferrer"
 19 |       class="group hover:scale-110 transition flex justify-center flex-col h-full items-center font-semibold text-purple-700 text-center text-xl"
 20 |     >
 21 |       <svg
 22 |         class="w-16 h-16 mb-2"
 23 |         xmlns="http://www.w3.org/2000/svg"
 24 |         width="118"
 25 |         height="138"
 26 |         viewBox="0 0 118 138"
 27 |         ><g fill="none" fill-rule="evenodd"
 28 |           ><path
 29 |             fill="#FFF"
 30 |             d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
 31 |           ></path><path
 32 |             fill="#9146FF"
 33 |             d="M117.605 0v68.605l-44.102 44.099H53.904l-24.503 24.503v-24.503H0V24.502L24.5 0h93.105Zm-9.8 9.801H29.401v73.503h22.051v17.15l17.153-17.15h19.601l19.599-19.601V9.801ZM93.1042 26.9518v29.4h-9.8v-29.4h9.8Zm-26.951 0v29.4h-9.8v-29.4h9.8Z"
 34 |           ></path></g
 35 |         ></svg
 36 |       >
 37 |       Próximamente en Twitch<br />
 38 |       siguiente proyecto...
 39 |     </a>
 40 |   </article>
 41 |   {
 42 |     finalProjects.map((project, reversedIndex) => {
 43 |       const index = finalProjects.length - reversedIndex - 1
 44 |       const num = `${index + 1}`.padStart(2, "0")
 45 | 
 46 |       return (
 47 |         <article class="relative items-center text-black rounded-lg">
 48 |           <a
 49 |             href={`/${project.slug}`}
 50 |             class="group hover:scale-110 block transition"
 51 |           >
 52 |             <span class="group-hover:scale-[2] transition-all group-hover:top-4 group-hover:left-6 opacity-70 group-hover:opacity-100 absolute top-2 left-2 -rotate-12 text-2xl font-bold">
 53 |               #{num}
 54 |             </span>
 55 |             <img
 56 |               class="w-full rounded-lg overflow-hidden object-cover aspect-video"
 57 |               src={`./projects/${num}.webp`}
 58 |               alt={`Captura de pantalla del proyecto ${project.title}`}
 59 |             />
 60 |           </a>
 61 |           <div class="p-5">
 62 |             <h2 class="text-4xl font-bold tracking-tight text-gray-900">
 63 |               <a
 64 |                 href={`/${project.slug}`}
 65 |                 class="hover:text-yellow-500 transition"
 66 |               >
 67 |                 {project.title}
 68 |               </a>
 69 |             </h2>
 70 |             <p class="mt-3 mb-4 font-light text-gray-800">
 71 |               {project.description}
 72 |             </p>
 73 |             <ul class="inline-flex flex-wrap gap-2">
 74 |               {project.learnings.map((learning) => (
 75 |                 <li class="text-xs font-light text-gray-600 bg-gray-100 px-2 py-1 rounded-full">
 76 |                   {learning}
 77 |                 </li>
 78 |               ))}
 79 |             </ul>
 80 |             <ul class="flex flex-wrap gap-2 mt-4">
 81 |               <li>
 82 |                 <a
 83 |                   href={`https://github.com/midudev/javascript-100-proyectos/tree/main/${project.slug}`}
 84 |                   target="_blank"
 85 |                   rel="noopener noreferrer"
 86 |                   class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-black bg-white transition border border-black/60 rounded-lg hover:bg-black/10 md:text-sm"
 87 |                 >
 88 |                   <svg
 89 |                     class="w-5 h-5 mr-1"
 90 |                     fill="currentColor"
 91 |                     viewBox="0 0 24 24"
 92 |                     aria-hidden="true"
 93 |                   >
 94 |                     <path
 95 |                       fill-rule="evenodd"
 96 |                       d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
 97 |                       clip-rule="evenodd"
 98 |                     />
 99 |                   </svg>
100 |                   Código
101 |                 </a>
102 |               </li>
103 |               <li>
104 |                 <a
105 |                   href={`/${project.slug}`}
106 |                   target="_blank"
107 |                   rel="noopener noreferrer"
108 |                   class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-yellow-600 bg-white transition border border-yellow-600/60 rounded-lg hover:bg-yellow-500/20 md:text-sm"
109 |                 >
110 |                   <svg
111 |                     xmlns="http://www.w3.org/2000/svg"
112 |                     fill="none"
113 |                     viewBox="0 0 24 24"
114 |                     stroke-width="1.5"
115 |                     stroke="currentColor"
116 |                     class="w-5 h-5 mr-1"
117 |                   >
118 |                     <path
119 |                       stroke-linecap="round"
120 |                       stroke-linejoin="round"
121 |                       d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 0 1 3 12c0-1.605.42-3.113 1.157-4.418"
122 |                     />
123 |                   </svg>
124 |                   Demo
125 |                 </a>
126 |               </li>
127 |               {project.youtube != null && (
128 |                 <li>
129 |                   <a
130 |                     href={project.youtube}
131 |                     target="_blank"
132 |                     rel="noopener noreferrer"
133 |                     class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-red-700 bg-white transition border border-red-700/60 rounded-lg hover:bg-red-600/20 md:text-sm"
134 |                   >
135 |                     <svg
136 |                       class="w-5 h-5 mr-1"
137 |                       viewBox="0 0 256 180"
138 |                       width="256"
139 |                       height="180"
140 |                       xmlns="http://www.w3.org/2000/svg"
141 |                       preserveAspectRatio="xMidYMid"
142 |                     >
143 |                       <path
144 |                         d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134Z"
145 |                         fill="red"
146 |                       />
147 |                       <path
148 |                         fill="#FFF"
149 |                         d="m102.421 128.06 66.328-38.418-66.328-38.418z"
150 |                       />
151 |                     </svg>
152 |                     Vídeo
153 |                   </a>
154 |                 </li>
155 |               )}
156 |             </ul>
157 |           </div>
158 |         </article>
159 |       )
160 |     })
161 |   }
162 | </div>
163 | 


--------------------------------------------------------------------------------
/web/src/consts.js:
--------------------------------------------------------------------------------
  1 | export const PROJECTS = [
  2 |   {
  3 |     slug: "01-tinder-swipe",
  4 |     title: "Tinder Swipe",
  5 |     hidden: false,
  6 |     description:
  7 |       "Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript.",
  8 |     learnings: [
  9 |       "DOM",
 10 |       "Animaciones con gestos",
 11 |       "Eventos de mouse y touch",
 12 |       "Transiciones CSS",
 13 |     ],
 14 |     youtube: 'https://www.youtube.com/watch?v=u01WD_YNENY'
 15 |   },
 16 |   {
 17 |     slug: "02-arkanoid-game",
 18 |     title: "Arkanoid Game",
 19 |     description:
 20 |       "Juego mítico y clásico de Arkanoid para controlar con teclado",
 21 |     learnings: [
 22 |       "Dibujar en Canvas",
 23 |       "Eventos de teclado",
 24 |       "RequestAnimationFrame",
 25 |       "Sprites"
 26 |     ],
 27 |     youtube: 'https://www.youtube.com/watch?v=b6du6MvQmuQ'
 28 |   },
 29 |   {
 30 |     slug: "03-midu-typing-game",
 31 |     title: "Reto de Mecanografía",
 32 |     description: "Pon a prueba tus habilidades de mecanografía con este reto",
 33 |     learnings: [
 34 |       "DOM",
 35 |       "Eventos de teclado",
 36 |       "Manejo de clases",
 37 |       "Optimización selectores"
 38 |     ],
 39 |     theme: {
 40 |       isDark: true
 41 |     },
 42 |     youtube: 'https://www.youtube.com/watch?v=157qVlTelOg'
 43 |   },
 44 |   {
 45 |     slug: "04-chatgpt-local",
 46 |     title: "ChatGPT local",
 47 |     description: "Usa IA de forma local y gratis. 100% privacidad.",
 48 |     learnings: [
 49 |       "Web Workers",
 50 |       "IA",
 51 |       "ESModules"
 52 |     ],
 53 |     theme: {
 54 |       isDark: false
 55 |     },
 56 |     youtube: "https://www.youtube.com/watch?v=HvoiF1MCPGs"
 57 |   },
 58 |   {
 59 |     slug: "05-api-geo-ip",
 60 |     title: "Buscar info de IP",
 61 |     description: "Llama a una API para obtener información de cualquier IP y muestra la información en pantalla",
 62 |     learnings: [
 63 |       "Fetch API",
 64 |       "Formularios",
 65 |       "Asincronía"
 66 |     ],
 67 |     theme: {
 68 |       isDark: true
 69 |     },
 70 |     youtube: "https://www.youtube.com/watch?v=6AMKwVcpYTk"
 71 |   },
 72 |   {
 73 |     slug: "06-tetris-canvas",
 74 |     title: "Tetris en Canvas",
 75 |     description: "Resolvemos una prueba técnica que te propone crear el Tetris en 40 minutos",
 76 |     learnings: [
 77 |       "Canvas",
 78 |       "Eventos de teclado",
 79 |       "Lógica de programación"
 80 |     ],
 81 |     theme: {
 82 |       isDark: true
 83 |     },
 84 |     youtube: "https://www.youtube.com/watch?v=pNiyz0sl1no"
 85 |   },
 86 |   {
 87 |     slug: "07-tier-maker",
 88 |     title: "Tier Maker",
 89 |     description: "Arrastra y suelta las imágenes para crear tus propias listas de niveles",
 90 |     learnings: [
 91 |       "Drag & Drop",
 92 |       "Input de imágenes",
 93 |       "CSS Custom Properties"
 94 |     ],
 95 |     theme: {
 96 |       isDark: true
 97 |     },
 98 |     youtube: 'https://www.youtube.com/watch?v=LPzG0PnOzgA'
 99 |   },
100 |   {
101 |     slug: "08-excel-js",
102 |     title: "Hojas de cálculo",
103 |     description: "Crea tu propio Excel sin dependencias y funcional",
104 |     learnings: [
105 |       "Tablas",
106 |       "Eventos de Input: focus y blur",
107 |       "Eval"
108 |     ],
109 |     theme: {
110 |       isDark: false
111 |     },
112 |     youtube: 'https://www.youtube.com/watch?v=z5CRFM2SlUU'
113 |   },
114 |   {
115 |     slug: "09-paint-win-95",
116 |     title: "Paint con Canvas",
117 |     description: "Crea un editor de imágenes clásico con <canvas>",
118 |     learnings: [
119 |       "Grid Area",
120 |       "Canvas",
121 |       "EyeDropper API"
122 |     ],
123 |     theme: {
124 |       isDark: true
125 |     },
126 |     youtube: 'https://www.youtube.com/watch?v=-0UYMmplimA'
127 |   },
128 |   {
129 |     slug: "10-stack-game",
130 |     title: "Stack Game",
131 |     description: "Juego donde hay que apilar las piezas verticalmente",
132 |     learnings: [
133 |       "Canvas",
134 |       "Lógica de programación",
135 |       "Eventos de teclado"
136 |     ],
137 |     theme: {
138 |       isDark: true
139 |     },
140 |     youtube: 'https://www.youtube.com/watch?v=IEwL-TZBeqQ'
141 |   },
142 |   {
143 |     slug: "11-js-perf-benchmark",
144 |     title: "JS Perf Benchmark",
145 |     description: "App para revisar el rendimiento de tu código JavaScript",
146 |     learnings: [
147 |       "Web Workers",
148 |       "Eval",
149 |       "Promises"
150 |     ],
151 |     theme: {
152 |       isDark: true
153 |     },
154 |     youtube: 'https://www.youtube.com/watch?v=VuOcLnzhbDw'
155 |   },
156 |   {
157 |     slug: "12-moto-scroll",
158 |     title: "Animación por Scroll",
159 |     description: "Anima el fondo de una web a través del scroll",
160 |     learnings: [
161 |       "Scroll",
162 |       "Animaciones",
163 |       "Performance"
164 |     ],
165 |     theme: {
166 |       isDark: true
167 |     },
168 |     youtube: 'https://www.youtube.com/watch?v=8EA-WNFMYwI'
169 |   },
170 | ]


--------------------------------------------------------------------------------
/web/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference path="../.astro/types.d.ts" />
2 | /// <reference types="astro/client" />
3 | 


--------------------------------------------------------------------------------
/web/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { ViewTransitions } from "astro:transitions"
 3 | 
 4 | interface Props {
 5 |   title: string
 6 | }
 7 | 
 8 | const { title } = Astro.props
 9 | const description =
10 |   "Proyectos prácticos para aprender JavaScript con código fuente y vídeo. Totalmente gratis."
11 | ---
12 | 
13 | <!doctype html>
14 | <html lang="es">
15 |   <head>
16 |     <title>{title}</title>
17 |     <meta charset="UTF-8" />
18 |     <meta name="description" content={description} />
19 |     <meta name="author" content="Miguel Ángel Durán" />
20 |     <meta
21 |       name="keywords"
22 |       content="javascript, js, programación, desarrollo web"
23 |     />
24 |     <meta name="theme-color" content="#f7df1e" />
25 |     <meta name="twitter:card" content="summary_large_image" />
26 |     <meta name="twitter:creator" content="@midudev" />
27 |     <meta name="twitter:title" content={title} />
28 |     <meta name="twitter:description" content={description} />
29 |     <meta name="twitter:image" content="https://javascript100.dev/og.jpg" />
30 |     <meta property="og:title" content={title} />
31 |     <meta property="og:description" content={description} />
32 |     <meta property="og:image" content="https://javascript100.dev/og.jpg" />
33 |     <link rel="canonical" href="https://javascript100.dev" />
34 |     <meta name="viewport" content="width=device-width" />
35 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
36 |     <ViewTransitions />
37 |   </head>
38 |   <body>
39 |     <slot />
40 |     <style is:global>
41 |       html {
42 |         font-family: system-ui, sans-serif;
43 |       }
44 | 
45 |       code {
46 |         font-family:
47 |           Menlo,
48 |           Monaco,
49 |           Lucida Console,
50 |           Liberation Mono,
51 |           DejaVu Sans Mono,
52 |           Bitstream Vera Sans Mono,
53 |           Courier New,
54 |           monospace;
55 |       }
56 |     </style>
57 |   </body>
58 | </html>
59 | 


--------------------------------------------------------------------------------
/web/src/pages/[project].astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { PROJECTS } from "../consts"
 3 | import InfoProject from "../components/InfoProject.astro"
 4 | import Layout from "../layouts/Layout.astro"
 5 | 
 6 | export function getStaticPaths() {
 7 |   return PROJECTS.map((project) => {
 8 |     return {
 9 |       params: {
10 |         project: project.slug,
11 |       },
12 |     }
13 |   })
14 | }
15 | 
16 | const { project } = Astro.params
17 | const index = PROJECTS.findIndex((p) => p.slug === project)
18 | const info = PROJECTS[index]
19 | const number = `${index + 1}`.padStart(2, "0")
20 | ---
21 | 
22 | <Layout title={`Proyecto de JavaScript - ${number}: ${info.title}`}>
23 |   <iframe title={`${info.title}`}class="w-screen h-dvh" src={`/projects/${project}/index.html`}
24 |   ></iframe>
25 |   <InfoProject info={{ ...info, number }} />
26 | </Layout>
27 | 


--------------------------------------------------------------------------------
/web/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from "../layouts/Layout.astro"
 3 | import Header from "../components/Header.astro"
 4 | import Hero from "../components/Hero.astro"
 5 | import Projects from "../components/Projects.astro"
 6 | import Footer from "../components/Footer.astro"
 7 | import GitHubStar from "../components/GitHubStar.astro"
 8 | ---
 9 | 
10 | <Layout title="100 proyectos de JavaScript - por @midudev">
11 |   <main
12 |     class="pt-12 min-h-screen flex gap-y-20 flex-col justify-between px-8 relative"
13 |   >
14 |     <div
15 |       class="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f5f5f5,transparent_1px),linear-gradient(to_bottom,#f5f5f5,transparent_1px)] bg-[size:6rem_4rem]"
16 |     >
17 |       <div
18 |         class="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_500px_at_50%_200px,#fffdd0,transparent)]"
19 |       >
20 |       </div>
21 |     </div>
22 |     <GitHubStar />
23 |     <Header />
24 |     <Hero />
25 |     <Projects />
26 |     <Footer />
27 |   </main>
28 | </Layout>
29 | 


--------------------------------------------------------------------------------
/web/tailwind.config.mjs:
--------------------------------------------------------------------------------
 1 | import animations from '@midudev/tailwind-animations'
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | export default {
 5 | 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 6 | 	theme: {
 7 | 		extend: {},
 8 | 	},
 9 | 	plugins: [animations],
10 | }
11 | 


--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict"
3 | }


--------------------------------------------------------------------------------
/xx-dice/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="es">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Dado 3D</title>
  8 |   <style>
  9 |     body {
 10 |       display: flex;
 11 |       justify-content: center;
 12 |       align-items: center;
 13 |       height: 100vh;
 14 |       margin: 0;
 15 |       background-color: #282c34;
 16 |       color: white;
 17 |       font-family: Arial, sans-serif;
 18 |     }
 19 | 
 20 |     .scene {
 21 |       width: 200px;
 22 |       height: 200px;
 23 |       perspective: 600px;
 24 |     }
 25 | 
 26 |     .cube {
 27 |       width: 100%;
 28 |       height: 100%;
 29 |       position: relative;
 30 |       transform-style: preserve-3d;
 31 |       transform: rotateX(0deg) rotateY(0deg);
 32 |       transition: transform 1s;
 33 |     }
 34 | 
 35 |     .face {
 36 |       position: absolute;
 37 |       width: 200px;
 38 |       height: 200px;
 39 |       background-color: white;
 40 |       border: 2px solid #000;
 41 |       display: flex;
 42 |       justify-content: center;
 43 |       align-items: center;
 44 |       font-size: 50px;
 45 |       color: black;
 46 |     }
 47 | 
 48 |     .front {
 49 |       transform: rotateY(0deg) translateZ(100px);
 50 |     }
 51 | 
 52 |     .back {
 53 |       transform: rotateY(180deg) translateZ(100px);
 54 |     }
 55 | 
 56 |     .right {
 57 |       transform: rotateY(90deg) translateZ(100px);
 58 |     }
 59 | 
 60 |     .left {
 61 |       transform: rotateY(-90deg) translateZ(100px);
 62 |     }
 63 | 
 64 |     .top {
 65 |       transform: rotateX(90deg) translateZ(100px);
 66 |     }
 67 | 
 68 |     .bottom {
 69 |       transform: rotateX(-90deg) translateZ(100px);
 70 |     }
 71 | 
 72 |     button {
 73 |       margin-top: 20px;
 74 |       padding: 10px 20px;
 75 |       font-size: 16px;
 76 |       cursor: pointer;
 77 |     }
 78 |   </style>
 79 | 
 80 |   <script type="module">
 81 |     const button = document.querySelector('button')
 82 |     const cube = document.getElementById('cube');
 83 | 
 84 |     button.addEventListener('click', () => {
 85 |       const randomFace = Math.floor(Math.random() * 6) + 1;
 86 | 
 87 |       // Los ángulos de rotación para cada cara
 88 |       const rotations = {
 89 |         1: 'rotateX(0deg) rotateY(0deg)',
 90 |         2: 'rotateX(90deg) rotateY(0deg)',
 91 |         3: 'rotateX(0deg) rotateY(-90deg)',
 92 |         4: 'rotateX(0deg) rotateY(90deg)',
 93 |         5: 'rotateX(-90deg) rotateY(0deg)',
 94 |         6: 'rotateX(0deg) rotateY(180deg)',
 95 |       };
 96 | 
 97 |       let currentRotationX = Math.floor(Math.random() * 360);
 98 |       let currentRotationY = Math.floor(Math.random() * 360);
 99 | 
100 |       let rotationInterval = setInterval(() => {
101 |         currentRotationX += Math.floor(Math.random() * 20) + 10; // Aumenta rotación X
102 |         currentRotationY += Math.floor(Math.random() * 20) + 10; // Aumenta rotación Y
103 | 
104 |         cube.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`;
105 |       }, 100);
106 | 
107 |       // Detener rotación y aplicar la rotación final con desaceleración
108 |       setTimeout(() => {
109 |         clearInterval(rotationInterval);
110 | 
111 |         cube.style.transition = 'transform 1.5s cubic-bezier(0.25, 1, 0.5, 1)';
112 |         cube.style.transform = rotations[randomFace];
113 |       }, 1000); // La rotación dura 2 segundos antes de desacelerar y detenerse en la cara final
114 |     })
115 |   </script>
116 | </head>
117 | 
118 | <body>
119 |   <div class="scene">
120 |     <div id="cube" class="cube">
121 |       <div class="face front">1</div>
122 |       <div class="face back">6</div>
123 |       <div class="face right">3</div>
124 |       <div class="face left">4</div>
125 |       <div class="face top">5</div>
126 |       <div class="face bottom">2</div>
127 |     </div>
128 |   </div>
129 |   <button onclick="rollDice()">Lanzar Dado</button>
130 | </body>
131 | 
132 | </html>


--------------------------------------------------------------------------------