├── .gitignore
├── 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
├── LICENSE.md
├── README.md
└── web
    ├── README.md
    ├── astro.config.mjs
    ├── package.json
    ├── pnpm-lock.yaml
    ├── 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
        └── 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


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


--------------------------------------------------------------------------------
/01-tinder-swipe/index.html:
--------------------------------------------------------------------------------
  1 | <title>100 proyectos JS · 01 - Tinder Swipe</title>
  2 | <div class="shadow">
  3 | <main>
  4 |   <section>
  5 |     <div class="white-bkg"></div>
  6 |     <header>
  7 |       <img src="./tinder-logo.webp" alt="Tinder Logo" />
  8 |     </header>
  9 | 
 10 |     <div class="cards">
 11 |       <article>
 12 |         <img src="./photos/2.webp" alt="Álex, brown hair man, 25 years old" />
 13 |         <h2>Álex <span>25</span></h2>
 14 |         <div class="choice nope">NOPE</div>
 15 |         <div class="choice like">LIKE</div>
 16 |       </article>
 17 | 
 18 |       <article>
 19 |         <img src="./photos/1.webp" alt="Leila, redhead, 25 years old" />
 20 |         <h2>Leila <span>27</span></h2>
 21 |         <div class="choice nope">NOPE</div>
 22 |         <div class="choice like">LIKE</div>
 23 |       </article>
 24 | 
 25 |       <span>
 26 |         No hay más personas cerca de ti...<br />
 27 |         Vuelve a intentarlo más tarde
 28 |       </span>
 29 |     </div>
 30 | 
 31 |     <footer>
 32 |       <button class="is-undo" aria-label="undo"></button>
 33 |       <button class="is-remove is-big" aria-label="remove"></button>
 34 |       <button class="is-star" aria-label="star"></button>
 35 |       <button class="is-fav is-big" aria-label="fav"></button>
 36 |       <button class="is-zap" aria-label="zap"></button>
 37 |     </footer>
 38 |   </section>
 39 | </main>
 40 | </div>
 41 | <style>
 42 |   *,
 43 |   *::before,
 44 |   *::after {
 45 |     box-sizing: border-box;
 46 |     margin: 0;
 47 |     padding: 0;
 48 |   }
 49 | 
 50 |   body {
 51 |     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 52 |     display: grid;
 53 |     place-content: center;
 54 |     min-height: 100vh;
 55 |     overflow: hidden;
 56 |     user-select: none;
 57 |     background: #e5e5e5;
 58 |   }
 59 |   .white-bkg {
 60 |     position: absolute;
 61 |     background: #f6f6f6;
 62 |     inset: 0;
 63 |     z-index: -10;
 64 |   }
 65 |   .shadow{
 66 |     filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
 67 |   }
 68 |   main {
 69 |     background: url('./iphone.webp') no-repeat;
 70 |     background-size: contain;
 71 |     width: 320px;
 72 |     height: 640px;
 73 |     display: flex;
 74 |     position: relative;
 75 |   }
 76 | 
 77 |   section {
 78 |     width: 100%;
 79 |     border-radius: 32px;
 80 |     display: flex;
 81 |     gap: 24px;
 82 |     flex-direction: column;
 83 |     overflow: hidden;
 84 |     position: relative;
 85 |     padding: 16px 6px;
 86 |     margin: 24px;
 87 |   }
 88 | 
 89 |   header {
 90 |     display: flex;
 91 |     justify-content: start;
 92 |     padding-left: 1rem;
 93 | 
 94 |     & img {
 95 |       width: 24px;
 96 |       height: 24px;
 97 |     }
 98 |   }
 99 | 
100 |   footer {
101 |     display: grid;
102 |     grid-template-columns: repeat(5, 1fr);
103 |     gap: 12px;
104 |     padding: 0 24px;
105 |     justify-content: center;
106 |     align-items: center;
107 | 
108 |     & button {
109 |       background: url('./tinder-icons.webp') no-repeat;
110 |       background-position: 0px 0px;
111 |       background-size: 175px;
112 |       height: 32px;
113 |       width: 32px;
114 |       border-radius: 50%;
115 |       border: 0;
116 |       cursor: pointer;
117 |       transition: scale .3s ease;
118 | 
119 |       &:hover {
120 |         scale: 1.4;
121 |       }
122 | 
123 |       &.is-big {
124 |         background-size: 250px;
125 |         width: 48px;
126 |         height: 48px;
127 |       }
128 | 
129 |       &.is-undo {
130 |         background-position: -140px 0;
131 |       }
132 | 
133 |       &.is-remove {
134 |         background-position: -150px 0;
135 |       }
136 | 
137 |       &.is-fav {
138 |         background-position: -50px 0;
139 |       }
140 | 
141 |       &.is-star {
142 |         background-position: -70px 0px;
143 |       }
144 |     }
145 |   }
146 | 
147 |   .cards {
148 |     position: relative;
149 |     width: 100%;
150 |     height: 100%;
151 |     margin: 0 auto;
152 | 
153 |     &>span {
154 |       display: grid;
155 |       place-content: center;
156 |       color: #777;
157 |       font-size: 14px;
158 |       text-align: center;
159 |       height: 100%;
160 |       z-index: -1;
161 |     }
162 | 
163 |     & article {
164 |       border-radius: 8px;
165 |       box-shadow: 0 0 10px rgba(0, 0, 0, .3);
166 |       cursor: grab;
167 |       overflow: hidden;
168 |       position: absolute;
169 |       inset: 0;
170 |       width: 100%;
171 |       height: 100%;
172 |       z-index: 2;
173 | 
174 |       &.go-left {
175 |         transform: translateX(-150%) rotate(-30deg) !important;
176 |       }
177 | 
178 |       &.go-right {
179 |         transform: translateX(150%) rotate(30deg) !important;
180 |       }
181 | 
182 |       &.go-left,
183 |       &.go-right {
184 |         transition: transform .3s ease, rotate .3s ease;
185 |       }
186 | 
187 |       &.reset {
188 |         transition: transform .3s ease;
189 |         transform: translateX(0) !important;
190 |       }
191 | 
192 |       & .choice {
193 |         border-radius: 8px;
194 |         color: black;
195 |         border: 4px solid;
196 |         z-index: 9999;
197 |         position: absolute;
198 |         top: 32px;
199 |         right: 16px;
200 |         opacity: 0;
201 |         padding: 4px 8px;
202 |         font-size: 24px;
203 |         font-weight: bold;
204 |         text-shadow: 0 0 10px rgba(0, 0, 0, .3);
205 |         width: fit-content;
206 | 
207 |         &.nope {
208 |           border-color: #ff6e63;
209 |           color: #ff6e63;
210 |           transform: rotate(30deg);
211 |         }
212 | 
213 |         &.like {
214 |           border-color: #63ff68;
215 |           color: #63ff68;
216 |           left: 16px;
217 |           transform: rotate(-30deg);
218 |         }
219 |       }
220 | 
221 |       & img {
222 |         width: 100%;
223 |         height: 100%;
224 |         object-fit: cover;
225 |       }
226 | 
227 |       & h2 {
228 |         color: white;
229 |         position: absolute;
230 |         inset: 0;
231 |         display: flex;
232 |         align-items: flex-end;
233 |         height: 100%;
234 |         width: 100%;
235 |         padding: 16px;
236 |         z-index: 3;
237 |         background: linear-gradient(to top,
238 |             #00000088 20%,
239 |             transparent 40%);
240 |       }
241 | 
242 |       & span {
243 |         margin-left: 6px;
244 |         font-size: 18px;
245 |         line-height: 1.4;
246 |         font-weight: 400;
247 |       }
248 |     }
249 |   }
250 | </style>
251 | 
252 | <script>
253 |   const DECISION_THRESHOLD = 75
254 | 
255 |   let isAnimating = false
256 |   let pullDeltaX = 0 // distance from the card being dragged
257 | 
258 |   function startDrag(event) {
259 |     if (isAnimating) return
260 | 
261 |     // get the first article element
262 |     const actualCard = event.target.closest('article')
263 |     if (!actualCard) return
264 | 
265 |     // get initial position of mouse or finger
266 |     const startX = event.pageX ?? event.touches[0].pageX
267 | 
268 |     // listen the mouse and touch movements
269 |     document.addEventListener('mousemove', onMove)
270 |     document.addEventListener('mouseup', onEnd)
271 | 
272 |     document.addEventListener('touchmove', onMove, { passive: true })
273 |     document.addEventListener('touchend', onEnd, { passive: true })
274 | 
275 |     function onMove(event) {
276 |       // current position of mouse or finger
277 |       const currentX = event.pageX ?? event.touches[0].pageX
278 | 
279 |       // the distance between the initial and current position
280 |       pullDeltaX = currentX - startX
281 | 
282 |       // there is no distance traveled in X axis
283 |       if (pullDeltaX === 0) return
284 | 
285 |       // change the flag to indicate we are animating
286 |       isAnimating = true
287 | 
288 |       // calculate the rotation of the card using the distance
289 |       const deg = pullDeltaX / 14
290 | 
291 |       // apply the transformation to the card
292 |       actualCard.style.transform = `translateX(${pullDeltaX}px) rotate(${deg}deg)`
293 | 
294 |       // change the cursor to grabbing
295 |       actualCard.style.cursor = 'grabbing'
296 | 
297 |       // change opacity of the choice info
298 |       const opacity = Math.abs(pullDeltaX) / 100
299 |       const isRight = pullDeltaX > 0
300 | 
301 |       const choiceEl = isRight
302 |         ? actualCard.querySelector('.choice.like')
303 |         : actualCard.querySelector('.choice.nope')
304 | 
305 |       choiceEl.style.opacity = opacity
306 |     }
307 | 
308 |     function onEnd(event) {
309 |       // remove the event listeners
310 |       document.removeEventListener('mousemove', onMove)
311 |       document.removeEventListener('mouseup', onEnd)
312 | 
313 |       document.removeEventListener('touchmove', onMove)
314 |       document.removeEventListener('touchend', onEnd)
315 | 
316 |       // saber si el usuario tomo una decisión
317 |       const decisionMade = Math.abs(pullDeltaX) >= DECISION_THRESHOLD
318 | 
319 |       if (decisionMade) {
320 |         const goRight = pullDeltaX >= 0
321 | 
322 |         // add class according to the decision
323 |         actualCard.classList.add(goRight ? 'go-right' : 'go-left')
324 |         actualCard.addEventListener('transitionend', () => {
325 |           actualCard.remove()
326 |         })
327 |       } else {
328 |         actualCard.classList.add('reset')
329 |         actualCard.classList.remove('go-right', 'go-left')
330 | 
331 |         actualCard.querySelectorAll('.choice').forEach(choice => {
332 |           choice.style.opacity = 0
333 |         })
334 |       }
335 | 
336 |       // reset the variables
337 |       actualCard.addEventListener('transitionend', () => {
338 |         actualCard.removeAttribute('style')
339 |         actualCard.classList.remove('reset')
340 | 
341 |         pullDeltaX = 0
342 |         isAnimating = false
343 |       })
344 | 
345 |       // reset the choice info opacity
346 |       actualCard
347 |         .querySelectorAll(".choice")
348 |         .forEach((el) => (el.style.opacity = 0));
349 |     }
350 |   }
351 | 
352 |   document.addEventListener('mousedown', startDrag)
353 |   document.addEventListener('touchstart', startDrag, { passive: true })
354 | </script>
355 | 


--------------------------------------------------------------------------------
/01-tinder-swipe/iphone.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/01-tinder-swipe/iphone.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/photos/1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/01-tinder-swipe/photos/1.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/photos/2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/01-tinder-swipe/photos/2.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/tinder-icons.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/01-tinder-swipe/tinder-icons.webp


--------------------------------------------------------------------------------
/01-tinder-swipe/tinder-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/01-tinder-swipe/tinder-logo.webp


--------------------------------------------------------------------------------
/02-arkanoid-game/bkg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/02-arkanoid-game/bkg.png


--------------------------------------------------------------------------------
/02-arkanoid-game/bricks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/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 |   function drawBall() {
 91 |     ctx.beginPath(); // iniciar el trazado
 92 |     ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
 93 |     ctx.fillStyle = "#fff";
 94 |     ctx.fill();
 95 |     ctx.closePath(); // terminar el trazado
 96 |   }
 97 | 
 98 |   function drawPaddle() {
 99 |     ctx.drawImage(
100 |       $sprite, // imagen
101 |       29, // clipX: coordenadas de recorte
102 |       174, // clipY: coordenadas de recorte
103 |       paddleWidth, // el tamaño del recorte
104 |       paddleHeight, // tamaño del recorte
105 |       paddleX, // posición X del dibujo
106 |       paddleY, // posición Y del dibujo
107 |       paddleWidth, // ancho del dibujo
108 |       paddleHeight // alto del dibujo
109 |     );
110 |   }
111 | 
112 |   function drawBricks() {
113 |     for (let c = 0; c < brickColumnCount; c++) {
114 |       for (let r = 0; r < brickRowCount; r++) {
115 |         const currentBrick = bricks[c][r];
116 |         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
117 | 
118 |         const clipX = currentBrick.color * 32;
119 | 
120 |         ctx.drawImage(
121 |           $bricks,
122 |           clipX,
123 |           0,
124 |           brickWidth, // 31
125 |           brickHeight, // 14
126 |           currentBrick.x,
127 |           currentBrick.y,
128 |           brickWidth,
129 |           brickHeight
130 |         );
131 |       }
132 |     }
133 |   }
134 | 
135 |   function drawUI() {
136 |     ctx.fillText(`FPS: ${framesPerSec}`, 5, 10);
137 |   }
138 | 
139 |   function collisionDetection() {
140 |     for (let c = 0; c < brickColumnCount; c++) {
141 |       for (let r = 0; r < brickRowCount; r++) {
142 |         const currentBrick = bricks[c][r];
143 |         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
144 | 
145 |         const isBallSameXAsBrick =
146 |           x > currentBrick.x && x < currentBrick.x + brickWidth;
147 | 
148 |         const isBallSameYAsBrick =
149 |           y > currentBrick.y && y < currentBrick.y + brickHeight;
150 | 
151 |         if (isBallSameXAsBrick && isBallSameYAsBrick) {
152 |           dy = -dy;
153 |           currentBrick.status = BRICK_STATUS.DESTROYED;
154 |         }
155 |       }
156 |     }
157 |   }
158 | 
159 |   function ballMovement() {
160 |     // rebotar las pelotas en los laterales
161 |     if (
162 |       x + dx > canvas.width - ballRadius || // la pared derecha
163 |       x + dx < ballRadius // la pared izquierda
164 |     ) {
165 |       dx = -dx;
166 |     }
167 | 
168 |     // rebotar en la parte de arriba
169 |     if (y + dy < ballRadius) {
170 |       dy = -dy;
171 |     }
172 | 
173 |     // la pelota toca la pala
174 |     const isBallSameXAsPaddle = x > paddleX && x < paddleX + paddleWidth;
175 | 
176 |     const isBallTouchingPaddle =
177 |       y + dy > paddleY && y + dy < paddleY + paddleHeight;
178 | 
179 |     if (isBallSameXAsPaddle && isBallTouchingPaddle) {
180 |       dy = -dy; // cambiamos la dirección de la pelota
181 |     } else if (
182 |       // la pelota toca el suelo
183 |       y + dy > canvas.height - ballRadius ||
184 |       y + dy > paddleY + paddleHeight
185 |     ) {
186 |       console.log("Game Over");
187 |       document.location.reload();
188 |     }
189 | 
190 |     // mover la pelota
191 |     x += dx;
192 |     y += dy;
193 |   }
194 | 
195 |   function paddleMovement() {
196 |     if (rightPressed && paddleX < canvas.width - paddleWidth) {
197 |       paddleX += PADDLE_SENSITIVITY;
198 |     } else if (leftPressed && paddleX > 0) {
199 |       paddleX -= PADDLE_SENSITIVITY;
200 |     }
201 |   }
202 | 
203 |   function cleanCanvas() {
204 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
205 |   }
206 | 
207 |   function initEvents() {
208 |     document.addEventListener("keydown", keyDownHandler);
209 |     document.addEventListener("keyup", keyUpHandler);
210 | 
211 |     function keyDownHandler(event) {
212 |       const { key } = event;
213 |       if (
214 |         key === "Right" ||
215 |         key === "ArrowRight" ||
216 |         key.toLowerCase() === "d"
217 |       ) {
218 |         rightPressed = true;
219 |       } else if (
220 |         key === "Left" ||
221 |         key === "ArrowLeft" ||
222 |         key.toLowerCase() === "a"
223 |       ) {
224 |         leftPressed = true;
225 |       }
226 |     }
227 | 
228 |     function keyUpHandler(event) {
229 |       const { key } = event;
230 |       if (
231 |         key === "Right" ||
232 |         key === "ArrowRight" ||
233 |         key.toLowerCase() === "d"
234 |       ) {
235 |         rightPressed = false;
236 |       } else if (
237 |         key === "Left" ||
238 |         key === "ArrowLeft" ||
239 |         key.toLowerCase() === "a"
240 |       ) {
241 |         leftPressed = false;
242 |       }
243 |     }
244 |   }
245 | 
246 |   // a que velocidad de fps queremos que renderice nuestro juego
247 |   const fps = 60;
248 | 
249 |   let msPrev = window.performance.now();
250 |   let msFPSPrev = window.performance.now() + 1000;
251 |   const msPerFrame = 1000 / fps;
252 |   let frames = 0;
253 |   let framesPerSec = fps;
254 | 
255 |   function draw() {
256 |     window.requestAnimationFrame(draw);
257 | 
258 |     const msNow = window.performance.now();
259 |     const msPassed = msNow - msPrev;
260 | 
261 |     if (msPassed < msPerFrame) return;
262 | 
263 |     const excessTime = msPassed % msPerFrame;
264 |     msPrev = msNow - excessTime;
265 | 
266 |     frames++;
267 | 
268 |     if (msFPSPrev < msNow) {
269 |       msFPSPrev = window.performance.now() + 1000;
270 |       framesPerSec = frames;
271 |       frames = 0;
272 |     }
273 | 
274 |     // ... render code
275 |     cleanCanvas();
276 |     // hay que dibujar los elementos
277 |     drawBall();
278 |     drawPaddle();
279 |     drawBricks();
280 |     drawUI();
281 | 
282 |     // colisiones y movimientos
283 |     collisionDetection();
284 |     ballMovement();
285 |     paddleMovement();
286 |   }
287 | 
288 |   draw();
289 |   initEvents();
290 | </script>
291 | 


--------------------------------------------------------------------------------
/02-arkanoid-game/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/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 | ]


--------------------------------------------------------------------------------
/03-midu-typing-game/index.html:
--------------------------------------------------------------------------------
  1 | <title>Monkey Type Clone - Test your typing skills! ⌨️</title>
  2 | <style>
  3 |   :root {
  4 |     color-scheme: light dark;
  5 |     --green: #00b755;
  6 |     --yellow: #daaf38;
  7 |     --red: #ca4754;
  8 |     --black: #222;
  9 |     --gray: #999;
 10 |   }
 11 | 
 12 |   body {
 13 |     background: var(--black);
 14 |     font-family: Menlo, monospace;
 15 |     display: grid;
 16 |     padding: 32px;
 17 |     justify-content: center;
 18 |     margin-top: 32px;
 19 |     padding: 16px;
 20 |   }
 21 | 
 22 |   section {
 23 |     padding: 16px;
 24 |     display: flex;
 25 |     flex-direction: column;
 26 |     gap: 4px;
 27 |     max-width: 500px;
 28 |   }
 29 | 
 30 |   time {
 31 |     color: var(--yellow)
 32 |   }
 33 | 
 34 |   input {
 35 |     z-index: -999;
 36 |     position: absolute;
 37 |     top: 0;
 38 |     left: 0;
 39 |     pointer-events: none;
 40 |     opacity: 0;
 41 |   }
 42 | 
 43 |   p {
 44 |     display: flex;
 45 |     flex-wrap: wrap;
 46 |     gap: 3px 8px;
 47 |     margin: 0;
 48 |   }
 49 | 
 50 |   letter {
 51 |     color: var(--gray);
 52 |     position: relative;
 53 | 
 54 |     &.active::before {
 55 |       content: '|';
 56 |       color: var(--yellow);
 57 |       font-size: 14px;
 58 |       position: absolute;
 59 |       left: -65%;
 60 |       animation: 1s blink infinite ease-in-out;
 61 |     }
 62 | 
 63 |     &.active.is-last::before {
 64 |       left: 65%;
 65 |     }
 66 | 
 67 |     &.correct {
 68 |       color: var(--green);
 69 |     }
 70 | 
 71 |     &.incorrect {
 72 |       color: var(--red);
 73 |     }
 74 |   }
 75 | 
 76 |   word {
 77 |     border-bottom: 1.5px solid transparent;
 78 |     transition: border-color 0.3s ease-in-out;
 79 | 
 80 |     &.marked {
 81 |       border-color: var(--red);
 82 |     }
 83 |   }
 84 | 
 85 |   @keyframes blink {
 86 | 
 87 |     0%,
 88 |     25% {
 89 |       opacity: 1;
 90 |     }
 91 | 
 92 |     75% {
 93 |       opacity: 0;
 94 |     }
 95 |   }
 96 | 
 97 |   #game {
 98 |     display: flex;
 99 |   }
100 | 
101 |   #results {
102 |     display: none;
103 |   }
104 | 
105 |   h2 {
106 |     font-weight: 400;
107 |     opacity: .4;
108 |     margin: 0;
109 |     font-size: 16px;
110 |   }
111 | 
112 |   h3 {
113 |     font-weight: 400;
114 |     margin: 0;
115 |     font-size: 24px;
116 |     color: var(--yellow);
117 |   }
118 | 
119 |   button {
120 |     background: transparent;
121 |     border: 0;
122 |     margin-top: 32px;
123 |     padding: 8px;
124 |     opacity: .4;
125 |     display: inline-block;
126 |     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
127 |     cursor: pointer;
128 |     border-radius: 16px;
129 | 
130 |     &:hover {
131 |       background: #444;
132 |       opacity: 1;
133 |       scale: 110%;
134 |     }
135 |   }
136 | </style>
137 | 
138 | <body>
139 |   <main>
140 |     <section id="game">
141 |       <time></time>
142 |       <p></p>
143 |       <input autofocus>
144 |     </section>
145 |     <section id="results">
146 |       <h2>wpm</h2>
147 |       <h3 id="results-wpm"></h3>
148 | 
149 |       <h2>accuracy</h2>
150 |       <h3 id="results-accuracy"></h3>
151 | 
152 |       <button id="reload-button">
153 |         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
154 |           stroke-linecap="round" stroke-linejoin="round">
155 |           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
156 |           <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747" />
157 |           <path d="M20 4v5h-5" />
158 |         </svg>
159 |       </button>
160 |     </section>
161 |   </main>
162 | </body>
163 | 
164 | <script type="module">
165 |   import { words as INITIAL_WORDS } from './data.js'
166 | 
167 |   const $time = document.querySelector('time');
168 |   const $paragraph = document.querySelector('p');
169 |   const $input = document.querySelector('input');
170 |   const $game = document.querySelector('#game')
171 |   const $results = document.querySelector('#results')
172 |   const $wpm = $results.querySelector('#results-wpm')
173 |   const $accuracy = $results.querySelector('#results-accuracy')
174 |   const $button = document.querySelector('#reload-button')
175 | 
176 |   const INITIAL_TIME = 30;
177 | 
178 |   let words = []
179 |   let currentTime = INITIAL_TIME
180 |   let playing
181 | 
182 |   initGame()
183 |   initEvents()
184 | 
185 |   function initGame() {
186 |     $game.style.display = 'flex'
187 |     $results.style.display = 'none'
188 |     $input.value = ''
189 | 
190 |     playing = false
191 | 
192 |     words = INITIAL_WORDS.toSorted(
193 |       () => Math.random() - 0.5
194 |     ).slice(0, 50)
195 |     currentTime = INITIAL_TIME
196 | 
197 |     $time.textContent = currentTime
198 | 
199 |     $paragraph.innerHTML = words.map((word, index) => {
200 |       const letters = word.split('')
201 | 
202 |       return `<word>
203 |         ${letters
204 |           .map(letter => `<letter>${letter}</letter>`)
205 |           .join('')
206 |         }
207 |       </word>
208 |       `
209 |     }).join('')
210 | 
211 |     const $firstWord = $paragraph.querySelector('word')
212 |     $firstWord.classList.add('active')
213 |     $firstWord.querySelector('letter').classList.add('active')
214 |   }
215 | 
216 |   function initEvents() {
217 |     document.addEventListener('keydown', () => {
218 |       $input.focus()
219 |       if (!playing) {
220 |         playing = true
221 |         const intervalId = setInterval(() => {
222 |           currentTime--
223 |           $time.textContent = currentTime
224 | 
225 |           if (currentTime === 0) {
226 |             clearInterval(intervalId)
227 |             gameOver()
228 |           }
229 |         }, 1000)
230 |       }
231 |     })
232 |     $input.addEventListener('keydown', onKeyDown)
233 |     $input.addEventListener('keyup', onKeyUp)
234 |     $button.addEventListener('click', initGame)
235 | 
236 |   }
237 | 
238 |   function onKeyDown(event) {
239 |     const $currentWord = $paragraph.querySelector('word.active')
240 |     const $currentLetter = $currentWord.querySelector('letter.active')
241 | 
242 |     const { key } = event
243 |     if (key === ' ') {
244 |       event.preventDefault()
245 | 
246 |       const $nextWord = $currentWord.nextElementSibling
247 |       const $nextLetter = $nextWord.querySelector('letter')
248 | 
249 |       $currentWord.classList.remove('active', 'marked')
250 |       $currentLetter.classList.remove('active')
251 | 
252 |       $nextWord.classList.add('active')
253 |       $nextLetter.classList.add('active')
254 | 
255 |       $input.value = ''
256 | 
257 |       const hasMissedLetters = $currentWord
258 |         .querySelectorAll('letter:not(.correct)').length > 0
259 | 
260 |       const classToAdd = hasMissedLetters ? 'marked' : 'correct'
261 |       $currentWord.classList.add(classToAdd)
262 | 
263 |       return
264 |     }
265 | 
266 |     if (key === 'Backspace') {
267 |       const $prevWord = $currentWord.previousElementSibling
268 |       const $prevLetter = $currentLetter.previousElementSibling
269 | 
270 |       if (!$prevWord && !$prevLetter) {
271 |         event.preventDefault()
272 |         return
273 |       }
274 | 
275 |       const $wordMarked = $paragraph.querySelector('word.marked')
276 |       if ($wordMarked && !$prevLetter) {
277 |         event.preventDefault()
278 |         $prevWord.classList.remove('marked')
279 |         $prevWord.classList.add('active')
280 | 
281 |         const $letterToGo = $prevWord.querySelector('letter:last-child')
282 | 
283 |         $currentLetter.classList.remove('active')
284 |         $letterToGo.classList.add('active')
285 | 
286 |         $input.value = [
287 |           ...$prevWord.querySelectorAll('letter.correct, letter.incorrect')
288 |         ].map($el => {
289 |           return $el.classList.contains('correct') ? $el.innerText : '*'
290 |         })
291 |           .join('')
292 |       }
293 |     }
294 |   }
295 | 
296 |   function onKeyUp() {
297 |     // recuperamos los elementos actuals
298 |     const $currentWord = $paragraph.querySelector('word.active')
299 |     const $currentLetter = $currentWord.querySelector('letter.active')
300 | 
301 |     const currentWord = $currentWord.innerText.trim()
302 |     $input.maxLength = currentWord.length
303 | 
304 |     const $allLetters = $currentWord.querySelectorAll('letter')
305 | 
306 |     $allLetters.forEach($letter => $letter.classList.remove('correct', 'incorrect'))
307 | 
308 |     $input.value.split('').forEach((char, index) => {
309 |       const $letter = $allLetters[index]
310 |       const letterToCheck = currentWord[index]
311 | 
312 |       const isCorrect = char === letterToCheck
313 |       const letterClass = isCorrect ? 'correct' : 'incorrect'
314 |       $letter.classList.add(letterClass)
315 |     })
316 | 
317 |     $currentLetter.classList.remove('active', 'is-last')
318 |     const inputLength = $input.value.length
319 |     const $nextActiveLetter = $allLetters[inputLength]
320 | 
321 |     if ($nextActiveLetter) {
322 |       $nextActiveLetter.classList.add('active')
323 |     } else {
324 |       $currentLetter.classList.add('active', 'is-last')
325 |       // TODO: gameover si no hay próxima palabra
326 |     }
327 |   }
328 | 
329 |   function gameOver() {
330 |     $game.style.display = 'none'
331 |     $results.style.display = 'flex'
332 | 
333 |     const correctWords = $paragraph.querySelectorAll('word.correct').length
334 |     const correctLetter = $paragraph.querySelectorAll('letter.correct').length
335 |     const incorrectLetter = $paragraph.querySelectorAll('letter.incorrect').length
336 | 
337 |     const totalLetters = correctLetter + incorrectLetter
338 | 
339 |     const accuracy = totalLetters > 0
340 |       ? (correctLetter / totalLetters) * 100
341 |       : 0
342 | 
343 |     const wpm = correctWords * 60 / INITIAL_TIME
344 |     $wpm.textContent = wpm
345 |     $accuracy.textContent = `${accuracy.toFixed(2)}%`
346 |   }
347 | </script>


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
  1 | Attribution-NonCommercial-NoDerivatives 4.0 International
  2 | 
  3 | =======================================================================
  4 | 
  5 | Creative Commons Corporation ("Creative Commons") is not a law firm and
  6 | does not provide legal services or legal advice. Distribution of
  7 | Creative Commons public licenses does not create a lawyer-client or
  8 | other relationship. Creative Commons makes its licenses and related
  9 | information available on an "as-is" basis. Creative Commons gives no
 10 | warranties regarding its licenses, any material licensed under their
 11 | terms and conditions, or any related information. Creative Commons
 12 | disclaims all liability for damages resulting from their use to the
 13 | fullest extent possible.
 14 | 
 15 | Using Creative Commons Public Licenses
 16 | 
 17 | Creative Commons public licenses provide a standard set of terms and
 18 | conditions that creators and other rights holders may use to share
 19 | original works of authorship and other material subject to copyright
 20 | and certain other rights specified in the public license below. The
 21 | following considerations are for informational purposes only, are not
 22 | exhaustive, and do not form part of our licenses.
 23 | 
 24 |      Considerations for licensors: Our public licenses are
 25 |      intended for use by those authorized to give the public
 26 |      permission to use material in ways otherwise restricted by
 27 |      copyright and certain other rights. Our licenses are
 28 |      irrevocable. Licensors should read and understand the terms
 29 |      and conditions of the license they choose before applying it.
 30 |      Licensors should also secure all rights necessary before
 31 |      applying our licenses so that the public can reuse the
 32 |      material as expected. Licensors should clearly mark any
 33 |      material not subject to the license. This includes other CC-
 34 |      licensed material, or material used under an exception or
 35 |      limitation to copyright. More considerations for licensors:
 36 |     wiki.creativecommons.org/Considerations_for_licensors
 37 | 
 38 |      Considerations for the public: By using one of our public
 39 |      licenses, a licensor grants the public permission to use the
 40 |      licensed material under specified terms and conditions. If
 41 |      the licensor's permission is not necessary for any reason--for
 42 |      example, because of any applicable exception or limitation to
 43 |      copyright--then that use is not regulated by the license. Our
 44 |      licenses grant only permissions under copyright and certain
 45 |      other rights that a licensor has authority to grant. Use of
 46 |      the licensed material may still be restricted for other
 47 |      reasons, including because others have copyright or other
 48 |      rights in the material. A licensor may make special requests,
 49 |      such as asking that all changes be marked or described.
 50 |      Although not required by our licenses, you are encouraged to
 51 |      respect those requests where reasonable. More considerations
 52 |      for the public:
 53 |     wiki.creativecommons.org/Considerations_for_licensees
 54 | 
 55 | =======================================================================
 56 | 
 57 | Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
 58 | International Public License
 59 | 
 60 | By exercising the Licensed Rights (defined below), You accept and agree
 61 | to be bound by the terms and conditions of this Creative Commons
 62 | Attribution-NonCommercial-NoDerivatives 4.0 International Public
 63 | License ("Public License"). To the extent this Public License may be
 64 | interpreted as a contract, You are granted the Licensed Rights in
 65 | consideration of Your acceptance of these terms and conditions, and the
 66 | Licensor grants You such rights in consideration of benefits the
 67 | Licensor receives from making the Licensed Material available under
 68 | these terms and conditions.
 69 | 
 70 | 
 71 | Section 1 -- Definitions.
 72 | 
 73 |   a. Adapted Material means material subject to Copyright and Similar
 74 |      Rights that is derived from or based upon the Licensed Material
 75 |      and in which the Licensed Material is translated, altered,
 76 |      arranged, transformed, or otherwise modified in a manner requiring
 77 |      permission under the Copyright and Similar Rights held by the
 78 |      Licensor. For purposes of this Public License, where the Licensed
 79 |      Material is a musical work, performance, or sound recording,
 80 |      Adapted Material is always produced where the Licensed Material is
 81 |      synched in timed relation with a moving image.
 82 | 
 83 |   b. Copyright and Similar Rights means copyright and/or similar rights
 84 |      closely related to copyright including, without limitation,
 85 |      performance, broadcast, sound recording, and Sui Generis Database
 86 |      Rights, without regard to how the rights are labeled or
 87 |      categorized. For purposes of this Public License, the rights
 88 |      specified in Section 2(b)(1)-(2) are not Copyright and Similar
 89 |      Rights.
 90 | 
 91 |   c. Effective Technological Measures means those measures that, in the
 92 |      absence of proper authority, may not be circumvented under laws
 93 |      fulfilling obligations under Article 11 of the WIPO Copyright
 94 |      Treaty adopted on December 20, 1996, and/or similar international
 95 |      agreements.
 96 | 
 97 |   d. Exceptions and Limitations means fair use, fair dealing, and/or
 98 |      any other exception or limitation to Copyright and Similar Rights
 99 |      that applies to Your use of the Licensed Material.
100 | 
101 |   e. Licensed Material means the artistic or literary work, database,
102 |      or other material to which the Licensor applied this Public
103 |      License.
104 | 
105 |   f. Licensed Rights means the rights granted to You subject to the
106 |      terms and conditions of this Public License, which are limited to
107 |      all Copyright and Similar Rights that apply to Your use of the
108 |      Licensed Material and that the Licensor has authority to license.
109 | 
110 |   g. Licensor means the individual(s) or entity(ies) granting rights
111 |      under this Public License.
112 | 
113 |   h. NonCommercial means not primarily intended for or directed towards
114 |      commercial advantage or monetary compensation. For purposes of
115 |      this Public License, the exchange of the Licensed Material for
116 |      other material subject to Copyright and Similar Rights by digital
117 |      file-sharing or similar means is NonCommercial provided there is
118 |      no payment of monetary compensation in connection with the
119 |      exchange.
120 | 
121 |   i. Share means to provide material to the public by any means or
122 |      process that requires permission under the Licensed Rights, such
123 |      as reproduction, public display, public performance, distribution,
124 |      dissemination, communication, or importation, and to make material
125 |      available to the public including in ways that members of the
126 |      public may access the material from a place and at a time
127 |      individually chosen by them.
128 | 
129 |   j. Sui Generis Database Rights means rights other than copyright
130 |      resulting from Directive 96/9/EC of the European Parliament and of
131 |      the Council of 11 March 1996 on the legal protection of databases,
132 |      as amended and/or succeeded, as well as other essentially
133 |      equivalent rights anywhere in the world.
134 | 
135 |   k. You means the individual or entity exercising the Licensed Rights
136 |      under this Public License. Your has a corresponding meaning.
137 | 
138 | 
139 | Section 2 -- Scope.
140 | 
141 |   a. License grant.
142 | 
143 |        1. Subject to the terms and conditions of this Public License,
144 |           the Licensor hereby grants You a worldwide, royalty-free,
145 |           non-sublicensable, non-exclusive, irrevocable license to
146 |           exercise the Licensed Rights in the Licensed Material to:
147 | 
148 |             a. reproduce and Share the Licensed Material, in whole or
149 |                in part, for NonCommercial purposes only; and
150 | 
151 |             b. produce and reproduce, but not Share, Adapted Material
152 |                for NonCommercial purposes only.
153 | 
154 |        2. Exceptions and Limitations. For the avoidance of doubt, where
155 |           Exceptions and Limitations apply to Your use, this Public
156 |           License does not apply, and You do not need to comply with
157 |           its terms and conditions.
158 | 
159 |        3. Term. The term of this Public License is specified in Section
160 |           6(a).
161 | 
162 |        4. Media and formats; technical modifications allowed. The
163 |           Licensor authorizes You to exercise the Licensed Rights in
164 |           all media and formats whether now known or hereafter created,
165 |           and to make technical modifications necessary to do so. The
166 |           Licensor waives and/or agrees not to assert any right or
167 |           authority to forbid You from making technical modifications
168 |           necessary to exercise the Licensed Rights, including
169 |           technical modifications necessary to circumvent Effective
170 |           Technological Measures. For purposes of this Public License,
171 |           simply making modifications authorized by this Section 2(a)
172 |           (4) never produces Adapted Material.
173 | 
174 |        5. Downstream recipients.
175 | 
176 |             a. Offer from the Licensor -- Licensed Material. Every
177 |                recipient of the Licensed Material automatically
178 |                receives an offer from the Licensor to exercise the
179 |                Licensed Rights under the terms and conditions of this
180 |                Public License.
181 | 
182 |             b. No downstream restrictions. You may not offer or impose
183 |                any additional or different terms or conditions on, or
184 |                apply any Effective Technological Measures to, the
185 |                Licensed Material if doing so restricts exercise of the
186 |                Licensed Rights by any recipient of the Licensed
187 |                Material.
188 | 
189 |        6. No endorsement. Nothing in this Public License constitutes or
190 |           may be construed as permission to assert or imply that You
191 |           are, or that Your use of the Licensed Material is, connected
192 |           with, or sponsored, endorsed, or granted official status by,
193 |           the Licensor or others designated to receive attribution as
194 |           provided in Section 3(a)(1)(A)(i).
195 | 
196 |   b. Other rights.
197 | 
198 |        1. Moral rights, such as the right of integrity, are not
199 |           licensed under this Public License, nor are publicity,
200 |           privacy, and/or other similar personality rights; however, to
201 |           the extent possible, the Licensor waives and/or agrees not to
202 |           assert any such rights held by the Licensor to the limited
203 |           extent necessary to allow You to exercise the Licensed
204 |           Rights, but not otherwise.
205 | 
206 |        2. Patent and trademark rights are not licensed under this
207 |           Public License.
208 | 
209 |        3. To the extent possible, the Licensor waives any right to
210 |           collect royalties from You for the exercise of the Licensed
211 |           Rights, whether directly or through a collecting society
212 |           under any voluntary or waivable statutory or compulsory
213 |           licensing scheme. In all other cases the Licensor expressly
214 |           reserves any right to collect such royalties, including when
215 |           the Licensed Material is used other than for NonCommercial
216 |           purposes.
217 | 
218 | 
219 | Section 3 -- License Conditions.
220 | 
221 | Your exercise of the Licensed Rights is expressly made subject to the
222 | following conditions.
223 | 
224 |   a. Attribution.
225 | 
226 |        1. If You Share the Licensed Material, You must:
227 | 
228 |             a. retain the following if it is supplied by the Licensor
229 |                with the Licensed Material:
230 | 
231 |                  i. identification of the creator(s) of the Licensed
232 |                     Material and any others designated to receive
233 |                     attribution, in any reasonable manner requested by
234 |                     the Licensor (including by pseudonym if
235 |                     designated);
236 | 
237 |                 ii. a copyright notice;
238 | 
239 |                iii. a notice that refers to this Public License;
240 | 
241 |                 iv. a notice that refers to the disclaimer of
242 |                     warranties;
243 | 
244 |                  v. a URI or hyperlink to the Licensed Material to the
245 |                     extent reasonably practicable;
246 | 
247 |             b. indicate if You modified the Licensed Material and
248 |                retain an indication of any previous modifications; and
249 | 
250 |             c. indicate the Licensed Material is licensed under this
251 |                Public License, and include the text of, or the URI or
252 |                hyperlink to, this Public License.
253 | 
254 |           For the avoidance of doubt, You do not have permission under
255 |           this Public License to Share Adapted Material.
256 | 
257 |        2. You may satisfy the conditions in Section 3(a)(1) in any
258 |           reasonable manner based on the medium, means, and context in
259 |           which You Share the Licensed Material. For example, it may be
260 |           reasonable to satisfy the conditions by providing a URI or
261 |           hyperlink to a resource that includes the required
262 |           information.
263 | 
264 |        3. If requested by the Licensor, You must remove any of the
265 |           information required by Section 3(a)(1)(A) to the extent
266 |           reasonably practicable.
267 | 
268 | 
269 | Section 4 -- Sui Generis Database Rights.
270 | 
271 | Where the Licensed Rights include Sui Generis Database Rights that
272 | apply to Your use of the Licensed Material:
273 | 
274 |   a. for the avoidance of doubt, Section 2(a)(1) grants You the right
275 |      to extract, reuse, reproduce, and Share all or a substantial
276 |      portion of the contents of the database for NonCommercial purposes
277 |      only and provided You do not Share Adapted Material;
278 | 
279 |   b. if You include all or a substantial portion of the database
280 |      contents in a database in which You have Sui Generis Database
281 |      Rights, then the database in which You have Sui Generis Database
282 |      Rights (but not its individual contents) is Adapted Material; and
283 | 
284 |   c. You must comply with the conditions in Section 3(a) if You Share
285 |      all or a substantial portion of the contents of the database.
286 | 
287 | For the avoidance of doubt, this Section 4 supplements and does not
288 | replace Your obligations under this Public License where the Licensed
289 | Rights include other Copyright and Similar Rights.
290 | 
291 | 
292 | Section 5 -- Disclaimer of Warranties and Limitation of Liability.
293 | 
294 |   a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
295 |      EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
296 |      AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
297 |      ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
298 |      IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
299 |      WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
300 |      PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
301 |      ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
302 |      KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
303 |      ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
304 | 
305 |   b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
306 |      TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
307 |      NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
308 |      INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
309 |      COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
310 |      USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
311 |      ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
312 |      DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
313 |      IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
314 | 
315 |   c. The disclaimer of warranties and limitation of liability provided
316 |      above shall be interpreted in a manner that, to the extent
317 |      possible, most closely approximates an absolute disclaimer and
318 |      waiver of all liability.
319 | 
320 | 
321 | Section 6 -- Term and Termination.
322 | 
323 |   a. This Public License applies for the term of the Copyright and
324 |      Similar Rights licensed here. However, if You fail to comply with
325 |      this Public License, then Your rights under this Public License
326 |      terminate automatically.
327 | 
328 |   b. Where Your right to use the Licensed Material has terminated under
329 |      Section 6(a), it reinstates:
330 | 
331 |        1. automatically as of the date the violation is cured, provided
332 |           it is cured within 30 days of Your discovery of the
333 |           violation; or
334 | 
335 |        2. upon express reinstatement by the Licensor.
336 | 
337 |      For the avoidance of doubt, this Section 6(b) does not affect any
338 |      right the Licensor may have to seek remedies for Your violations
339 |      of this Public License.
340 | 
341 |   c. For the avoidance of doubt, the Licensor may also offer the
342 |      Licensed Material under separate terms or conditions or stop
343 |      distributing the Licensed Material at any time; however, doing so
344 |      will not terminate this Public License.
345 | 
346 |   d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
347 |      License.
348 | 
349 | 
350 | Section 7 -- Other Terms and Conditions.
351 | 
352 |   a. The Licensor shall not be bound by any additional or different
353 |      terms or conditions communicated by You unless expressly agreed.
354 | 
355 |   b. Any arrangements, understandings, or agreements regarding the
356 |      Licensed Material not stated herein are separate from and
357 |      independent of the terms and conditions of this Public License.
358 | 
359 | 
360 | Section 8 -- Interpretation.
361 | 
362 |   a. For the avoidance of doubt, this Public License does not, and
363 |      shall not be interpreted to, reduce, limit, restrict, or impose
364 |      conditions on any use of the Licensed Material that could lawfully
365 |      be made without permission under this Public License.
366 | 
367 |   b. To the extent possible, if any provision of this Public License is
368 |      deemed unenforceable, it shall be automatically reformed to the
369 |      minimum extent necessary to make it enforceable. If the provision
370 |      cannot be reformed, it shall be severed from this Public License
371 |      without affecting the enforceability of the remaining terms and
372 |      conditions.
373 | 
374 |   c. No term or condition of this Public License will be waived and no
375 |      failure to comply consented to unless expressly agreed to by the
376 |      Licensor.
377 | 
378 |   d. Nothing in this Public License constitutes or may be interpreted
379 |      as a limitation upon, or waiver of, any privileges and immunities
380 |      that apply to the Licensor or You, including from the legal
381 |      processes of any jurisdiction or authority.
382 | 
383 | =======================================================================
384 | 
385 | Creative Commons is not a party to its public
386 | licenses. Notwithstanding, Creative Commons may elect to apply one of
387 | its public licenses to material it publishes and in those instances
388 | will be considered the “Licensor.” The text of the Creative Commons
389 | public licenses is dedicated to the public domain under the CC0 Public
390 | Domain Dedication. Except for the limited purpose of indicating that
391 | material is shared under a Creative Commons public license or as
392 | otherwise permitted by the Creative Commons policies published at
393 | creativecommons.org/policies, Creative Commons does not authorize the
394 | use of the trademark "Creative Commons" or any other trademark or logo
395 | of Creative Commons without its prior written consent including,
396 | without limitation, in connection with any unauthorized modifications
397 | to any of its public licenses or any other arrangements,
398 | understandings, or agreements concerning use of licensed material. For
399 | the avoidance of doubt, this paragraph does not form part of the
400 | public licenses.
401 | 
402 | Creative Commons may be contacted at creativecommons.org.
403 | 


--------------------------------------------------------------------------------
/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 | 
 57 | ## 🚀 Contribuir
 58 | 
 59 | ### **Introducción**
 60 | 
 61 | 1. Para contribuir, crea un [Fork](https://github.com/midudev/javascript-100-proyectos/fork) del proyecto.
 62 | 
 63 | 2. Clona el repositorio en tu máquina local:
 64 | 
 65 | ```bash
 66 | git clone git@github.com:tu_username/javascript-100-proyectos.git
 67 | ```
 68 | 
 69 | ### **Proyectos**
 70 | 
 71 | 1. Accede a la carpeta del proyecto que quieras:
 72 | 
 73 | ```bash
 74 | cd 01-tinder-swipe
 75 | ```
 76 | 
 77 | 2. Instala la extensión [**Live Preview**](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) en Visual Studio Code.
 78 | 
 79 | 3. Presiona `F1` y selecciona `Live Preview: Start Server`.
 80 | 
 81 | Realiza los cambios y crea una pull request 🚀.
 82 | 
 83 | ### **Sitio web**
 84 | 
 85 | - Para contribuir al sitio web es necesario tener [Node.js +18](https://nodejs.org/) instalado y [pnpm](https://pnpm.io/):
 86 | 
 87 | ```bash
 88 | npm install -g pnpm
 89 | ```
 90 | 
 91 | 1. Instala las dependencias:
 92 | 
 93 | ```bash
 94 | cd web
 95 | pnpm install
 96 | ```
 97 | 
 98 | 2. Inicia el servidor de desarrollo:
 99 | 
100 | ```bash
101 | pnpm dev
102 | ```
103 | 
104 | Realiza los cambios y crea una pull request 🚀.
105 | 
106 | ## 🛠️ Stack
107 | 
108 | **Proyectos**:
109 | 
110 | - HTML, CSS & Javascript.
111 | 
112 | **Website**:
113 | 
114 | - [**Astro**](https://astro.build/) - The web framework for content-driven websites.
115 | - [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.
116 | - [**Tailwind CSS**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
117 | - [**@midudev/tailwind-animations**](https://tailwindcss-animations.vercel.app) - Easy peasy animations for your Tailwind project.
118 | 
119 | ## 👑 Contribuidores
120 | 
121 | <a href="https://github.com/midudev/javascript-100-proyectos/graphs/contributors">
122 |   <img src="https://contrib.rocks/image?repo=midudev/javascript-100-proyectos" />
123 | </a>
124 | 


--------------------------------------------------------------------------------
/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/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.5.10",
15 |     "@astrojs/tailwind": "5.1.0",
16 |     "@midudev/tailwind-animations": "0.0.7",
17 |     "astro": "4.5.12",
18 |     "tailwindcss": "3.4.3",
19 |     "typescript": "5.4.3"
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/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/me-blue.webp


--------------------------------------------------------------------------------
/web/public/me.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/me.webp


--------------------------------------------------------------------------------
/web/public/og.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/og.jpg


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/index.html:
--------------------------------------------------------------------------------
  1 | <title>100 proyectos JS · 01 - Tinder Swipe</title>
  2 | <div class="shadow">
  3 | <main>
  4 |   <section>
  5 |     <div class="white-bkg"></div>
  6 |     <header>
  7 |       <img src="./tinder-logo.webp" alt="Tinder Logo" />
  8 |     </header>
  9 | 
 10 |     <div class="cards">
 11 |       <article>
 12 |         <img src="./photos/2.webp" alt="Álex, brown hair man, 25 years old" />
 13 |         <h2>Álex <span>25</span></h2>
 14 |         <div class="choice nope">NOPE</div>
 15 |         <div class="choice like">LIKE</div>
 16 |       </article>
 17 | 
 18 |       <article>
 19 |         <img src="./photos/1.webp" alt="Leila, redhead, 25 years old" />
 20 |         <h2>Leila <span>27</span></h2>
 21 |         <div class="choice nope">NOPE</div>
 22 |         <div class="choice like">LIKE</div>
 23 |       </article>
 24 | 
 25 |       <span>
 26 |         No hay más personas cerca de ti...<br />
 27 |         Vuelve a intentarlo más tarde
 28 |       </span>
 29 |     </div>
 30 | 
 31 |     <footer>
 32 |       <button class="is-undo" aria-label="undo"></button>
 33 |       <button class="is-remove is-big" aria-label="remove"></button>
 34 |       <button class="is-star" aria-label="star"></button>
 35 |       <button class="is-fav is-big" aria-label="fav"></button>
 36 |       <button class="is-zap" aria-label="zap"></button>
 37 |     </footer>
 38 |   </section>
 39 | </main>
 40 | </div>
 41 | <style>
 42 |   *,
 43 |   *::before,
 44 |   *::after {
 45 |     box-sizing: border-box;
 46 |     margin: 0;
 47 |     padding: 0;
 48 |   }
 49 | 
 50 |   body {
 51 |     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 52 |     display: grid;
 53 |     place-content: center;
 54 |     min-height: 100vh;
 55 |     overflow: hidden;
 56 |     user-select: none;
 57 |     background: #e5e5e5;
 58 |   }
 59 |   .white-bkg {
 60 |     position: absolute;
 61 |     background: #f6f6f6;
 62 |     inset: 0;
 63 |     z-index: -10;
 64 |   }
 65 |   .shadow{
 66 |     filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
 67 |   }
 68 |   main {
 69 |     background: url('./iphone.webp') no-repeat;
 70 |     background-size: contain;
 71 |     width: 320px;
 72 |     height: 640px;
 73 |     display: flex;
 74 |     position: relative;
 75 |   }
 76 | 
 77 |   section {
 78 |     width: 100%;
 79 |     border-radius: 32px;
 80 |     display: flex;
 81 |     gap: 24px;
 82 |     flex-direction: column;
 83 |     overflow: hidden;
 84 |     position: relative;
 85 |     padding: 16px 6px;
 86 |     margin: 24px;
 87 |   }
 88 | 
 89 |   header {
 90 |     display: flex;
 91 |     justify-content: start;
 92 |     padding-left: 1rem;
 93 | 
 94 |     & img {
 95 |       width: 24px;
 96 |       height: 24px;
 97 |     }
 98 |   }
 99 | 
100 |   footer {
101 |     display: grid;
102 |     grid-template-columns: repeat(5, 1fr);
103 |     gap: 12px;
104 |     padding: 0 24px;
105 |     justify-content: center;
106 |     align-items: center;
107 | 
108 |     & button {
109 |       background: url('./tinder-icons.webp') no-repeat;
110 |       background-position: 0px 0px;
111 |       background-size: 175px;
112 |       height: 32px;
113 |       width: 32px;
114 |       border-radius: 50%;
115 |       border: 0;
116 |       cursor: pointer;
117 |       transition: scale .3s ease;
118 | 
119 |       &:hover {
120 |         scale: 1.4;
121 |       }
122 | 
123 |       &.is-big {
124 |         background-size: 250px;
125 |         width: 48px;
126 |         height: 48px;
127 |       }
128 | 
129 |       &.is-undo {
130 |         background-position: -140px 0;
131 |       }
132 | 
133 |       &.is-remove {
134 |         background-position: -150px 0;
135 |       }
136 | 
137 |       &.is-fav {
138 |         background-position: -50px 0;
139 |       }
140 | 
141 |       &.is-star {
142 |         background-position: -70px 0px;
143 |       }
144 |     }
145 |   }
146 | 
147 |   .cards {
148 |     position: relative;
149 |     width: 100%;
150 |     height: 100%;
151 |     margin: 0 auto;
152 | 
153 |     &>span {
154 |       display: grid;
155 |       place-content: center;
156 |       color: #777;
157 |       font-size: 14px;
158 |       text-align: center;
159 |       height: 100%;
160 |       z-index: -1;
161 |     }
162 | 
163 |     & article {
164 |       border-radius: 8px;
165 |       box-shadow: 0 0 10px rgba(0, 0, 0, .3);
166 |       cursor: grab;
167 |       overflow: hidden;
168 |       position: absolute;
169 |       inset: 0;
170 |       width: 100%;
171 |       height: 100%;
172 |       z-index: 2;
173 | 
174 |       &.go-left {
175 |         transform: translateX(-150%) rotate(-30deg) !important;
176 |       }
177 | 
178 |       &.go-right {
179 |         transform: translateX(150%) rotate(30deg) !important;
180 |       }
181 | 
182 |       &.go-left,
183 |       &.go-right {
184 |         transition: transform .3s ease, rotate .3s ease;
185 |       }
186 | 
187 |       &.reset {
188 |         transition: transform .3s ease;
189 |         transform: translateX(0) !important;
190 |       }
191 | 
192 |       & .choice {
193 |         border-radius: 8px;
194 |         color: black;
195 |         border: 4px solid;
196 |         z-index: 9999;
197 |         position: absolute;
198 |         top: 32px;
199 |         right: 16px;
200 |         opacity: 0;
201 |         padding: 4px 8px;
202 |         font-size: 24px;
203 |         font-weight: bold;
204 |         text-shadow: 0 0 10px rgba(0, 0, 0, .3);
205 |         width: fit-content;
206 | 
207 |         &.nope {
208 |           border-color: #ff6e63;
209 |           color: #ff6e63;
210 |           transform: rotate(30deg);
211 |         }
212 | 
213 |         &.like {
214 |           border-color: #63ff68;
215 |           color: #63ff68;
216 |           left: 16px;
217 |           transform: rotate(-30deg);
218 |         }
219 |       }
220 | 
221 |       & img {
222 |         width: 100%;
223 |         height: 100%;
224 |         object-fit: cover;
225 |       }
226 | 
227 |       & h2 {
228 |         color: white;
229 |         position: absolute;
230 |         inset: 0;
231 |         display: flex;
232 |         align-items: flex-end;
233 |         height: 100%;
234 |         width: 100%;
235 |         padding: 16px;
236 |         z-index: 3;
237 |         background: linear-gradient(to top,
238 |             #00000088 20%,
239 |             transparent 40%);
240 |       }
241 | 
242 |       & span {
243 |         margin-left: 6px;
244 |         font-size: 18px;
245 |         line-height: 1.4;
246 |         font-weight: 400;
247 |       }
248 |     }
249 |   }
250 | </style>
251 | 
252 | <script>
253 |   const DECISION_THRESHOLD = 75
254 | 
255 |   let isAnimating = false
256 |   let pullDeltaX = 0 // distance from the card being dragged
257 | 
258 |   function startDrag(event) {
259 |     if (isAnimating) return
260 | 
261 |     // get the first article element
262 |     const actualCard = event.target.closest('article')
263 |     if (!actualCard) return
264 | 
265 |     // get initial position of mouse or finger
266 |     const startX = event.pageX ?? event.touches[0].pageX
267 | 
268 |     // listen the mouse and touch movements
269 |     document.addEventListener('mousemove', onMove)
270 |     document.addEventListener('mouseup', onEnd)
271 | 
272 |     document.addEventListener('touchmove', onMove, { passive: true })
273 |     document.addEventListener('touchend', onEnd, { passive: true })
274 | 
275 |     function onMove(event) {
276 |       // current position of mouse or finger
277 |       const currentX = event.pageX ?? event.touches[0].pageX
278 | 
279 |       // the distance between the initial and current position
280 |       pullDeltaX = currentX - startX
281 | 
282 |       // there is no distance traveled in X axis
283 |       if (pullDeltaX === 0) return
284 | 
285 |       // change the flag to indicate we are animating
286 |       isAnimating = true
287 | 
288 |       // calculate the rotation of the card using the distance
289 |       const deg = pullDeltaX / 14
290 | 
291 |       // apply the transformation to the card
292 |       actualCard.style.transform = `translateX(${pullDeltaX}px) rotate(${deg}deg)`
293 | 
294 |       // change the cursor to grabbing
295 |       actualCard.style.cursor = 'grabbing'
296 | 
297 |       // change opacity of the choice info
298 |       const opacity = Math.abs(pullDeltaX) / 100
299 |       const isRight = pullDeltaX > 0
300 | 
301 |       const choiceEl = isRight
302 |         ? actualCard.querySelector('.choice.like')
303 |         : actualCard.querySelector('.choice.nope')
304 | 
305 |       choiceEl.style.opacity = opacity
306 |     }
307 | 
308 |     function onEnd(event) {
309 |       // remove the event listeners
310 |       document.removeEventListener('mousemove', onMove)
311 |       document.removeEventListener('mouseup', onEnd)
312 | 
313 |       document.removeEventListener('touchmove', onMove)
314 |       document.removeEventListener('touchend', onEnd)
315 | 
316 |       // saber si el usuario tomo una decisión
317 |       const decisionMade = Math.abs(pullDeltaX) >= DECISION_THRESHOLD
318 | 
319 |       if (decisionMade) {
320 |         const goRight = pullDeltaX >= 0
321 | 
322 |         // add class according to the decision
323 |         actualCard.classList.add(goRight ? 'go-right' : 'go-left')
324 |         actualCard.addEventListener('transitionend', () => {
325 |           actualCard.remove()
326 |         })
327 |       } else {
328 |         actualCard.classList.add('reset')
329 |         actualCard.classList.remove('go-right', 'go-left')
330 | 
331 |         actualCard.querySelectorAll('.choice').forEach(choice => {
332 |           choice.style.opacity = 0
333 |         })
334 |       }
335 | 
336 |       // reset the variables
337 |       actualCard.addEventListener('transitionend', () => {
338 |         actualCard.removeAttribute('style')
339 |         actualCard.classList.remove('reset')
340 | 
341 |         pullDeltaX = 0
342 |         isAnimating = false
343 |       })
344 | 
345 |       // reset the choice info opacity
346 |       actualCard
347 |         .querySelectorAll(".choice")
348 |         .forEach((el) => (el.style.opacity = 0));
349 |     }
350 |   }
351 | 
352 |   document.addEventListener('mousedown', startDrag)
353 |   document.addEventListener('touchstart', startDrag, { passive: true })
354 | </script>
355 | 


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/iphone.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/projects/01-tinder-swipe/iphone.webp


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


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


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/tinder-icons.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/projects/01-tinder-swipe/tinder-icons.webp


--------------------------------------------------------------------------------
/web/public/projects/01-tinder-swipe/tinder-logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/projects/01-tinder-swipe/tinder-logo.webp


--------------------------------------------------------------------------------
/web/public/projects/01.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/projects/01.webp


--------------------------------------------------------------------------------
/web/public/projects/02-arkanoid-game/bkg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/projects/02-arkanoid-game/bkg.png


--------------------------------------------------------------------------------
/web/public/projects/02-arkanoid-game/bricks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/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 |       console.log('Game Over')
190 |       document.location.reload()
191 |     }
192 | 
193 |     // mover la pelota
194 |     x += dx
195 |     y += dy
196 |   }
197 | 
198 |   function paddleMovement() {
199 |     if (rightPressed && paddleX < canvas.width - paddleWidth) {
200 |       paddleX += PADDLE_SENSITIVITY
201 |     } else if (leftPressed && paddleX > 0) {
202 |       paddleX -= PADDLE_SENSITIVITY
203 |     }
204 |   }
205 | 
206 |   function cleanCanvas() {
207 |     ctx.clearRect(0, 0, canvas.width, canvas.height)
208 |   }
209 | 
210 |   function initEvents() {
211 |     document.addEventListener('keydown', keyDownHandler)
212 |     document.addEventListener('keyup', keyUpHandler)
213 | 
214 |     function keyDownHandler(event) {
215 |       const { key } = event
216 |       if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
217 |         rightPressed = true
218 |       } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
219 |         leftPressed = true
220 |       }
221 |     }
222 | 
223 |     function keyUpHandler(event) {
224 |       const { key } = event
225 |       if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
226 |         rightPressed = false
227 |       } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
228 |         leftPressed = false
229 |       }
230 |     }
231 |   }
232 | 
233 |   // a que velocidad de fps queremos que renderice nuestro juego
234 |   const fps = 60
235 |   
236 |   let msPrev = window.performance.now()
237 |   let msFPSPrev = window.performance.now() + 1000;
238 |   const msPerFrame = 1000 / fps
239 |   let frames = 0
240 |   let framesPerSec = fps;
241 | 
242 |   function draw() {
243 |     window.requestAnimationFrame(draw)
244 | 
245 |     const msNow = window.performance.now()
246 |     const msPassed = msNow - msPrev
247 | 
248 |     if (msPassed < msPerFrame) return
249 | 
250 |     const excessTime = msPassed % msPerFrame
251 |     msPrev = msNow - excessTime
252 | 
253 |     frames++
254 | 
255 |     if (msFPSPrev < msNow)
256 |     {
257 |       msFPSPrev = window.performance.now() + 1000
258 |       framesPerSec = frames;
259 |       frames = 0;
260 |     }
261 | 
262 |     // ... render code
263 |     cleanCanvas()
264 |     // hay que dibujar los elementos
265 |     drawBall()
266 |     drawPaddle()
267 |     drawBricks()
268 |     drawUI()
269 | 
270 |     // colisiones y movimientos
271 |     collisionDetection()
272 |     ballMovement()
273 |     paddleMovement()
274 | 
275 |   }
276 | 
277 |   draw()
278 |   initEvents()
279 | </script>


--------------------------------------------------------------------------------
/web/public/projects/02-arkanoid-game/sprite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/projects/02-arkanoid-game/sprite.png


--------------------------------------------------------------------------------
/web/public/projects/02.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/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-midu-typing-game/index.html:
--------------------------------------------------------------------------------
  1 | <title>Monkey Type Clone - Test your typing skills! ⌨️</title>
  2 | <style>
  3 |   :root {
  4 |     color-scheme: light dark;
  5 |     --green: #00b755;
  6 |     --yellow: #daaf38;
  7 |     --red: #ca4754;
  8 |     --black: #222;
  9 |     --gray: #999;
 10 |   }
 11 | 
 12 |   body {
 13 |     background: var(--black);
 14 |     font-family: Menlo, monospace;
 15 |     display: grid;
 16 |     padding: 32px;
 17 |     justify-content: center;
 18 |     margin-top: 32px;
 19 |     padding: 16px;
 20 |   }
 21 | 
 22 |   section {
 23 |     padding: 16px;
 24 |     display: flex;
 25 |     flex-direction: column;
 26 |     gap: 4px;
 27 |     max-width: 500px;
 28 |   }
 29 | 
 30 |   time {
 31 |     color: var(--yellow)
 32 |   }
 33 | 
 34 |   input {
 35 |     z-index: -999;
 36 |     position: absolute;
 37 |     top: 0;
 38 |     left: 0;
 39 |     pointer-events: none;
 40 |     opacity: 0;
 41 |   }
 42 | 
 43 |   p {
 44 |     display: flex;
 45 |     flex-wrap: wrap;
 46 |     gap: 3px 8px;
 47 |     margin: 0;
 48 |   }
 49 | 
 50 |   letter {
 51 |     color: var(--gray);
 52 |     position: relative;
 53 | 
 54 |     &.active::before {
 55 |       content: '|';
 56 |       color: var(--yellow);
 57 |       font-size: 14px;
 58 |       position: absolute;
 59 |       left: -65%;
 60 |       animation: 1s blink infinite ease-in-out;
 61 |     }
 62 | 
 63 |     &.active.is-last::before {
 64 |       left: 65%;
 65 |     }
 66 | 
 67 |     &.correct {
 68 |       color: var(--green);
 69 |     }
 70 | 
 71 |     &.incorrect {
 72 |       color: var(--red);
 73 |     }
 74 |   }
 75 | 
 76 |   word {
 77 |     border-bottom: 1.5px solid transparent;
 78 |     transition: border-color 0.3s ease-in-out;
 79 | 
 80 |     &.marked {
 81 |       border-color: var(--red);
 82 |     }
 83 |   }
 84 | 
 85 |   @keyframes blink {
 86 | 
 87 |     0%,
 88 |     25% {
 89 |       opacity: 1;
 90 |     }
 91 | 
 92 |     75% {
 93 |       opacity: 0;
 94 |     }
 95 |   }
 96 | 
 97 |   #game {
 98 |     display: flex;
 99 |   }
100 | 
101 |   #results {
102 |     display: none;
103 |   }
104 | 
105 |   h2 {
106 |     font-weight: 400;
107 |     opacity: .4;
108 |     margin: 0;
109 |     font-size: 16px;
110 |   }
111 | 
112 |   h3 {
113 |     font-weight: 400;
114 |     margin: 0;
115 |     font-size: 24px;
116 |     color: var(--yellow);
117 |   }
118 | 
119 |   button {
120 |     background: transparent;
121 |     border: 0;
122 |     margin-top: 32px;
123 |     padding: 8px;
124 |     opacity: .4;
125 |     display: inline-block;
126 |     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
127 |     cursor: pointer;
128 |     border-radius: 16px;
129 | 
130 |     &:hover {
131 |       background: #444;
132 |       opacity: 1;
133 |       scale: 110%;
134 |     }
135 |   }
136 | </style>
137 | 
138 | <body>
139 |   <main>
140 |     <section id="game">
141 |       <time></time>
142 |       <p></p>
143 |       <input autofocus>
144 |     </section>
145 |     <section id="results">
146 |       <h2>wpm</h2>
147 |       <h3 id="results-wpm"></h3>
148 | 
149 |       <h2>accuracy</h2>
150 |       <h3 id="results-accuracy"></h3>
151 | 
152 |       <button id="reload-button">
153 |         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
154 |           stroke-linecap="round" stroke-linejoin="round">
155 |           <path stroke="none" d="M0 0h24v24H0z" fill="none" />
156 |           <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1 7.935 1.007 9.425 4.747" />
157 |           <path d="M20 4v5h-5" />
158 |         </svg>
159 |       </button>
160 |     </section>
161 |   </main>
162 | </body>
163 | 
164 | <script type="module">
165 |   import { words as INITIAL_WORDS } from './data.js'
166 | 
167 |   const $time = document.querySelector('time');
168 |   const $paragraph = document.querySelector('p');
169 |   const $input = document.querySelector('input');
170 |   const $game = document.querySelector('#game')
171 |   const $results = document.querySelector('#results')
172 |   const $wpm = $results.querySelector('#results-wpm')
173 |   const $accuracy = $results.querySelector('#results-accuracy')
174 |   const $button = document.querySelector('#reload-button')
175 | 
176 |   const INITIAL_TIME = 30;
177 | 
178 |   let words = []
179 |   let currentTime = INITIAL_TIME
180 | 
181 |   initGame()
182 |   initEvents()
183 | 
184 |   function initGame() {
185 |     $game.style.display = 'flex'
186 |     $results.style.display = 'none'
187 |     $input.value = ''
188 | 
189 |     words = INITIAL_WORDS.toSorted(
190 |       () => Math.random() - 0.5
191 |     ).slice(0, 50)
192 |     currentTime = INITIAL_TIME
193 | 
194 |     $time.textContent = currentTime
195 | 
196 |     $paragraph.innerHTML = words.map((word, index) => {
197 |       const letters = word.split('')
198 | 
199 |       return `<word>
200 |         ${letters
201 |           .map(letter => `<letter>${letter}</letter>`)
202 |           .join('')
203 |         }
204 |       </word>
205 |       `
206 |     }).join('')
207 | 
208 |     const $firstWord = $paragraph.querySelector('word')
209 |     $firstWord.classList.add('active')
210 |     $firstWord.querySelector('letter').classList.add('active')
211 | 
212 |     const intervalId = setInterval(() => {
213 |       currentTime--
214 |       $time.textContent = currentTime
215 | 
216 |       if (currentTime === 0) {
217 |         clearInterval(intervalId)
218 |         gameOver()
219 |       }
220 |     }, 1000)
221 |   }
222 | 
223 |   function initEvents() {
224 |     document.addEventListener('keydown', () => {
225 |       $input.focus()
226 |     })
227 |     $input.addEventListener('keydown', onKeyDown)
228 |     $input.addEventListener('keyup', onKeyUp)
229 |     $button.addEventListener('click', initGame)
230 |   }
231 | 
232 |   function onKeyDown(event) {
233 |     const $currentWord = $paragraph.querySelector('word.active')
234 |     const $currentLetter = $currentWord.querySelector('letter.active')
235 | 
236 |     const { key } = event
237 |     if (key === ' ') {
238 |       event.preventDefault()
239 | 
240 |       const $nextWord = $currentWord.nextElementSibling
241 |       const $nextLetter = $nextWord.querySelector('letter')
242 | 
243 |       $currentWord.classList.remove('active', 'marked')
244 |       $currentLetter.classList.remove('active')
245 | 
246 |       $nextWord.classList.add('active')
247 |       $nextLetter.classList.add('active')
248 | 
249 |       $input.value = ''
250 | 
251 |       const hasMissedLetters = $currentWord
252 |         .querySelectorAll('letter:not(.correct)').length > 0
253 | 
254 |       const classToAdd = hasMissedLetters ? 'marked' : 'correct'
255 |       $currentWord.classList.add(classToAdd)
256 | 
257 |       return
258 |     }
259 | 
260 |     if (key === 'Backspace') {
261 |       const $prevWord = $currentWord.previousElementSibling
262 |       const $prevLetter = $currentLetter.previousElementSibling
263 | 
264 |       if (!$prevWord && !$prevLetter) {
265 |         event.preventDefault()
266 |         return
267 |       }
268 | 
269 |       const $wordMarked = $paragraph.querySelector('word.marked')
270 |       if ($wordMarked && !$prevLetter) {
271 |         event.preventDefault()
272 |         $prevWord.classList.remove('marked')
273 |         $prevWord.classList.add('active')
274 | 
275 |         const $letterToGo = $prevWord.querySelector('letter:last-child')
276 | 
277 |         $currentLetter.classList.remove('active')
278 |         $letterToGo.classList.add('active')
279 | 
280 |         $input.value = [
281 |           ...$prevWord.querySelectorAll('letter.correct, letter.incorrect')
282 |         ].map($el => {
283 |           return $el.classList.contains('correct') ? $el.innerText : '*'
284 |         })
285 |           .join('')
286 |       }
287 |     }
288 |   }
289 | 
290 |   function onKeyUp() {
291 |     // recuperamos los elementos actuals
292 |     const $currentWord = $paragraph.querySelector('word.active')
293 |     const $currentLetter = $currentWord.querySelector('letter.active')
294 | 
295 |     const currentWord = $currentWord.innerText.trim()
296 |     $input.maxLength = currentWord.length
297 | 
298 |     const $allLetters = $currentWord.querySelectorAll('letter')
299 | 
300 |     $allLetters.forEach($letter => $letter.classList.remove('correct', 'incorrect'))
301 | 
302 |     $input.value.split('').forEach((char, index) => {
303 |       const $letter = $allLetters[index]
304 |       const letterToCheck = currentWord[index]
305 | 
306 |       const isCorrect = char === letterToCheck
307 |       const letterClass = isCorrect ? 'correct' : 'incorrect'
308 |       $letter.classList.add(letterClass)
309 |     })
310 | 
311 |     $currentLetter.classList.remove('active', 'is-last')
312 |     const inputLength = $input.value.length
313 |     const $nextActiveLetter = $allLetters[inputLength]
314 | 
315 |     if ($nextActiveLetter) {
316 |       $nextActiveLetter.classList.add('active')
317 |     } else {
318 |       $currentLetter.classList.add('active', 'is-last')
319 |       // TODO: gameover si no hay próxima palabra
320 |     }
321 |   }
322 | 
323 |   function gameOver() {
324 |     $game.style.display = 'none'
325 |     $results.style.display = 'flex'
326 | 
327 |     const correctWords = $paragraph.querySelectorAll('word.correct').length
328 |     const correctLetter = $paragraph.querySelectorAll('letter.correct').length
329 |     const incorrectLetter = $paragraph.querySelectorAll('letter.incorrect').length
330 | 
331 |     const totalLetters = correctLetter + incorrectLetter
332 | 
333 |     const accuracy = totalLetters > 0
334 |       ? (correctLetter / totalLetters) * 100
335 |       : 0
336 | 
337 |     const wpm = correctWords * 60 / INITIAL_TIME
338 |     $wpm.textContent = wpm
339 |     $accuracy.textContent = `${accuracy.toFixed(2)}%`
340 |   }
341 | </script>


--------------------------------------------------------------------------------
/web/public/projects/03.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/web/public/projects/03.webp


--------------------------------------------------------------------------------
/web/public/readme.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devsy-io/javascript-100-proyectos/cf7e8333eb616694b47bd104556acf776b803770/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 items-center 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 items-baseline gap-x-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} estrellas en GitHub`}</span
41 |         >
42 |         <span
43 |           class="absolute opacity-0 -translate-y-5 group-hover:animate-fade-in-up"
44 |           >¡Dale una 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 |     <div 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 |     </div>
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 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 |       </footer>
57 |     </div>
58 |     <img
59 |       width="200"
60 |       height="200"
61 |       src="/me.webp"
62 |       alt="Miguel Ángel"
63 |       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"
64 |       style="object-position: center"
65 |     />
66 |   </article>
67 | </section>
68 | 


--------------------------------------------------------------------------------
/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 | 
  5 | <div
  6 |   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"
  7 | >
  8 |   {
  9 |     PROJECTS.map((project, index) => {
 10 |       const num = `${index + 1}`.padStart(2, "0")
 11 | 
 12 |       return (
 13 |         <article class="relative items-center text-black rounded-lg">
 14 |           <a
 15 |             href={`/${project.slug}`}
 16 |             class="group hover:scale-110 block transition"
 17 |           >
 18 |             <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">
 19 |               #{num}
 20 |             </span>
 21 |             <img
 22 |               class="w-full rounded-lg overflow-hidden object-cover aspect-video"
 23 |               src={`./projects/${num}.webp`}
 24 |               alt={`Captura de pantalla del proyecto ${project.title}`}
 25 |             />
 26 |           </a>
 27 |           <div class="p-5">
 28 |             <h2 class="text-4xl font-bold tracking-tight text-gray-900">
 29 |               <a
 30 |                 href={`/${project.slug}`}
 31 |                 class="hover:text-sky-500 transition"
 32 |               >
 33 |                 {project.title}
 34 |               </a>
 35 |             </h2>
 36 |             <p class="mt-3 mb-4 font-light text-gray-800">
 37 |               {project.description}
 38 |             </p>
 39 |             <ul class="inline-flex flex-wrap gap-2">
 40 |               {project.learnings.map((learning) => (
 41 |                 <li class="text-xs font-light text-gray-600 bg-gray-100 px-2 py-1 rounded-full">
 42 |                   {learning}
 43 |                 </li>
 44 |               ))}
 45 |             </ul>
 46 |             <ul class="flex flex-wrap gap-2 mt-4">
 47 |               <li>
 48 |                 <a
 49 |                   href={`https://github.com/midudev/javascript-100-proyectos/tree/main/${project.slug}`}
 50 |                   target="_blank"
 51 |                   rel="noopener noreferrer"
 52 |                   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"
 53 |                 >
 54 |                   <svg
 55 |                     class="w-5 h-5 mr-1"
 56 |                     fill="currentColor"
 57 |                     viewBox="0 0 24 24"
 58 |                     aria-hidden="true"
 59 |                   >
 60 |                     <path
 61 |                       fill-rule="evenodd"
 62 |                       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"
 63 |                       clip-rule="evenodd"
 64 |                     />
 65 |                   </svg>
 66 |                   Código
 67 |                 </a>
 68 |               </li>
 69 |               <li>
 70 |                 <a
 71 |                   href={`/${project.slug}`}
 72 |                   target="_blank"
 73 |                   rel="noopener noreferrer"
 74 |                   class="inline-flex items-center justify-center px-3 py-2 text-xs font-semibold text-center text-sky-700 bg-white transition border border-sky-700/60 rounded-lg hover:bg-sky-600/20 md:text-sm"
 75 |                 >
 76 |                   <svg
 77 |                     xmlns="http://www.w3.org/2000/svg"
 78 |                     fill="none"
 79 |                     viewBox="0 0 24 24"
 80 |                     stroke-width="1.5"
 81 |                     stroke="currentColor"
 82 |                     class="w-5 h-5 mr-1"
 83 |                   >
 84 |                     <path
 85 |                       stroke-linecap="round"
 86 |                       stroke-linejoin="round"
 87 |                       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"
 88 |                     />
 89 |                   </svg>
 90 |                   Demo
 91 |                 </a>
 92 |               </li>
 93 |               {project.youtube != null && (
 94 |                 <li>
 95 |                   <a
 96 |                     href={project.youtube}
 97 |                     target="_blank"
 98 |                     rel="noopener noreferrer"
 99 |                     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"
100 |                   >
101 |                     <svg
102 |                       class="w-5 h-5 mr-1"
103 |                       viewBox="0 0 256 180"
104 |                       width="256"
105 |                       height="180"
106 |                       xmlns="http://www.w3.org/2000/svg"
107 |                       preserveAspectRatio="xMidYMid"
108 |                     >
109 |                       <path
110 |                         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"
111 |                         fill="red"
112 |                       />
113 |                       <path
114 |                         fill="#FFF"
115 |                         d="m102.421 128.06 66.328-38.418-66.328-38.418z"
116 |                       />
117 |                     </svg>
118 |                     Vídeo
119 |                   </a>
120 |                 </li>
121 |               )}
122 |             </ul>
123 |           </div>
124 |         </article>
125 |       )
126 |     })
127 |   }
128 |   <article
129 |     class="min-h-60 relative items-center text-black rounded-lg bg-purple-50"
130 |   >
131 |     <a
132 |       href="https://twitch.tv/midudev"
133 |       target="_blank"
134 |       rel="noopener noreferrer"
135 |       class="group hover:scale-110 transition flex justify-center flex-col h-full items-center font-semibold text-purple-700 text-center text-xl"
136 |     >
137 |       <svg
138 |         class="w-16 h-16 mb-2"
139 |         xmlns="http://www.w3.org/2000/svg"
140 |         width="118"
141 |         height="138"
142 |         viewBox="0 0 118 138"
143 |         ><g fill="none" fill-rule="evenodd"
144 |           ><path
145 |             fill="#FFF"
146 |             d="m107.8058 63.7036-19.602 19.601h-19.6l-17.152 17.151v-17.151h-22.05V9.8006h78.404z"
147 |           ></path><path
148 |             fill="#9146FF"
149 |             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"
150 |           ></path></g
151 |         ></svg
152 |       >
153 |       Próximamente en Twitch<br />
154 |       siguiente proyecto...
155 |     </a>
156 |   </article>
157 | </div>
158 | 


--------------------------------------------------------------------------------
/web/src/consts.js:
--------------------------------------------------------------------------------
 1 | export const PROJECTS = [
 2 |   {
 3 |     slug: "01-tinder-swipe",
 4 |     title: "Tinder Swipe",
 5 |     description:
 6 |       "Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript.",
 7 |     learnings: [
 8 |       "DOM",
 9 |       "Animaciones con gestos",
10 |       "Eventos de mouse y touch",
11 |       "Transiciones CSS",
12 |     ],
13 |     youtube: 'https://www.youtube.com/watch?v=u01WD_YNENY'
14 |   },
15 |   {
16 |     slug: "02-arkanoid-game",
17 |     title: "Arkanoid Game",
18 |     description:
19 |       "Juego mítico y clásico de Arkanoid para controlar con teclado",
20 |     learnings: [
21 |       "Dibujar en Canvas",
22 |       "Eventos de teclado",
23 |       "RequestAnimationFrame",
24 |       "Sprites"
25 |     ],
26 |     youtube: 'https://www.youtube.com/watch?v=b6du6MvQmuQ'
27 |   },
28 |   {
29 |     slug: "03-midu-typing-game",
30 |     title: "Reto de Mecanografía",
31 |     description: "Pon a prueba tus habilidades de mecanografía con este reto",
32 |     learnings: [
33 |       "DOM",
34 |       "Eventos de teclado",
35 |       "Manejo de clases",
36 |       "Optimización selectores"
37 |     ],
38 |     theme: {
39 |       isDark: true
40 |     },
41 |     youtube: 'https://www.youtube.com/watch?v=157qVlTelOg&t=135s'
42 |   }
43 | ]


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


--------------------------------------------------------------------------------
/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 | }


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