Breakout!

\n \n

How To Play:

\n Use your right and left keys to move the paddle to bounce the ball up\n and break the blocks.\n

If you miss the ball, your score and the blocks will reset.

\n \n

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[153,180],{"_102":188,"_95":189,"_154":190,"_156":155,"_157":139,"_158":191,"_160":117,"_104":192,"_99":32,"_162":174,"_164":193,"_165":22,"_166":-5,"_167":194,"_98":195},"0893f9ae-feb7-11ef-b98e-569c3dd06744","plan.txt","0893fa6c-feb7-11ef-b98e-569c3dd06744",3,["D",1741724754807],"1. Create canvas context \n2. Create and draw ball \n3. Create and draw paddle \n4. Create bricks \n5. Draw score \n6. Add update() - Animate - requestAnimationFrame(cb) \n7. Move paddle \n8. Keyboard event handlers to move paddle \n9. Move ball \n10. Add wall bounderies \n11. Increase score when bricks break\n12. Lose - redraw bricks, reset score",[],[153,189],{"_102":197,"_95":198,"_154":199,"_156":155,"_157":139,"_158":200,"_160":117,"_104":201,"_99":32,"_162":202,"_164":203,"_165":22,"_166":-5,"_167":204,"_98":205},"089a368e-feb7-11ef-b98e-569c3dd06744","script.js","089a374c-feb7-11ef-b98e-569c3dd06744",4,["D",1741724754852],"script","const rulesBtn = document.getElementById('rules-btn');\nconst closeBtn = document.getElementById('close-btn');\nconst rules = document.getElementById('rules');\nconst canvas = document.getElementById('canvas');\nconst ctx = canvas.getContext('2d');\n\nlet score = 0;\n\nconst brickRowCount = 9;\nconst brickColumnCount = 5;\nconst delay = 500; //delay to reset the game\n\n// Create ball props\nconst ball = {\n x: canvas.width / 2,\n y: canvas.height / 2,\n size: 10,\n speed: 4,\n dx: 4,\n dy: -4,\n visible: true\n};\n\n// Create paddle props\nconst paddle = {\n x: canvas.width / 2 - 40,\n y: canvas.height - 20,\n w: 80,\n h: 10,\n speed: 8,\n dx: 0,\n visible: true\n};\n\n// Create brick props\nconst brickInfo = {\n w: 70,\n h: 20,\n padding: 10,\n offsetX: 45,\n offsetY: 60,\n visible: true\n};\n\n// Create bricks\nconst bricks = [];\nfor (let i = 0; i < brickRowCount; i++) {\n bricks[i] = [];\n for (let j = 0; j < brickColumnCount; j++) {\n const x = i * (brickInfo.w + brickInfo.padding) + brickInfo.offsetX;\n const y = j * (brickInfo.h + brickInfo.padding) + brickInfo.offsetY;\n bricks[i][j] = { x, y, ...brickInfo };\n }\n}\n\n// Draw ball on canvas\nfunction drawBall() {\n ctx.beginPath();\n ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);\n ctx.fillStyle = ball.visible ? '#0095dd' : 'transparent';\n ctx.fill();\n ctx.closePath();\n}\n\n// Draw paddle on canvas\nfunction drawPaddle() {\n ctx.beginPath();\n ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h);\n ctx.fillStyle = paddle.visible ? '#0095dd' : 'transparent';\n ctx.fill();\n ctx.closePath();\n}\n\n// Draw score on canvas\nfunction drawScore() {\n ctx.font = '20px Arial';\n ctx.fillText(`Score: ${score}`, canvas.width - 100, 30);\n}\n\n// Draw bricks on canvas\nfunction drawBricks() {\n bricks.forEach(column => {\n column.forEach(brick => {\n ctx.beginPath();\n ctx.rect(brick.x, brick.y, brick.w, brick.h);\n ctx.fillStyle = brick.visible ? '#0095dd' : 'transparent';\n ctx.fill();\n ctx.closePath();\n });\n });\n}\n\n// Move paddle on canvas\nfunction movePaddle() {\n paddle.x += paddle.dx;\n\n // Wall detection\n if (paddle.x + paddle.w > canvas.width) {\n paddle.x = canvas.width - paddle.w;\n }\n\n if (paddle.x < 0) {\n paddle.x = 0;\n }\n}\n\n// Move ball on canvas\nfunction moveBall() {\n ball.x += ball.dx;\n ball.y += ball.dy;\n\n // Wall collision (right/left)\n if (ball.x + ball.size > canvas.width || ball.x - ball.size < 0) {\n ball.dx *= -1; // ball.dx = ball.dx * -1\n }\n\n // Wall collision (top/bottom)\n if (ball.y + ball.size > canvas.height || ball.y - ball.size < 0) {\n ball.dy *= -1;\n }\n\n // console.log(ball.x, ball.y);\n\n // Paddle collision\n if (\n ball.x - ball.size > paddle.x &&\n ball.x + ball.size < paddle.x + paddle.w &&\n ball.y + ball.size > paddle.y\n ) {\n ball.dy = -ball.speed;\n }\n\n // Brick collision\n bricks.forEach(column => {\n column.forEach(brick => {\n if (brick.visible) {\n if (\n ball.x - ball.size > brick.x && // left brick side check\n ball.x + ball.size < brick.x + brick.w && // right brick side check\n ball.y + ball.size > brick.y && // top brick side check\n ball.y - ball.size < brick.y + brick.h // bottom brick side check\n ) {\n ball.dy *= -1;\n brick.visible = false;\n\n increaseScore();\n }\n }\n });\n });\n\n // Hit bottom wall - Lose\n if (ball.y + ball.size > canvas.height) {\n showAllBricks();\n score = 0;\n }\n}\n\n// Increase score\nfunction increaseScore() {\n score++;\n\n if (score % (brickRowCount * brickColumnCount) === 0) {\n\n ball.visible = false;\n paddle.visible = false;\n\n //After 0.5 sec restart the game\n setTimeout(function () {\n showAllBricks();\n score = 0;\n paddle.x = canvas.width / 2 - 40;\n paddle.y = canvas.height - 20;\n ball.x = canvas.width / 2;\n ball.y = canvas.height / 2;\n ball.visible = true;\n paddle.visible = true;\n },delay)\n }\n}\n\n// Make all bricks appear\nfunction showAllBricks() {\n bricks.forEach(column => {\n column.forEach(brick => (brick.visible = true));\n });\n}\n\n// Draw everything\nfunction draw() {\n // clear canvas\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n drawBall();\n drawPaddle();\n drawScore();\n drawBricks();\n}\n\n// Update canvas drawing and animation\nfunction update() {\n movePaddle();\n moveBall();\n\n // Draw everything\n draw();\n\n requestAnimationFrame(update);\n}\n\nupdate();\n\n// Keydown event\nfunction keyDown(e) {\n if (e.key === 'Right' || e.key === 'ArrowRight') {\n paddle.dx = paddle.speed;\n } else if (e.key === 'Left' || e.key === 'ArrowLeft') {\n paddle.dx = -paddle.speed;\n }\n}\n\n// Keyup event\nfunction keyUp(e) {\n if (\n e.key === 'Right' ||\n e.key === 'ArrowRight' ||\n e.key === 'Left' ||\n e.key === 'ArrowLeft'\n ) {\n paddle.dx = 0;\n }\n}\n\n// Keyboard event handlers\ndocument.addEventListener('keydown', keyDown);\ndocument.addEventListener('keyup', keyUp);\n\n// Rules and close event handlers\nrulesBtn.addEventListener('click', () => rules.classList.add('show'));\ncloseBtn.addEventListener('click', () => rules.classList.remove('show'));\n",[],[153,198],{"_102":207,"_95":208,"_154":209,"_156":155,"_157":139,"_158":210,"_160":117,"_104":211,"_99":32,"_162":202,"_164":212,"_165":22,"_166":-5,"_167":213,"_98":214},"08a00d3e-feb7-11ef-82b7-569c3dd06744","style.css","08a00de8-feb7-11ef-82b7-569c3dd06744",5,["D",1741724754892],"* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #0095dd;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-family: Arial, Helvetica, sans-serif;\n min-height: 100vh;\n margin: 0;\n}\n\nh1 {\n font-size: 45px;\n color: #fff;\n}\n\ncanvas {\n background: #f0f0f0;\n display: block;\n border-radius: 5px;\n}\n\n.btn {\n cursor: pointer;\n border: 0;\n padding: 10px 20px;\n background: #000;\n color: #fff;\n border-radius: 5px;\n}\n\n.btn:focus {\n outline: 0;\n}\n\n.btn:hover {\n background: #222;\n}\n\n.btn:active {\n transform: scale(0.98);\n}\n\n.rules-btn {\n position: absolute;\n top: 30px;\n left: 30px;\n}\n\n.rules {\n position: absolute;\n top: 0;\n left: 0;\n background: #333;\n color: #fff;\n min-height: 100vh;\n width: 400px;\n padding: 20px;\n line-height: 1.5;\n transform: translateX(-400px);\n transition: transform 1s ease-in-out;\n}\n\n.rules.show {\n transform: translateX(0);\n}\n",[],[153,208],[153],{"_102":217,"_95":218,"_154":219,"_156":-5,"_157":139,"_158":220,"_160":117,"_104":221,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":222,"_98":270},"08a5b892-feb7-11ef-92cc-569c3dd06744","custom-video-player","4904c0e7-cddc-4e33-8d1e-2cc0f4813d74",6,["D",1741724754926],[223,247,254,262],{"_102":224,"_95":225,"_154":226,"_156":219,"_157":139,"_158":227,"_160":117,"_104":228,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":229,"_98":246},"08ac80f0-feb7-11ef-813f-569c3dd06744","css","288f7165-e6cf-4c0c-9e33-01cdcfe9e5f7",7,["D",1741724754972],[230,238],{"_102":231,"_95":232,"_154":233,"_156":226,"_157":139,"_158":227,"_160":117,"_104":234,"_99":32,"_162":202,"_164":235,"_165":22,"_166":-5,"_167":236,"_98":237},"08ac7876-feb7-11ef-813f-569c3dd06744","progress.css","08ac7916-feb7-11ef-813f-569c3dd06744",["D",1741724754972],"/* SOURCE: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */\r\n\r\ninput[type='range'] {\r\n\t-webkit-appearance: none; /* Hides the slider so that custom slider can be made */\r\n\twidth: 100%; /* Specific width is required for Firefox. */\r\n\tbackground: transparent; /* Otherwise white in Chrome */\r\n}\r\n\r\ninput[type='range']::-webkit-slider-thumb {\r\n\t-webkit-appearance: none;\r\n}\r\n\r\ninput[type='range']:focus {\r\n\toutline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */\r\n}\r\n\r\ninput[type='range']::-ms-track {\r\n\twidth: 100%;\r\n\tcursor: pointer;\r\n\r\n\t/* Hides the slider so custom styles can be added */\r\n\tbackground: transparent;\r\n\tborder-color: transparent;\r\n\tcolor: transparent;\r\n}\r\n\r\n/* Special styling for WebKit/Blink */\r\ninput[type='range']::-webkit-slider-thumb {\r\n\t-webkit-appearance: none;\r\n\tborder: 1px solid #000000;\r\n\theight: 36px;\r\n\twidth: 16px;\r\n\tborder-radius: 3px;\r\n\tbackground: #ffffff;\r\n\tcursor: pointer;\r\n\tmargin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */\r\n\tbox-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */\r\n}\r\n\r\n/* All the same stuff for Firefox */\r\ninput[type='range']::-moz-range-thumb {\r\n\tbox-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\r\n\tborder: 1px solid #000000;\r\n\theight: 36px;\r\n\twidth: 16px;\r\n\tborder-radius: 3px;\r\n\tbackground: #ffffff;\r\n\tcursor: pointer;\r\n}\r\n\r\n/* All the same stuff for IE */\r\ninput[type='range']::-ms-thumb {\r\n\tbox-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\r\n\tborder: 1px solid #000000;\r\n\theight: 36px;\r\n\twidth: 16px;\r\n\tborder-radius: 3px;\r\n\tbackground: #ffffff;\r\n\tcursor: pointer;\r\n}\r\n\r\ninput[type='range']::-webkit-slider-runnable-track {\r\n\twidth: 100%;\r\n\theight: 8.4px;\r\n\tcursor: pointer;\r\n\tbox-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\r\n\tbackground: #3071a9;\r\n\tborder-radius: 1.3px;\r\n\tborder: 0.2px solid #010101;\r\n}\r\n\r\ninput[type='range']:focus::-webkit-slider-runnable-track {\r\n\tbackground: #367ebd;\r\n}\r\n\r\ninput[type='range']::-moz-range-track {\r\n\twidth: 100%;\r\n\theight: 8.4px;\r\n\tcursor: pointer;\r\n\tbox-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\r\n\tbackground: #3071a9;\r\n\tborder-radius: 1.3px;\r\n\tborder: 0.2px solid #010101;\r\n}\r\n\r\ninput[type='range']::-ms-track {\r\n\twidth: 100%;\r\n\theight: 8.4px;\r\n\tcursor: pointer;\r\n\tbackground: transparent;\r\n\tborder-color: transparent;\r\n\tborder-width: 16px 0;\r\n\tcolor: transparent;\r\n}\r\ninput[type='range']::-ms-fill-lower {\r\n\tbackground: #2a6495;\r\n\tborder: 0.2px solid #010101;\r\n\tborder-radius: 2.6px;\r\n\tbox-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\r\n}\r\ninput[type='range']:focus::-ms-fill-lower {\r\n\tbackground: #3071a9;\r\n}\r\ninput[type='range']::-ms-fill-upper {\r\n\tbackground: #3071a9;\r\n\tborder: 0.2px solid #010101;\r\n\tborder-radius: 2.6px;\r\n\tbox-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;\r\n}\r\ninput[type='range']:focus::-ms-fill-upper {\r\n\tbackground: #367ebd;\r\n}\r\n",[],[218,225,232],{"_102":239,"_95":208,"_154":240,"_156":226,"_157":139,"_158":241,"_160":117,"_104":242,"_99":32,"_162":202,"_164":243,"_165":22,"_166":-5,"_167":244,"_98":245},"08b1b458-feb7-11ef-9519-569c3dd06744","08b1b520-feb7-11ef-9519-569c3dd06744",8,["D",1741724755006],"@import url('https://fonts.googleapis.com/css?family=Questrial&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Questrial', sans-serif;\n background-color: #666;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n max-height: 100vh;\n margin: 0;\n}\n\nh1 {\n color: #fff;\n}\n\n.screen {\n cursor: pointer;\n width: 60%;\n background-color: #000 !important;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n}\n\n.controls {\n background: #333;\n color: #fff;\n width: 60%;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 10px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n}\n\n.controls .btn {\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n\n.controls .fa-play {\n color: #28a745;\n}\n\n.controls .fa-stop {\n color: #dc3545;\n}\n\n.controls .fa-pause {\n color: #fff;\n}\n\n.controls .timestamp {\n color: #fff;\n font-weight: bold;\n margin-left: 10px;\n}\n\n.btn:focus {\n outline: 0;\n}\n\n@media (max-width: 800px) {\n .screen,\n .controls {\n width: 90%;\n }\n}\n",[],[218,225,208],[218,225],{"_102":248,"_95":171,"_154":249,"_156":219,"_157":139,"_158":220,"_160":117,"_104":250,"_99":32,"_162":174,"_164":251,"_165":22,"_166":-5,"_167":252,"_98":253},"08a5b1d0-feb7-11ef-92cc-569c3dd06744","08a5b298-feb7-11ef-92cc-569c3dd06744",["D",1741724754926],"## Custom Video Player\r\n\r\nCustom video player using the HTML5 video element and it's JavaScript API with a custom design\r\n\r\n## Project Specifications\r\n\r\n- Display custom video player styled with CSS\r\n- Play/pause\r\n- Stop\r\n- Video progress bar\r\n- Set progress bar time\r\n- Display time in mins and seconds\r\n",[],[218,171],{"_102":255,"_95":180,"_154":256,"_156":219,"_157":139,"_158":257,"_160":117,"_104":258,"_99":32,"_162":183,"_164":259,"_165":22,"_166":-5,"_167":260,"_98":261},"08b7bb78-feb7-11ef-9c16-569c3dd06744","08b7bc36-feb7-11ef-9c16-569c3dd06744",9,["D",1741724755046],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n Custom Video Player\n \n \n \n \n \n

Custom Video Player

\n \n

\n \n \n \n 00:00\n

\n\n \n \n\n\n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[218,180],{"_102":263,"_95":198,"_154":264,"_156":219,"_157":139,"_158":265,"_160":117,"_104":266,"_99":32,"_162":202,"_164":267,"_165":22,"_166":-5,"_167":268,"_98":269},"08be5ed8-feb7-11ef-a694-569c3dd06744","08be5fa0-feb7-11ef-a694-569c3dd06744",10,["D",1741724755089],"const video = document.getElementById('video');\nconst play = document.getElementById('play');\nconst stop = document.getElementById('stop');\nconst progress = document.getElementById('progress');\nconst timestamp = document.getElementById('timestamp');\n\n// Play & pause video\nfunction toggleVideoStatus() {\n if (video.paused) {\n video.play();\n } else {\n video.pause();\n }\n}\n\n// update play/pause icon\nfunction updatePlayIcon() {\n if (video.paused) {\n play.innerHTML = '';\n } else {\n play.innerHTML = '';\n }\n}\n\n// Update progress & timestamp\nfunction updateProgress() {\n progress.value = (video.currentTime / video.duration) * 100;\n\n // Get the minutes\n let mins = Math.floor(video.currentTime / 60);\n if(mins < video.duration){\n mins = '0' + String(mins);\n }\n\n // Get Seconds\n let secs = Math.floor(video.currentTime % 60);\n if(secs < video.duration){\n secs = '0' + String(secs);\n }\n\n timestamp.innerHTML = `${mins}:${secs}`;\n}\n\n// Set video time to progress\nfunction setVideoProgress() {\n video.currentTime = (+progress.value * video.duration) / 100;\n}\n\n// Stop video\nfunction stopVideo() {\n video.currentTime = 0;\n video.pause();\n}\n\n// Event listeners\nvideo.addEventListener('click', toggleVideoStatus);\nvideo.addEventListener('pause', updatePlayIcon);\nvideo.addEventListener('play', updatePlayIcon);\nvideo.addEventListener('timeupdate', updateProgress);\n\nplay.addEventListener('click', toggleVideoStatus);\n\nstop.addEventListener('click', stopVideo);\n\nprogress.addEventListener('change', setVideoProgress);\n",[],[218,198],[218],{"_102":272,"_95":273,"_154":274,"_156":-5,"_157":139,"_158":275,"_160":117,"_104":276,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":277,"_98":310},"08c3f05a-feb7-11ef-b702-569c3dd06744","dom-array-methods","448ca4cd-712a-44d3-acff-e647b5a55360",11,["D",1741724755125],[278,285,294,302],{"_102":279,"_95":180,"_154":280,"_156":274,"_157":139,"_158":275,"_160":117,"_104":281,"_99":32,"_162":183,"_164":282,"_165":22,"_166":-5,"_167":283,"_98":284},"08c3e36c-feb7-11ef-b702-569c3dd06744","08c3e434-feb7-11ef-b702-569c3dd06744",["D",1741724755125],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n DOM Array Methods\n \n \n

DOM Array Methods

\n\n

\n \n\n

Person Wealth

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[273,180],{"_102":286,"_95":287,"_154":288,"_156":274,"_157":139,"_158":289,"_160":117,"_104":290,"_99":32,"_162":174,"_164":291,"_165":22,"_166":-5,"_167":292,"_98":293},"08c8d99e-feb7-11ef-8137-569c3dd06744","readme.md","08c8da34-feb7-11ef-8137-569c3dd06744",12,["D",1741724755158],"## DOM Array Methods\n\nProject to teach high order array methods and DOM manipulation\n\n## Project Specifications\n\n- Fetch random users from the [randomuser.me](https://randomuser.me) API\n- Use forEach() to loop and output user/wealth\n- Use map() to double wealth\n- Use filter() to filter only millionaires\n- Use sort() to sort by wealth\n- Use reduce() to add all wealth\n",[],[273,287],{"_102":295,"_95":198,"_154":296,"_156":274,"_157":139,"_158":297,"_160":117,"_104":298,"_99":32,"_162":202,"_164":299,"_165":22,"_166":-5,"_167":300,"_98":301},"08cd4128-feb7-11ef-9d99-569c3dd06744","08cd41d2-feb7-11ef-9d99-569c3dd06744",13,["D",1741724755188],"const main = document.getElementById('main');\nconst addUserBtn = document.getElementById('add-user');\nconst doubleBtn = document.getElementById('double');\nconst showMillionairesBtn = document.getElementById('show-millionaires');\nconst sortBtn = document.getElementById('sort');\nconst calculateWealthBtn = document.getElementById('calculate-wealth');\n\nlet data = [];\n\ngetRandomUser();\ngetRandomUser();\ngetRandomUser();\n\n// Fetch random user and add money\nasync function getRandomUser() {\n const res = await fetch('https://randomuser.me/api');\n const data = await res.json();\n\n const user = data.results[0];\n\n const newUser = {\n name: `${user.name.first} ${user.name.last}`,\n money: Math.floor(Math.random() * 1000000)\n };\n\n addData(newUser);\n}\n\n// Double eveyones money\nfunction doubleMoney() {\n data = data.map(user => {\n return { ...user, money: user.money * 2 };\n });\n\n updateDOM();\n}\n\n// Sort users by richest\nfunction sortByRichest() {\n console.log(123);\n data.sort((a, b) => b.money - a.money);\n\n updateDOM();\n}\n\n// Filter only millionaires\nfunction showMillionaires() {\n data = data.filter(user => user.money > 1000000);\n\n updateDOM();\n}\n\n// Calculate the total wealth\nfunction calculateWealth() {\n const wealth = data.reduce((acc, user) => (acc += user.money), 0);\n\n const wealthEl = document.createElement('div');\n wealthEl.innerHTML = `

Total Wealth: ${formatMoney(\n wealth\n )}

`;\n main.appendChild(wealthEl);\n}\n\n// Add new obj to data arr\nfunction addData(obj) {\n data.push(obj);\n\n updateDOM();\n}\n\n// Update DOM\nfunction updateDOM(providedData = data) {\n // Clear main div\n main.innerHTML = '

Person Wealth

';\n\n providedData.forEach(item => {\n const element = document.createElement('div');\n element.classList.add('person');\n element.innerHTML = `${item.name} ${formatMoney(\n item.money\n )}`;\n main.appendChild(element);\n });\n}\n\n// Format number as money - https://stackoverflow.com/questions/149055/how-to-format-numbers-as-currency-string\nfunction formatMoney(number) {\n return '$' + number.toFixed(2).replace(/\\d(?=(\\d{3})+\\.)/g, '$&,');\n}\n\n// Event listeners\naddUserBtn.addEventListener('click', getRandomUser);\ndoubleBtn.addEventListener('click', doubleMoney);\nsortBtn.addEventListener('click', sortByRichest);\nshowMillionairesBtn.addEventListener('click', showMillionaires);\ncalculateWealthBtn.addEventListener('click', calculateWealth);\n",[],[273,198],{"_102":303,"_95":208,"_154":304,"_156":274,"_157":139,"_158":305,"_160":117,"_104":306,"_99":32,"_162":202,"_164":307,"_165":22,"_166":-5,"_167":308,"_98":309},"08d39f46-feb7-11ef-b98e-569c3dd06744","08d39ffa-feb7-11ef-b98e-569c3dd06744",14,["D",1741724755228],"* {\n box-sizing: border-box;\n}\n\nbody {\n background: #f4f4f4;\n font-family: Arial, Helvetica, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n}\n\n.container {\n display: flex;\n padding: 20px;\n margin: 0 auto;\n max-width: 100%;\n width: 800px;\n}\n\naside {\n padding: 10px 20px;\n width: 250px;\n border-right: 1px solid #111;\n}\n\nbutton {\n cursor: pointer;\n background-color: #fff;\n border: solid 1px #111;\n border-radius: 5px;\n display: block;\n width: 100%;\n padding: 10px;\n margin-bottom: 20px;\n font-weight: bold;\n font-size: 14px;\n}\n\nmain {\n flex: 1;\n padding: 10px 20px;\n}\n\nh2 {\n border-bottom: 1px solid #111;\n padding-bottom: 10px;\n display: flex;\n justify-content: space-between;\n font-weight: 300;\n margin: 0 0 20px;\n}\n\nh3 {\n background-color: #fff;\n border-bottom: 1px solid #111;\n padding: 10px;\n display: flex;\n justify-content: space-between;\n font-weight: 300;\n margin: 20px 0 0;\n}\n\n.person {\n display: flex;\n justify-content: space-between;\n font-size: 20px;\n margin-bottom: 10px;\n}\n",[],[273,208],[273],{"_102":312,"_95":313,"_154":314,"_156":-5,"_157":139,"_158":315,"_160":117,"_104":316,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":317,"_98":349},"08d8e0b4-feb7-11ef-92cc-569c3dd06744","exchange-rate","dc95c042-0fa5-4f6e-95be-5fa1ebc40eb2",15,["D",1741724755263],[318,325,333,341],{"_102":319,"_95":171,"_154":320,"_156":314,"_157":139,"_158":315,"_160":117,"_104":321,"_99":32,"_162":174,"_164":322,"_165":22,"_166":-5,"_167":323,"_98":324},"08d8dc18-feb7-11ef-92cc-569c3dd06744","08d8dce0-feb7-11ef-92cc-569c3dd06744",["D",1741724755263],"## Exchange Rate\r\n\r\nSelect countries to get the exchange rate for a specific amount\r\n\r\n## Project Specifications\r\n\r\n- Display UI with 2 select lists for countries and 2 inputs for amounts\r\n- Fetch exchange rates from API (https://api.exchangerate-api.com)\r\n- Display the values for both countries\r\n- Update values on amount change\r\n- Swap country rates\r\n",[],[313,171],{"_102":326,"_95":180,"_154":327,"_156":314,"_157":139,"_158":328,"_160":117,"_104":329,"_99":32,"_162":183,"_164":330,"_165":22,"_166":-5,"_167":331,"_98":332},"08dddb00-feb7-11ef-9c16-569c3dd06744","08dddbaa-feb7-11ef-9c16-569c3dd06744",16,["D",1741724755296],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n Exchange Rate Calculator\n \n \n \n $\"\"$ \n

Exchange Rate Calculator

Choose the currency and the amounts to get the exchange rate

\n\n

\n \n \n

\n\n

\n \n

\n\n

\n \n \n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[313,180],{"_102":334,"_95":198,"_154":335,"_156":314,"_157":139,"_158":336,"_160":117,"_104":337,"_99":32,"_162":202,"_164":338,"_165":22,"_166":-5,"_167":339,"_98":340},"08e377a4-feb7-11ef-9c16-569c3dd06744","08e37858-feb7-11ef-9c16-569c3dd06744",17,["D",1741724755332],"const currencyEl_one = document.getElementById('currency-one');\r\nconst amountEl_one = document.getElementById('amount-one');\r\nconst currencyEl_two = document.getElementById('currency-two');\r\nconst amountEl_two = document.getElementById('amount-two');\r\nconst rateEl = document.getElementById('rate');\r\nconst swap = document.getElementById('swap');\r\n\r\nfunction calculate() {\r\n const currency_one = currencyEl_one.value;\r\n const currency_two = currencyEl_two.value;\r\n fetch(\"https://open.exchangerate-api.com/v6/latest\")\r\n .then(res => res.json())\r\n .then(data => {\r\n // console.log(data);\r\n const rate = data.rates[currency_two] / data.rates[currency_one];\r\n rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;\r\n amountEl_two.value = (amountEl_one.value * (rate)).toFixed(2);\r\n });\r\n}\r\n\r\n\r\n// Event Listener\r\ncurrencyEl_one.addEventListener('change', calculate);\r\namountEl_one.addEventListener('input', calculate);\r\ncurrencyEl_two.addEventListener('change', calculate);\r\namountEl_two.addEventListener('input', calculate);\r\n\r\nswap.addEventListener('click', () => {\r\n const temp = currencyEl_one.value;\r\n currencyEl_one.value = currencyEl_two.value;\r\n currencyEl_two.value = temp;\r\n calculate();\r\n});\r\n\r\n\r\ncalculate();",[],[313,198],{"_102":342,"_95":208,"_154":343,"_156":314,"_157":139,"_158":344,"_160":117,"_104":345,"_99":32,"_162":202,"_164":346,"_165":22,"_166":-5,"_167":347,"_98":348},"08e9161e-feb7-11ef-b98e-569c3dd06744","08e916be-feb7-11ef-b98e-569c3dd06744",18,["D",1741724755369],":root {\n --primary-color: #5fbaa7;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f4f4f4;\n font-family: Arial, Helvetica, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n padding: 20px;\n}\n\nh1 {\n color: var(--primary-color);\n}\n\np {\n text-align: center;\n}\n\n.btn {\n color: #fff;\n background: var(--primary-color);\n cursor: pointer;\n border-radius: 5px;\n font-size: 12px;\n padding: 5px 12px;\n}\n\n.money-img {\n width: 150px;\n}\n\n.currency {\n padding: 40px 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.currency select {\n padding: 10px 20px 10px 10px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n border: 1px solid #dedede;\n font-size: 16px;\n /* You may not need these following lines. The arrow did not show for me on MacOS/Chrome so I added it. Just remove it if you would like */\n background: transparent;\n background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');\n background-position: right 10px top 50%, 0, 0;\n background-size: 12px auto, 100%;\n background-repeat: no-repeat;\n}\n\n.currency input {\n border: 0;\n background: transparent;\n font-size: 30px;\n text-align: right;\n}\n\n.swap-rate-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.rate {\n color: var(--primary-color);\n font-size: 14px;\n padding: 0 10px;\n}\n\nselect:focus,\ninput:focus,\nbutton:focus {\n outline: 0;\n}\n\n@media (max-width: 600px) {\n .currency input {\n width: 200px;\n }\n}\n",[],[313,208],[313],{"_102":351,"_95":352,"_154":353,"_156":-5,"_157":139,"_158":354,"_160":117,"_104":355,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":356,"_98":388},"08eebf42-feb7-11ef-9d99-569c3dd06744","expense-tracker","c0a7bdf2-ff2b-4951-a946-13bee3e4fd86",19,["D",1741724755406],[357,364,372,380],{"_102":358,"_95":180,"_154":359,"_156":353,"_157":139,"_158":354,"_160":117,"_104":360,"_99":32,"_162":183,"_164":361,"_165":22,"_166":-5,"_167":362,"_98":363},"08eebb6e-feb7-11ef-9d99-569c3dd06744","08eebc04-feb7-11ef-9d99-569c3dd06744",["D",1741724755406],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n Expense Tracker\n \n \n

Expense Tracker

\n\n

Your Balance

$0.00

\n\n

Income

+$0.00

Expense

-$0.00

\n\n

History

\n \n \n\n

Add new transaction

\n \n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[352,180],{"_102":365,"_95":287,"_154":366,"_156":353,"_157":139,"_158":367,"_160":117,"_104":368,"_99":32,"_162":174,"_164":369,"_165":22,"_166":-5,"_167":370,"_98":371},"08f31d3a-feb7-11ef-b702-569c3dd06744","08f31e0c-feb7-11ef-b702-569c3dd06744",20,["D",1741724755436],"## Expense Tracker\n\nKeep track of income and expenses. Add and remove items and save to local storage\n\n## Project Specifications\n\n- Create UI for project\n- Display transaction items in DOM\n- Show balance, expense and income totals\n- Add new transation and reflect in total\n- Delete items from DOM\n- Persist to local storage\n",[],[352,287],{"_102":373,"_95":198,"_154":374,"_156":353,"_157":139,"_158":375,"_160":117,"_104":376,"_99":32,"_162":202,"_164":377,"_165":22,"_166":-5,"_167":378,"_98":379},"08f995ac-feb7-11ef-a694-569c3dd06744","08f99656-feb7-11ef-a694-569c3dd06744",21,["D",1741724755477],"const balance = document.getElementById('balance');\nconst money_plus = document.getElementById('money-plus');\nconst money_minus = document.getElementById('money-minus');\nconst list = document.getElementById('list');\nconst form = document.getElementById('form');\nconst text = document.getElementById('text');\nconst amount = document.getElementById('amount');\n\n// const dummyTransactions = [\n// { id: 1, text: 'Flower', amount: -20 },\n// { id: 2, text: 'Salary', amount: 300 },\n// { id: 3, text: 'Book', amount: -10 },\n// { id: 4, text: 'Camera', amount: 150 }\n// ];\n\nconst localStorageTransactions = JSON.parse(\n localStorage.getItem('transactions')\n);\n\nlet transactions =\n localStorage.getItem('transactions') !== null ? localStorageTransactions : [];\n\n// Add transaction\nfunction addTransaction(e) {\n e.preventDefault();\n\n if (text.value.trim() === '' || amount.value.trim() === '') {\n alert('Please add a text and amount');\n } else {\n const transaction = {\n id: generateID(),\n text: text.value,\n amount: +amount.value\n };\n\n transactions.push(transaction);\n\n addTransactionDOM(transaction);\n\n updateValues();\n\n updateLocalStorage();\n\n text.value = '';\n amount.value = '';\n }\n}\n\n// Generate random ID\nfunction generateID() {\n return Math.floor(Math.random() * 100000000);\n}\n\n// Add transactions to DOM list\nfunction addTransactionDOM(transaction) {\n // Get sign\n const sign = transaction.amount < 0 ? '-' : '+';\n\n const item = document.createElement('li');\n\n // Add class based on value\n item.classList.add(transaction.amount < 0 ? 'minus' : 'plus');\n\n item.innerHTML = `\n ${transaction.text} ${sign}${Math.abs(\n transaction.amount\n )} \n `;\n\n list.appendChild(item);\n}\n\n// Update the balance, income and expense\nfunction updateValues() {\n const amounts = transactions.map(transaction => transaction.amount);\n\n const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);\n\n const income = amounts\n .filter(item => item > 0)\n .reduce((acc, item) => (acc += item), 0)\n .toFixed(2);\n\n const expense = (\n amounts.filter(item => item < 0).reduce((acc, item) => (acc += item), 0) *\n -1\n ).toFixed(2);\n\n balance.innerText = `$${total}`;\n money_plus.innerText = `$${income}`;\n money_minus.innerText = `$${expense}`;\n}\n\n// Remove transaction by ID\nfunction removeTransaction(id) {\n transactions = transactions.filter(transaction => transaction.id !== id);\n\n updateLocalStorage();\n\n init();\n}\n\n// Update local storage transactions\nfunction updateLocalStorage() {\n localStorage.setItem('transactions', JSON.stringify(transactions));\n}\n\n// Init app\nfunction init() {\n list.innerHTML = '';\n\n transactions.forEach(addTransactionDOM);\n updateValues();\n}\n\ninit();\n\nform.addEventListener('submit', addTransaction);\n",[],[352,198],{"_102":381,"_95":208,"_154":382,"_156":353,"_157":139,"_158":383,"_160":117,"_104":384,"_99":32,"_162":202,"_164":385,"_165":22,"_166":-5,"_167":386,"_98":387},"08ff0316-feb7-11ef-9d99-569c3dd06744","08ff03ac-feb7-11ef-9d99-569c3dd06744",22,["D",1741724755514],"@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n:root {\n --box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f7f7f7;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n font-family: 'Lato', sans-serif;\n font-size: 18px;\n}\n\n.container {\n margin: 30px auto;\n width: 400px;\n}\n\nh1 {\n letter-spacing: 1px;\n margin: 0;\n}\n\nh3 {\n border-bottom: 1px solid #bbb;\n padding-bottom: 10px;\n margin: 40px 0 10px;\n}\n\nh4 {\n margin: 0;\n text-transform: uppercase;\n}\n\n.inc-exp-container {\n background-color: #fff;\n box-shadow: var(--box-shadow);\n padding: 20px;\n display: flex;\n justify-content: space-between;\n margin: 20px 0;\n}\n\n.inc-exp-container > div {\n flex: 1;\n text-align: center;\n}\n\n.inc-exp-container > div:first-of-type {\n border-right: 1px solid #dedede;\n}\n\n.money {\n font-size: 20px;\n letter-spacing: 1px;\n margin: 5px 0;\n}\n\n.money.plus {\n color: #2ecc71;\n}\n\n.money.minus {\n color: #c0392b;\n}\n\nlabel {\n display: inline-block;\n margin: 10px 0;\n}\n\ninput[type='text'],\ninput[type='number'] {\n border: 1px solid #dedede;\n border-radius: 2px;\n display: block;\n font-size: 16px;\n padding: 10px;\n width: 100%;\n}\n\n.btn {\n cursor: pointer;\n background-color: #9c88ff;\n box-shadow: var(--box-shadow);\n color: #fff;\n border: 0;\n display: block;\n font-size: 16px;\n margin: 10px 0 30px;\n padding: 10px;\n width: 100%;\n}\n\n.btn:focus,\n.delete-btn:focus {\n outline: 0;\n}\n\n.list {\n list-style-type: none;\n padding: 0;\n margin-bottom: 40px;\n}\n\n.list li {\n background-color: #fff;\n box-shadow: var(--box-shadow);\n color: #333;\n display: flex;\n justify-content: space-between;\n position: relative;\n padding: 10px;\n margin: 10px 0;\n}\n\n.list li.plus {\n border-right: 5px solid #2ecc71;\n}\n\n.list li.minus {\n border-right: 5px solid #c0392b;\n}\n\n.delete-btn {\n cursor: pointer;\n background-color: #e74c3c;\n border: 0;\n color: #fff;\n font-size: 20px;\n line-height: 20px;\n padding: 2px 5px;\n position: absolute;\n top: 50%;\n left: 0;\n transform: translate(-100%, -50%);\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.list li:hover .delete-btn {\n opacity: 1;\n}\n",[],[352,208],[352],{"_102":390,"_95":391,"_154":392,"_156":-5,"_157":139,"_158":393,"_160":117,"_104":394,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":395,"_98":427},"0903d4d6-feb7-11ef-b702-569c3dd06744","form-validator","bfb57700-bec6-4304-ac7b-02280af95464",23,["D",1741724755544],[396,403,411,419],{"_102":397,"_95":180,"_154":398,"_156":392,"_157":139,"_158":393,"_160":117,"_104":399,"_99":32,"_162":183,"_164":400,"_165":22,"_166":-5,"_167":401,"_98":402},"0903d10c-feb7-11ef-b702-569c3dd06744","0903d1a2-feb7-11ef-b702-569c3dd06744",["D",1741724755544],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n Form Validator\n \n \n

\n \n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[391,180],{"_102":404,"_95":287,"_154":405,"_156":392,"_157":139,"_158":406,"_160":117,"_104":407,"_99":32,"_162":174,"_164":408,"_165":22,"_166":-5,"_167":409,"_98":410},"0908e3c2-feb7-11ef-9c16-569c3dd06744","0908e4c6-feb7-11ef-9c16-569c3dd06744",24,["D",1741724755578],"## Form Validator (Intro Project)\n\nSimple client side form validation. Check required, length, email and password match\n\n## Project Specifications\n\n- Create form UI\n- Show error messages under specific inputs\n- checkRequired() to accept array of inputs\n- checkLength() to check min and max length\n- checkEmail() to validate email with regex\n- checkPasswordsMatch() to match confirm password\n",[],[391,287],{"_102":412,"_95":198,"_154":413,"_156":392,"_157":139,"_158":414,"_160":117,"_104":415,"_99":32,"_162":202,"_164":416,"_165":22,"_166":-5,"_167":417,"_98":418},"090edf0c-feb7-11ef-9c16-569c3dd06744","090edfe8-feb7-11ef-9c16-569c3dd06744",25,["D",1741724755617],"const form = document.getElementById('form');\nconst username = document.getElementById('username');\nconst email = document.getElementById('email');\nconst password = document.getElementById('password');\nconst password2 = document.getElementById('password2');\n\n// Show input error message\nfunction showError(input, message) {\n const formControl = input.parentElement;\n formControl.className = 'form-control error';\n const small = formControl.querySelector('small');\n small.innerText = message;\n}\n\n// Show success outline\nfunction showSuccess(input) {\n const formControl = input.parentElement;\n formControl.className = 'form-control success';\n}\n\n// Check email is valid\nfunction checkEmail(input) {\n const re = /^(([^<>()\\[\\]\\\\.,;:\\s@\"]+(\\.[^<>()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n if (re.test(input.value.trim())) {\n showSuccess(input);\n } else {\n showError(input, 'Email is not valid');\n }\n}\n\n// Check required fields\nfunction checkRequired(inputArr) {\n let isRequired = false;\n inputArr.forEach(function(input) {\n if (input.value.trim() === '') {\n showError(input, `${getFieldName(input)} is required`);\n isRequired = true;\n } else {\n showSuccess(input);\n }\n });\n\n return isRequired;\n}\n\n// Check input length\nfunction checkLength(input, min, max) {\n if (input.value.length < min) {\n showError(\n input,\n `${getFieldName(input)} must be at least ${min} characters`\n );\n } else if (input.value.length > max) {\n showError(\n input,\n `${getFieldName(input)} must be less than ${max} characters`\n );\n } else {\n showSuccess(input);\n }\n}\n\n// Check passwords match\nfunction checkPasswordsMatch(input1, input2) {\n if (input1.value !== input2.value) {\n showError(input2, 'Passwords do not match');\n }\n}\n\n// Get fieldname\nfunction getFieldName(input) {\n return input.id.charAt(0).toUpperCase() + input.id.slice(1);\n}\n\n// Event listeners\nform.addEventListener('submit', function(e) {\n e.preventDefault();\n\n if(checkRequired([username, email, password, password2])){\n checkLength(username, 3, 15);\n checkLength(password, 6, 25);\n checkEmail(email);\n checkPasswordsMatch(password, password2);\n }\n\n});\n",[],[391,198],{"_102":420,"_95":208,"_154":421,"_156":392,"_157":139,"_158":422,"_160":117,"_104":423,"_99":32,"_162":202,"_164":424,"_165":22,"_166":-5,"_167":425,"_98":426},"0915198a-feb7-11ef-a694-569c3dd06744","09151a16-feb7-11ef-a694-569c3dd06744",26,["D",1741724755657],"@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');\n\n:root {\n --success-color: #2ecc71;\n --error-color: #e74c3c;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #f9fafb;\n font-family: 'Open Sans', sans-serif;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n}\n\n.container {\n background-color: #fff;\n border-radius: 5px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);\n width: 400px;\n}\n\nh2 {\n text-align: center;\n margin: 0 0 20px;\n}\n\n.form {\n padding: 30px 40px;\n}\n\n.form-control {\n margin-bottom: 10px;\n padding-bottom: 20px;\n position: relative;\n}\n\n.form-control label {\n color: #777;\n display: block;\n margin-bottom: 5px;\n}\n\n.form-control input {\n border: 2px solid #f0f0f0;\n border-radius: 4px;\n display: block;\n width: 100%;\n padding: 10px;\n font-size: 14px;\n}\n\n.form-control input:focus {\n outline: 0;\n border-color: #777;\n}\n\n.form-control.success input {\n border-color: var(--success-color);\n}\n\n.form-control.error input {\n border-color: var(--error-color);\n}\n\n.form-control small {\n color: var(--error-color);\n position: absolute;\n bottom: 0;\n left: 0;\n visibility: hidden;\n}\n\n.form-control.error small {\n visibility: visible;\n}\n\n.form button {\n cursor: pointer;\n background-color: #3498db;\n border: 2px solid #3498db;\n border-radius: 4px;\n color: #fff;\n display: block;\n font-size: 16px;\n padding: 10px;\n margin-top: 20px;\n width: 100%;\n}\n",[],[391,208],[391],{"_102":429,"_95":430,"_154":431,"_156":-5,"_157":139,"_158":432,"_160":117,"_104":433,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":434,"_98":465},"091a78e4-feb7-11ef-9d99-569c3dd06744","hangman","b2560ed3-2a49-4079-8a30-821c8ab27282",27,["D",1741724755692],[435,442,449,457],{"_102":436,"_95":171,"_154":437,"_156":431,"_157":139,"_158":432,"_160":117,"_104":438,"_99":32,"_162":174,"_164":439,"_165":22,"_166":-5,"_167":440,"_98":441},"091a75f6-feb7-11ef-9d99-569c3dd06744","091a768c-feb7-11ef-9d99-569c3dd06744",["D",1741724755692],"## Hangman Game\r\n\r\nSelect a letter to figure out a hidden word in a set amount of chances\r\n\r\n## Project Specifications\r\n\r\n- Display hangman pole and figure using SVG\r\n- Generate a random word\r\n- Display word in UI with correct letters\r\n- Display wrong letters\r\n- Show notification when select a letter twice\r\n- Show popup on win or lose\r\n- Play again button to reset game\r\n",[],[430,171],{"_102":443,"_95":180,"_154":444,"_156":431,"_157":139,"_158":138,"_160":117,"_104":445,"_99":200,"_162":183,"_164":446,"_165":22,"_166":-5,"_167":447,"_98":448},"af72c66e-feb8-11ef-88fd-569c3dd06744","091ec2be-feb7-11ef-92cc-569c3dd06744",["D",1741725464266],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n Hangman\n \n \n

Hangman

Find the hidden word - Enter a letter

\n \n\n

\n\n

\n\n \n \n\n \n

You have already entered this letter

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[430,180],{"_102":450,"_95":198,"_154":451,"_156":431,"_157":139,"_158":452,"_160":117,"_104":453,"_99":159,"_162":202,"_164":454,"_165":22,"_166":-5,"_167":455,"_98":456},"8787b4d4-feb8-11ef-a691-569c3dd06744","09241aca-feb7-11ef-a694-569c3dd06744",92,["D",1741725397296],"const wordEl = document.getElementById(\"word\");\nconst wrongLettersEl = document.getElementById(\"wrong-letters\");\nconst playAgainBtn = document.getElementById(\"play-button\");\nconst popup = document.getElementById(\"popup-container\");\nconst notification = document.getElementById(\"notification-container\");\nconst finalMessage = document.getElementById(\"final-message\");\nconst finalMessageRevealWord = document.getElementById(\"final-message-reveal-word\");\n\nconst figureParts = document.querySelectorAll(\".figure-part\");\n\nconst words = [\"application\", \"programming\", \"interface\", \"wizard\"];\n\nlet selectedWord = words[Math.floor(Math.random() * words.length)];\n\nlet playable = true;\n\nconst correctLetters = [];\nconst wrongLetters = [];\n\n// Show hidden word\nfunction displayWord() {\n wordEl.innerHTML = `\n ${\n selectedWord\n .split(\"\")\n .map(\n letter => `\n \n ${correctLetters.includes(letter) ? letter : \"\"}\n \n `,\n )\n .join(\"\")\n }\n `;\n\n const innerWord = wordEl.innerText.replace(/[ \\n]/g, \"\");\n\n if (innerWord === selectedWord) {\n finalMessage.innerText = \"Congratulations! You won! 😃\";\n finalMessageRevealWord.innerText = \"\";\n popup.style.display = \"flex\";\n\n playable = false;\n }\n}\n\n// Update the wrong letters\nfunction updateWrongLettersEl() {\n // Display wrong letters\n wrongLettersEl.innerHTML = `\n ${wrongLetters.length > 0 ? \"

Wrong

\" : \"\"}\n ${wrongLetters.map(letter => `${letter}`)}\n `;\n\n // Display parts\n figureParts.forEach((part, index) => {\n const errors = wrongLetters.length;\n\n if (index < errors) {\n part.style.display = \"block\";\n } else {\n part.style.display = \"none\";\n }\n });\n\n // Check if lost\n if (wrongLetters.length === figureParts.length) {\n finalMessage.innerText = \"Unfortunately you lost. 😕\";\n finalMessageRevealWord.innerText = `...the word was: ${selectedWord}`;\n popup.style.display = \"flex\";\n\n playable = false;\n }\n}\n\n// Show notification\nfunction showNotification() {\n notification.classList.add(\"show\");\n\n setTimeout(() => {\n notification.classList.remove(\"show\");\n }, 2000);\n}\n\n// Keydown letter press\nwindow.addEventListener(\"keydown\", e => {\n if (playable) {\n if (e.keyCode >= 65 && e.keyCode <= 90) {\n const letter = e.key.toLowerCase();\n\n if (selectedWord.includes(letter)) {\n if (!correctLetters.includes(letter)) {\n correctLetters.push(letter);\n\n displayWord();\n } else {\n showNotification();\n }\n } else {\n if (!wrongLetters.includes(letter)) {\n wrongLetters.push(letter);\n\n updateWrongLettersEl();\n } else {\n showNotification();\n }\n }\n }\n }\n});\n\n// Restart game and play again\nplayAgainBtn.addEventListener(\"click\", () => {\n playable = true;\n\n // Empty arrays\n correctLetters.splice(0);\n wrongLetters.splice(0);\n\n selectedWord = words[Math.floor(Math.random() * words.length)];\n\n displayWord();\n\n updateWrongLettersEl();\n\n popup.style.display = \"none\";\n});\n\ndisplayWord();",[],[430,198],{"_102":458,"_95":208,"_154":459,"_156":431,"_157":139,"_158":460,"_160":117,"_104":461,"_99":200,"_162":183,"_164":462,"_165":22,"_166":-5,"_167":463,"_98":464},"71491ae6-feb8-11ef-adef-569c3dd06744","09296cf0-feb7-11ef-9d99-569c3dd06744",91,["D",1741725359976],"export default function server(request: Request): Response {\n return new Response(\n `\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #34495e;\n color: #fff;\n font-family: Arial, Helvetica, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n height: 80vh;\n margin: 0;\n overflow: hidden;\n}\n\nh1 {\n margin: 20px 0 0;\n}\n\n.game-container {\n padding: 20px 30px;\n position: relative;\n margin: auto;\n height: 350px;\n width: 450px;\n}\n\n.figure-container {\n fill: transparent;\n stroke: #fff;\n stroke-width: 4px;\n stroke-linecap: round;\n}\n\n.figure-part {\n display: none;\n}\n\n.wrong-letters-container {\n position: absolute;\n top: 20px;\n right: 20px;\n display: flex;\n flex-direction: column;\n text-align: right;\n}\n\n.wrong-letters-container p {\n margin: 0 0 5px;\n}\n\n.wrong-letters-container span {\n font-size: 24px;\n}\n\n.word {\n display: flex;\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.letter {\n border-bottom: 3px solid #2980b9;\n display: inline-flex;\n font-size: 30px;\n align-items: center;\n justify-content: center;\n margin: 0 3px;\n height: 50px;\n width: 20px;\n}\n\n.popup-container {\n background-color: rgba(0, 0, 0, 0.3);\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n /* display: flex; */\n display: none;\n align-items: center;\n justify-content: center;\n}\n\n.popup {\n background: #2980b9;\n border-radius: 5px;\n box-shadow: 0 15px 10px 3px rgba(0, 0, 0, 0.1);\n padding: 20px;\n text-align: center;\n}\n\n.popup button {\n cursor: pointer;\n background-color: #fff;\n color: #2980b9;\n border: 0;\n margin-top: 20px;\n padding: 12px 20px;\n font-size: 16px;\n}\n\n.popup button:active {\n transform: scale(0.98);\n}\n\n.popup button:focus {\n outline: 0;\n}\n\n.notification-container {\n background-color: rgba(0, 0, 0, 0.3);\n border-radius: 10px 10px 0 0;\n padding: 15px 20px;\n position: absolute;\n bottom: -50px;\n transition: transform 0.3s ease-in-out;\n}\n\n.notification-container p {\n margin: 0;\n}\n\n.notification-container.show {\n transform: translateY(-50px);\n}`,\n {\n headers: {\n \"content-type\": \"text/css\",\n },\n },\n );\n}",[],[430,208],[430],{"_102":467,"_95":468,"_154":469,"_156":-5,"_157":139,"_158":470,"_160":117,"_104":471,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":472,"_98":504},"092de604-feb7-11ef-92cc-569c3dd06744","infinite_scroll_blog","7d12f2a5-2900-493e-ad2d-6b4b79d1ccf2",31,["D",1741724755820],[473,480,488,496],{"_102":474,"_95":180,"_154":475,"_156":469,"_157":139,"_158":470,"_160":117,"_104":476,"_99":32,"_162":183,"_164":477,"_165":22,"_166":-5,"_167":478,"_98":479},"092de280-feb7-11ef-92cc-569c3dd06744","092de316-feb7-11ef-92cc-569c3dd06744",["D",1741724755820],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n My Blog\n \n \n

My Blog

\n\n \n\n

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[468,180],{"_102":481,"_95":287,"_154":482,"_156":469,"_157":139,"_158":483,"_160":117,"_104":484,"_99":32,"_162":174,"_164":485,"_165":22,"_166":-5,"_167":486,"_98":487},"0932adb0-feb7-11ef-9c16-569c3dd06744","0932ae82-feb7-11ef-9c16-569c3dd06744",32,["D",1741724755852],"## Infinite Scrolling & Filter\n\nDisplay blog posts from [jsonplaceholder](https://jsonplaceholder.typicode.com) and add infinite scroll to fetch posts and also add filter box\n\n## Project Specifications\n\n- Create UI & custom CSS loader animation\n- Fetch initial posts from API and display\n- Scroll down, show loader and fetch next set of posts\n- Add filtering for fetched posts\n",[],[468,287],{"_102":489,"_95":198,"_154":490,"_156":469,"_157":139,"_158":491,"_160":117,"_104":492,"_99":32,"_162":202,"_164":493,"_165":22,"_166":-5,"_167":494,"_98":495},"09384c02-feb7-11ef-9c16-569c3dd06744","09384cc0-feb7-11ef-9c16-569c3dd06744",33,["D",1741724755889],"const postsContainer = document.getElementById('posts-container');\nconst loading = document.querySelector('.loader');\nconst filter = document.getElementById('filter');\n\nlet limit = 5;\nlet page = 1;\n\n// Fetch posts from API\nasync function getPosts() {\n const res = await fetch(\n `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`\n );\n\n const data = await res.json();\n\n return data;\n}\n\n// Show posts in DOM\nasync function showPosts() {\n const posts = await getPosts();\n\n posts.forEach(post => {\n const postEl = document.createElement('div');\n postEl.classList.add('post');\n postEl.innerHTML = `\n

${post.id}

${post.title}

${post.body}

\n `;\n\n postsContainer.appendChild(postEl);\n });\n}\n\n// Show loader & fetch more posts\nfunction showLoading() {\n loading.classList.add('show');\n\n setTimeout(() => {\n loading.classList.remove('show');\n\n setTimeout(() => {\n page++;\n showPosts();\n }, 300);\n }, 1000);\n}\n\n// Filter posts by input\nfunction filterPosts(e) {\n const term = e.target.value.toUpperCase();\n const posts = document.querySelectorAll('.post');\n\n posts.forEach(post => {\n const title = post.querySelector('.post-title').innerText.toUpperCase();\n const body = post.querySelector('.post-body').innerText.toUpperCase();\n\n if (title.indexOf(term) > -1 || body.indexOf(term) > -1) {\n post.style.display = 'flex';\n } else {\n post.style.display = 'none';\n }\n });\n}\n\n// Show initial posts\nshowPosts();\n\nwindow.addEventListener('scroll', () => {\n const { scrollTop, scrollHeight, clientHeight } = document.documentElement;\n\n if (scrollHeight - scrollTop === clientHeight) {\n showLoading();\n }\n});\n\nfilter.addEventListener('input', filterPosts);\n",[],[468,198],{"_102":497,"_95":208,"_154":498,"_156":469,"_157":139,"_158":499,"_160":117,"_104":500,"_99":32,"_162":202,"_164":501,"_165":22,"_166":-5,"_167":502,"_98":503},"09419442-feb7-11ef-a7a4-569c3dd06744","094194d8-feb7-11ef-a7a4-569c3dd06744",34,["D",1741724755949],"@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #296ca8;\n color: #fff;\n font-family: 'Roboto', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n padding-bottom: 100px;\n}\n\nh1 {\n margin-bottom: 0;\n text-align: center;\n}\n\n.filter-container {\n margin-top: 20px;\n width: 80vw;\n max-width: 800px;\n}\n\n.filter {\n width: 100%;\n padding: 12px;\n font-size: 16px;\n}\n\n.post {\n position: relative;\n background-color: #4992d3;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n border-radius: 3px;\n padding: 20px;\n margin: 40px 0;\n display: flex;\n width: 80vw;\n max-width: 800px;\n}\n\n.post .post-title {\n margin: 0;\n}\n\n.post .post-body {\n margin: 15px 0 0;\n line-height: 1.3;\n}\n\n.post .post-info {\n margin-left: 20px;\n}\n\n.post .number {\n position: absolute;\n top: -15px;\n left: -15px;\n font-size: 15px;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: #fff;\n color: #296ca8;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 7px 10px;\n}\n\n.loader {\n opacity: 0;\n display: flex;\n position: fixed;\n bottom: 50px;\n transition: opacity 0.3s ease-in;\n}\n\n.loader.show {\n opacity: 1;\n}\n\n.circle {\n background-color: #fff;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n margin: 5px;\n animation: bounce 0.5s ease-in infinite;\n}\n\n.circle:nth-of-type(2) {\n animation-delay: 0.1s;\n}\n\n.circle:nth-of-type(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes bounce {\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-10px);\n }\n}\n",[],[468,208],[468],{"_102":506,"_95":507,"_154":508,"_156":-5,"_157":139,"_158":509,"_160":117,"_104":510,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":511,"_98":543},"0946ef78-feb7-11ef-9d99-569c3dd06744","lyrics-search","10e625aa-828c-4f88-a40d-08d3f0618375",35,["D",1741724755984],[512,519,527,535],{"_102":513,"_95":180,"_154":514,"_156":508,"_157":139,"_158":509,"_160":117,"_104":515,"_99":32,"_162":183,"_164":516,"_165":22,"_166":-5,"_167":517,"_98":518},"0946ec4e-feb7-11ef-9d99-569c3dd06744","0946ecda-feb7-11ef-9d99-569c3dd06744",["D",1741724755984],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n LyricsSearch\n \n \n

LyricsSearch

\n\n

Results will be displayed here

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[507,180],{"_102":520,"_95":287,"_154":521,"_156":508,"_157":139,"_158":522,"_160":117,"_104":523,"_99":32,"_162":174,"_164":524,"_165":22,"_166":-5,"_167":525,"_98":526},"094bc58e-feb7-11ef-92cc-569c3dd06744","094bc638-feb7-11ef-92cc-569c3dd06744",36,["D",1741724756017],"## LyricsSearch App\n\nFind songs, artists and lyrics using the [lyrics.ovh](https://lyrics.ovh) API\n\n## Project Specifications\n\n- Display UI with song/artist input\n- Fetch songs/artists and put in DOM\n- Add pagination\n- Add get lyrics functionality and display in DOM\n",[],[507,287],{"_102":528,"_95":198,"_154":529,"_156":508,"_157":139,"_158":530,"_160":117,"_104":531,"_99":32,"_162":202,"_164":532,"_165":22,"_166":-5,"_167":533,"_98":534},"09519e00-feb7-11ef-a7a4-569c3dd06744","09519e8c-feb7-11ef-a7a4-569c3dd06744",37,["D",1741724756054],"const form = document.getElementById('form');\nconst search = document.getElementById('search');\nconst result = document.getElementById('result');\nconst more = document.getElementById('more');\n\nconst apiURL = 'https://api.lyrics.ovh';\n\n// Search by song or artist\nasync function searchSongs(term) {\n const res = await fetch(`${apiURL}/suggest/${term}`);\n const data = await res.json();\n\n showData(data);\n}\n\n// Show song and artist in DOM\nfunction showData(data) {\n result.innerHTML = `\n

\n ${song.artist.name} - ${song.title}\n \n

\n `;\n\n if (data.prev || data.next) {\n more.innerHTML = `\n ${\n data.prev\n ? ``\n : ''\n }\n ${\n data.next\n ? ``\n : ''\n }\n `;\n } else {\n more.innerHTML = '';\n }\n}\n\n// Get prev and next songs\nasync function getMoreSongs(url) {\n const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`);\n const data = await res.json();\n\n showData(data);\n}\n\n// Get lyrics for song\nasync function getLyrics(artist, songTitle) {\n const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`);\n const data = await res.json();\n\n if (data.error) {\n result.innerHTML = data.error;\n } else {\n const lyrics = data.lyrics.replace(/(\\r\\n|\\r|\\n)/g, '
');\n\n result.innerHTML = `\n

${artist} - ${songTitle}

\n ${lyrics}\n `;\n }\n\n more.innerHTML = '';\n}\n\n// Event listeners\nform.addEventListener('submit', e => {\n e.preventDefault();\n\n const searchTerm = search.value.trim();\n\n if (!searchTerm) {\n alert('Please type in a search term');\n } else {\n searchSongs(searchTerm);\n }\n});\n\n// Get lyrics button click\nresult.addEventListener('click', e => {\n const clickedEl = e.target;\n\n if (clickedEl.tagName === 'BUTTON') {\n const artist = clickedEl.getAttribute('data-artist');\n const songTitle = clickedEl.getAttribute('data-songtitle');\n\n getLyrics(artist, songTitle);\n }\n});\n",[],[507,198],{"_102":536,"_95":208,"_154":537,"_156":508,"_157":139,"_158":538,"_160":117,"_104":539,"_99":32,"_162":202,"_164":540,"_165":22,"_166":-5,"_167":541,"_98":542},"095999e8-feb7-11ef-a0fb-569c3dd06744","09599a7e-feb7-11ef-a0fb-569c3dd06744",38,["D",1741724756108],"* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #fff;\n font-family: Arial, Helvetica, sans-serif;\n margin: 0;\n}\n\nbutton {\n cursor: pointer;\n}\n\nbutton:active {\n transform: scale(0.95);\n}\n\ninput:focus,\nbutton:focus {\n outline: none;\n}\n\nheader {\n background-image: url('https://images.unsplash.com/photo-1510915361894-db8b60106cb1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n color: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 100px 0;\n position: relative;\n}\n\nheader::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background-color: rgba(0, 0, 0, 0.4);\n}\n\nheader * {\n z-index: 1;\n}\n\nheader h1 {\n margin: 0 0 30px;\n}\n\nform {\n position: relative;\n width: 500px;\n max-width: 100%;\n}\n\nform input {\n border: 0;\n border-radius: 50px;\n font-size: 16px;\n padding: 15px 30px;\n width: 100%;\n}\n\nform button {\n position: absolute;\n top: 2px;\n right: 2px;\n background-color: #e056fd;\n border: 0;\n border-radius: 50px;\n color: #fff;\n font-size: 16px;\n padding: 13px 30px;\n}\n\n.btn {\n background-color: #8d56fd;\n border: 0;\n border-radius: 10px;\n color: #fff;\n padding: 4px 10px;\n}\n\nul.songs {\n list-style-type: none;\n padding: 0;\n}\n\nul.songs li {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 10px 0;\n}\n\n.container {\n margin: 30px auto;\n max-width: 100%;\n width: 500px;\n}\n\n.container h2 {\n font-weight: 300;\n}\n\n.container p {\n text-align: center;\n}\n\n.centered {\n display: flex;\n justify-content: center;\n}\n\n.centered button {\n transform: scale(1.3);\n margin: 15px;\n}\n",[],[507,208],[507],{"_102":545,"_95":546,"_154":547,"_156":-5,"_157":139,"_158":548,"_160":117,"_104":549,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":550,"_98":582},"095f444c-feb7-11ef-92cc-569c3dd06744","meal-finder","db082377-2a2a-4e45-87a9-384529cc5003",39,["D",1741724756143],[551,558,566,574],{"_102":552,"_95":180,"_154":553,"_156":547,"_157":139,"_158":548,"_160":117,"_104":554,"_99":32,"_162":183,"_164":555,"_165":22,"_166":-5,"_167":556,"_98":557},"095f40b4-feb7-11ef-92cc-569c3dd06744","095f414a-feb7-11ef-92cc-569c3dd06744",["D",1741724756143],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n \n Meal Finder\n \n \n

Meal Finder

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[546,180],{"_102":559,"_95":287,"_154":560,"_156":547,"_157":139,"_158":561,"_160":117,"_104":562,"_99":32,"_162":174,"_164":563,"_165":22,"_166":-5,"_167":564,"_98":565},"096480ba-feb7-11ef-9c16-569c3dd06744","09648150-feb7-11ef-9c16-569c3dd06744",40,["D",1741724756178],"## Meal Finder App\n\nSearch and generate random meals from the [themealdb.com](https://www.themealdb.com) API\n\n## Project Specifications\n\n- Display UI with form to search and button to generate\n- Connect to API and get meals\n- Display meals in DOM with image and hover effect\n- Click on meal and see the details\n- Click on generate button and fetch & display a random meal\n",[],[546,287],{"_102":567,"_95":198,"_154":568,"_156":547,"_157":139,"_158":569,"_160":117,"_104":570,"_99":32,"_162":202,"_164":571,"_165":22,"_166":-5,"_167":572,"_98":573},"096a8578-feb7-11ef-9c16-569c3dd06744","096a8604-feb7-11ef-9c16-569c3dd06744",41,["D",1741724756218],"const search = document.getElementById('search'),\n submit = document.getElementById('submit'),\n random = document.getElementById('random'),\n mealsEl = document.getElementById('meals'),\n resultHeading = document.getElementById('result-heading'),\n single_mealEl = document.getElementById('single-meal');\n\n// Search meal and fetch from API\nfunction searchMeal(e) {\n e.preventDefault();\n\n // Clear single meal\n single_mealEl.innerHTML = '';\n\n // Get search term\n const term = search.value;\n\n // Check for empty\n if (term.trim()) {\n fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${term}`)\n .then(res => res.json())\n .then(data => {\n console.log(data);\n resultHeading.innerHTML = `

Search results for '${term}':

`;\n\n if (data.meals === null) {\n resultHeading.innerHTML = `

There are no search results. Try again!

`;\n } else {\n mealsEl.innerHTML = data.meals\n .map(\n meal => `\n

\n $\"${meal.strMeal}\"$ \n

${meal.strMeal}

\n `\n )\n .join('');\n }\n });\n // Clear search text\n search.value = '';\n } else {\n alert('Please enter a search term');\n }\n}\n\n// Fetch meal by ID\nfunction getMealById(mealID) {\n fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealID}`)\n .then(res => res.json())\n .then(data => {\n const meal = data.meals[0];\n\n addMealToDOM(meal);\n });\n}\n\n// Fetch random meal from API\nfunction getRandomMeal() {\n // Clear meals and heading\n mealsEl.innerHTML = '';\n resultHeading.innerHTML = '';\n\n fetch(`https://www.themealdb.com/api/json/v1/1/random.php`)\n .then(res => res.json())\n .then(data => {\n const meal = data.meals[0];\n\n addMealToDOM(meal);\n });\n}\n\n// Add meal to DOM\nfunction addMealToDOM(meal) {\n const ingredients = [];\n\n for (let i = 1; i <= 20; i++) {\n if (meal[`strIngredient${i}`]) {\n ingredients.push(\n `${meal[`strIngredient${i}`]} - ${meal[`strMeasure${i}`]}`\n );\n } else {\n break;\n }\n }\n\n single_mealEl.innerHTML = `\n

${meal.strMeal}

\n $\"${meal.strMeal}\"$ \n

\n ${meal.strCategory ? `

${meal.strCategory}

` : ''}\n ${meal.strArea ? `

${meal.strArea}

` : ''}\n

${meal.strInstructions}

Ingredients

${ing}

\n `;\n}\n\n// Event listeners\nsubmit.addEventListener('submit', searchMeal);\nrandom.addEventListener('click', getRandomMeal);\n\nmealsEl.addEventListener('click', e => {\n const mealInfo = e.composedPath().find(item => {\n if (item.classList) {\n return item.classList.contains('meal-info');\n } else {\n return false;\n }\n });\n\n if (mealInfo) {\n const mealID = mealInfo.getAttribute('data-mealid');\n getMealById(mealID);\n }\n});\n",[],[546,198],{"_102":575,"_95":208,"_154":576,"_156":547,"_157":139,"_158":577,"_160":117,"_104":578,"_99":32,"_162":202,"_164":579,"_165":22,"_166":-5,"_167":580,"_98":581},"09706290-feb7-11ef-b98e-569c3dd06744","09706326-feb7-11ef-b98e-569c3dd06744",42,["D",1741724756256],"* {\n box-sizing: border-box;\n}\n\nbody {\n background: #2d2013;\n color: #fff;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n margin: 0;\n}\n\n.container {\n margin: auto;\n max-width: 800px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n}\n\n.flex {\n display: flex;\n}\n\ninput,\nbutton {\n border: 1px solid #dedede;\n border-top-left-radius: 4px;\n border-bottom-left-radius: 4px;\n font-size: 14px;\n padding: 8px 10px;\n margin: 0;\n}\n\ninput[type='text'] {\n width: 300px;\n}\n\n.search-btn {\n cursor: pointer;\n border-left: 0;\n border-radius: 0;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n\n.random-btn {\n cursor: pointer;\n margin-left: 10px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n\n.meals {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 20px;\n margin-top: 20px;\n}\n\n.meal {\n cursor: pointer;\n position: relative;\n height: 180px;\n width: 180px;\n text-align: center;\n}\n\n.meal img {\n width: 100%;\n height: 100%;\n border: 4px #fff solid;\n border-radius: 2px;\n}\n\n.meal-info {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n background: rgba(0, 0, 0, 0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 0.2s ease-in;\n opacity: 0;\n}\n\n.meal:hover .meal-info {\n opacity: 1;\n}\n\n.single-meal {\n margin: 30px auto;\n width: 70%;\n}\n\n.single-meal img {\n width: 300px;\n margin: 15px;\n border: 4px #fff solid;\n border-radius: 2px;\n}\n\n.single-meal-info {\n margin: 20px;\n padding: 10px;\n border: 2px #e09850 dashed;\n border-radius: 5px;\n}\n\n.single-meal p {\n margin: 0;\n letter-spacing: 0.5px;\n line-height: 1.5;\n}\n\n.single-meal ul {\n padding-left: 0;\n list-style-type: none;\n}\n\n.single-meal ul li {\n border: 1px solid #ededed;\n border-radius: 5px;\n background-color: #fff;\n display: inline-block;\n color: #2d2013;\n font-size: 12px;\n font-weight: bold;\n padding: 5px;\n margin: 0 5px 5px 0;\n}\n\n@media (max-width: 800px) {\n .meals {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n@media (max-width: 700px) {\n .meals {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .meal {\n height: 200px;\n width: 200px;\n }\n}\n@media (max-width: 500px) {\n input[type='text'] {\n width: 100%;\n }\n\n .meals {\n grid-template-columns: 1fr;\n }\n\n .meal {\n height: 300px;\n width: 300px;\n }\n}\n",[],[546,208],[546],{"_102":584,"_95":585,"_154":586,"_156":-5,"_157":139,"_158":587,"_160":117,"_104":588,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":589,"_98":621},"0975c37a-feb7-11ef-a0fb-569c3dd06744","memory-cards","2787eb0e-a715-429c-9dd7-1a24f99b16fb",43,["D",1741724756291],[590,597,605,613],{"_102":591,"_95":180,"_154":592,"_156":586,"_157":139,"_158":587,"_160":117,"_104":593,"_99":32,"_162":183,"_164":594,"_165":22,"_166":-5,"_167":595,"_98":596},"0975baba-feb7-11ef-a0fb-569c3dd06744","0975bb46-feb7-11ef-a0fb-569c3dd06744",["D",1741724756291],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n \n Memory Cards\n \n \n \n\n

\n Memory Cards\n \n

\n\n

\n \n

\n\n \n\n

\n Add New Card\n \n

\n\n

\n Question\n \n

\n\n

\n Answer\n \n

\n\n \n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[585,180],{"_102":598,"_95":287,"_154":599,"_156":586,"_157":139,"_158":600,"_160":117,"_104":601,"_99":32,"_162":174,"_164":602,"_165":22,"_166":-5,"_167":603,"_98":604},"097b67b2-feb7-11ef-b98e-569c3dd06744","097b6866-feb7-11ef-b98e-569c3dd06744",44,["D",1741724756328],"## Memory Cards\n\nFlash card app for learning. Display, add and remove memory cards with questions and answers\n\n## Project Specifications\n\n- Create flip cards using CSS\n- Create \"Add new card\" overlay with form\n- Display question cards and flip for answer\n- View prev and next cards\n- Add new cards to local storage\n- Clear all cards from local storage\n",[],[585,287],{"_102":606,"_95":198,"_154":607,"_156":586,"_157":139,"_158":608,"_160":117,"_104":609,"_99":32,"_162":202,"_164":610,"_165":22,"_166":-5,"_167":611,"_98":612},"09809656-feb7-11ef-92cc-569c3dd06744","098096f6-feb7-11ef-92cc-569c3dd06744",45,["D",1741724756363],"const cardsContainer = document.getElementById('cards-container');\nconst prevBtn = document.getElementById('prev');\nconst nextBtn = document.getElementById('next');\nconst currentEl = document.getElementById('current');\nconst showBtn = document.getElementById('show');\nconst hideBtn = document.getElementById('hide');\nconst questionEl = document.getElementById('question');\nconst answerEl = document.getElementById('answer');\nconst addCardBtn = document.getElementById('add-card');\nconst clearBtn = document.getElementById('clear');\nconst addContainer = document.getElementById('add-container');\n\n// Keep track of current card\nlet currentActiveCard = 0;\n\n// Store DOM cards\nconst cardsEl = [];\n\n// Store card data\nconst cardsData = getCardsData();\n\n// const cardsData = [\n// {\n// question: 'What must a variable begin with?',\n// answer: 'A letter, $ or _'\n// },\n// {\n// question: 'What is a variable?',\n// answer: 'Container for a piece of data'\n// },\n// {\n// question: 'Example of Case Sensitive Variable',\n// answer: 'thisIsAVariable'\n// }\n// ];\n\n// Create all cards\nfunction createCards() {\n cardsData.forEach((data, index) => createCard(data, index));\n}\n\n// Create a single card in DOM\nfunction createCard(data, index) {\n const card = document.createElement('div');\n card.classList.add('card');\n\n if (index === 0) {\n card.classList.add('active');\n }\n\n card.innerHTML = `\n

\n ${data.question}\n

\n ${data.answer}\n

\n `;\n\n card.addEventListener('click', () => card.classList.toggle('show-answer'));\n\n // Add to DOM cards\n cardsEl.push(card);\n\n cardsContainer.appendChild(card);\n\n updateCurrentText();\n}\n\n// Show number of cards\nfunction updateCurrentText() {\n currentEl.innerText = `${currentActiveCard + 1}/${cardsEl.length}`;\n}\n\n// Get cards from local storage\nfunction getCardsData() {\n const cards = JSON.parse(localStorage.getItem('cards'));\n return cards === null ? [] : cards;\n}\n\n// Add card to local storage\nfunction setCardsData(cards) {\n localStorage.setItem('cards', JSON.stringify(cards));\n window.location.reload();\n}\n\ncreateCards();\n\n// Event listeners\n\n// Next button\nnextBtn.addEventListener('click', () => {\n cardsEl[currentActiveCard].className = 'card left';\n\n currentActiveCard = currentActiveCard + 1;\n\n if (currentActiveCard > cardsEl.length - 1) {\n currentActiveCard = cardsEl.length - 1;\n }\n\n cardsEl[currentActiveCard].className = 'card active';\n\n updateCurrentText();\n});\n\n// Prev button\nprevBtn.addEventListener('click', () => {\n cardsEl[currentActiveCard].className = 'card right';\n\n currentActiveCard = currentActiveCard - 1;\n\n if (currentActiveCard < 0) {\n currentActiveCard = 0;\n }\n\n cardsEl[currentActiveCard].className = 'card active';\n\n updateCurrentText();\n});\n\n// Show add container\nshowBtn.addEventListener('click', () => addContainer.classList.add('show'));\n// Hide add container\nhideBtn.addEventListener('click', () => addContainer.classList.remove('show'));\n\n// Add new card\naddCardBtn.addEventListener('click', () => {\n const question = questionEl.value;\n const answer = answerEl.value;\n\n if (question.trim() && answer.trim()) {\n const newCard = { question, answer };\n\n createCard(newCard);\n\n questionEl.value = '';\n answerEl.value = '';\n\n addContainer.classList.remove('show');\n\n cardsData.push(newCard);\n setCardsData(cardsData);\n }\n});\n\n// Clear cards button\nclearBtn.addEventListener('click', () => {\n localStorage.clear();\n cardsContainer.innerHTML = '';\n window.location.reload();\n});\n",[],[585,198],{"_102":614,"_95":208,"_154":615,"_156":586,"_157":139,"_158":616,"_160":117,"_104":617,"_99":32,"_162":202,"_164":618,"_165":22,"_166":-5,"_167":619,"_98":620},"0984e79c-feb7-11ef-9d99-569c3dd06744","0984e832-feb7-11ef-9d99-569c3dd06744",46,["D",1741724756392],"@import url('https://fonts.googleapis.com/css?family=Lato:300,500,700&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n margin: 0;\n overflow: hidden;\n font-family: 'Lato', sans-serif;\n}\n\nh1 {\n position: relative;\n}\n\nh1 button {\n position: absolute;\n right: 0;\n transform: translate(120%, -50%);\n z-index: 2;\n}\n\n.btn {\n cursor: pointer;\n background-color: #fff;\n border: 1px solid #aaa;\n border-radius: 3px;\n font-size: 14px;\n margin-top: 20px;\n padding: 10px 15px;\n}\n\n.btn-small {\n font-size: 12px;\n padding: 5px 10px;\n}\n\n.btn-ghost {\n border: 0;\n background-color: transparent;\n}\n\n.clear {\n position: absolute;\n bottom: 30px;\n left: 30px;\n}\n\n.cards {\n perspective: 1000px;\n position: relative;\n height: 300px;\n width: 500px;\n max-width: 100%;\n}\n\n.card {\n position: absolute;\n opacity: 0;\n font-size: 1.5em;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n transform: translateX(50%) rotateY(-10deg);\n transition: transform 0.4s ease, opacity 0.4s ease;\n}\n\n.card.active {\n cursor: pointer;\n opacity: 1;\n z-index: 10;\n transform: translateX(0) rotateY(0deg);\n}\n\n.card.left {\n transform: translateX(-50%) rotateY(10deg);\n}\n\n.inner-card {\n box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);\n border-radius: 4px;\n height: 100%;\n width: 100%;\n position: relative;\n transform-style: preserve-3d;\n transition: transform 0.4s ease;\n}\n\n.card.show-answer .inner-card {\n transform: rotateX(180deg);\n}\n\n.inner-card-front,\n.inner-card-back {\n backface-visibility: hidden;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n background: #fff;\n}\n\n.inner-card-front {\n transform: rotateX(0deg);\n z-index: 2;\n}\n\n.inner-card-back {\n transform: rotateX(180deg);\n}\n\n.inner-card-front::after,\n.inner-card-back::after {\n content: '\\f021 Flip';\n font-family: 'Font Awesome 5 Free', Lato, sans-serif;\n position: absolute;\n top: 10px;\n right: 10px;\n font-weight: bold;\n font-size: 16px;\n color: #ddd;\n}\n\n.navigation {\n display: flex;\n margin: 20px 0;\n}\n\n.navigation .nav-button {\n border: none;\n background-color: transparent;\n cursor: pointer;\n font-size: 16px;\n}\n\n.navigation p {\n margin: 0 25px;\n}\n\n.add-container {\n opacity: 0;\n z-index: -1;\n background-color: #f0f0f0;\n border-top: 2px solid #eee;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 10px 0;\n position: absolute;\n top: 0;\n bottom: 0;\n width: 100%;\n transition: 0.3s ease;\n}\n\n.add-container.show {\n opacity: 1;\n z-index: 2;\n}\n\n.add-container h3 {\n margin: 10px 0;\n}\n\n.form-group label {\n display: block;\n margin: 20px 0 10px;\n}\n\n.form-group textarea {\n border: 1px solid #aaa;\n border-radius: 3px;\n font-size: 16px;\n padding: 12px;\n min-width: 500px;\n max-width: 100%;\n}\n",[],[585,208],[585],{"_102":623,"_95":624,"_154":625,"_156":-5,"_157":139,"_158":626,"_160":117,"_104":627,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":628,"_98":660},"098b019a-feb7-11ef-92cc-569c3dd06744","modal-menu-slider","cb1392da-88fc-4cd8-90bf-e5c817fb7e3f",47,["D",1741724756430],[629,636,644,652],{"_102":630,"_95":171,"_154":631,"_156":625,"_157":139,"_158":626,"_160":117,"_104":632,"_99":32,"_162":174,"_164":633,"_165":22,"_166":-5,"_167":634,"_98":635},"098af7b8-feb7-11ef-92cc-569c3dd06744","098af86c-feb7-11ef-92cc-569c3dd06744",["D",1741724756430],"## Modal & Menu Slider\r\n\r\nSimple landing page with sliding menu and modal\r\n\r\n## Project Specifications\r\n\r\n- Create and style landing page\r\n- Style side nav and modal\r\n- Add functionality to make menu open/close on button click\r\n- Add functionality to make modal open/close on button click\r\n",[],[624,171],{"_102":637,"_95":180,"_154":638,"_156":625,"_157":139,"_158":639,"_160":117,"_104":640,"_99":32,"_162":183,"_164":641,"_165":22,"_166":-5,"_167":642,"_98":643},"0990d0ca-feb7-11ef-81fa-569c3dd06744","0990d188-feb7-11ef-81fa-569c3dd06744",48,["D",1741724756467],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n \n My Landing Page\n \n \n \n\n

\n \n\n

My Landing Page

\n\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, amet!\n

\n\n \n

\n\n

What is this landing page about?

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia iure\n accusamus ab consectetur eos provident ipsa est perferendis architecto.\n Provident, quaerat asperiores. Quo esse minus repellat sapiente, impedit\n obcaecati necessitatibus.\n

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente optio\n officia ipsa. Cum dignissimos possimus et non provident facilis saepe!\n

\n\n

Tell Me More

\n\n

\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat eaque\n delectus explicabo qui reprehenderit? Aspernatur ad similique minima\n accusamus maiores accusantium libero autem iusto reiciendis ullam\n impedit esse quibusdam, deleniti laudantium rerum beatae, deserunt nemo\n neque, obcaecati exercitationem sit. Earum.\n

\n\n

Benefits

Lifetime Access
30 Day Money Back
Tailored Customer Support

\n\n

\n Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse quam\n nostrum, fugiat, itaque natus officia laborum dolorum id accusantium\n culpa architecto tenetur fuga? Consequatur provident rerum eius ratione\n dolor officiis doloremque minima optio dignissimos doloribus odio\n debitis vero cumque itaque excepturi a neque, expedita nulla earum\n accusamus repellat adipisci veritatis quam. Ipsum fugiat iusto pariatur\n consectetur quas libero dolor dolores dolorem, nostrum ducimus\n doloremque placeat accusamus iste, culpa quaerat consequatur?\n

\n\n \n \n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[624,180],{"_102":645,"_95":198,"_154":646,"_156":625,"_157":139,"_158":647,"_160":117,"_104":648,"_99":32,"_162":202,"_164":649,"_165":22,"_166":-5,"_167":650,"_98":651},"09966d6e-feb7-11ef-81fa-569c3dd06744","09966e18-feb7-11ef-81fa-569c3dd06744",49,["D",1741724756506],"const toggle = document.getElementById('toggle');\nconst close = document.getElementById('close');\nconst open = document.getElementById('open');\nconst modal = document.getElementById('modal');\nconst navbar = document.getElementById('navbar');\n\n// This function closes navbar if user clicks anywhere outside of navbar once it's opened\n// Does not leave unused event listeners on\n// It's messy, but it works\nfunction closeNavbar(e) {\n if (\n document.body.classList.contains('show-nav') &&\n e.target !== toggle &&\n !toggle.contains(e.target) &&\n e.target !== navbar &&\n !navbar.contains(e.target)\n ) {\n document.body.classList.toggle('show-nav');\n document.body.removeEventListener('click', closeNavbar);\n } else if (!document.body.classList.contains('show-nav')) {\n document.body.removeEventListener('click', closeNavbar);\n }\n}\n\n// Toggle nav\ntoggle.addEventListener('click', () => {\n document.body.classList.toggle('show-nav');\n document.body.addEventListener('click', closeNavbar);\n});\n\n// Show modal\nopen.addEventListener('click', () => modal.classList.add('show-modal'));\n\n// Hide modal\nclose.addEventListener('click', () => modal.classList.remove('show-modal'));\n\n// Hide modal on outside click\nwindow.addEventListener('click', e =>\n e.target == modal ? modal.classList.remove('show-modal') : false\n);\n",[],[624,198],{"_102":653,"_95":208,"_154":654,"_156":625,"_157":139,"_158":655,"_160":117,"_104":656,"_99":32,"_162":202,"_164":657,"_165":22,"_166":-5,"_167":658,"_98":659},"099bf81a-feb7-11ef-b98e-569c3dd06744","099bf8ce-feb7-11ef-b98e-569c3dd06744",50,["D",1741724756542],"@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n:root {\n --modal-duration: 1s;\n --primary-color: #30336b;\n --secondary-color: #be2edd;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Lato', sans-serif;\n margin: 0;\n transition: transform 0.3s ease;\n}\n\nbody.show-nav {\n /* Width of nav */\n transform: translateX(200px);\n}\n\nnav {\n background-color: var(--primary-color);\n border-right: 2px solid rgba(200, 200, 200, 0.1);\n color: #fff;\n position: fixed;\n top: 0;\n left: 0;\n width: 200px;\n height: 100%;\n z-index: 100;\n transform: translateX(-100%);\n}\n\nnav .logo {\n padding: 30px 0;\n text-align: center;\n}\n\nnav .logo img {\n height: 75px;\n width: 75px;\n border-radius: 50%;\n}\n\nnav ul {\n padding: 0;\n list-style-type: none;\n margin: 0;\n}\n\nnav ul li {\n border-bottom: 2px solid rgba(200, 200, 200, 0.1);\n padding: 20px;\n}\n\nnav ul li:first-of-type {\n border-top: 2px solid rgba(200, 200, 200, 0.1);\n}\n\nnav ul li a {\n color: #fff;\n text-decoration: none;\n}\n\nnav ul li a:hover {\n text-decoration: underline;\n}\n\nheader {\n background-color: var(--primary-color);\n color: #fff;\n font-size: 130%;\n position: relative;\n padding: 40px 15px;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n}\n\nheader p {\n margin: 30px 0;\n}\n\nbutton,\ninput[type='submit'] {\n background-color: var(--secondary-color);\n border: 0;\n border-radius: 5px;\n color: #fff;\n cursor: pointer;\n padding: 8px 12px;\n}\n\nbutton:focus {\n outline: none;\n}\n\n.toggle {\n background-color: rgba(0, 0, 0, 0.3);\n position: absolute;\n top: 20px;\n left: 20px;\n}\n\n.cta-btn {\n padding: 12px 30px;\n font-size: 20px;\n}\n\n.container {\n padding: 15px;\n margin: 0 auto;\n max-width: 100%;\n width: 800px;\n}\n\n.modal-container {\n background-color: rgba(0, 0, 0, 0.6);\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n\n.modal-container.show-modal {\n display: block;\n}\n\n.modal {\n background-color: #fff;\n border-radius: 5px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n position: absolute;\n overflow: hidden;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 100%;\n width: 400px;\n animation-name: modalopen;\n animation-duration: var(--modal-duration);\n}\n\n.modal-header {\n background: var(--primary-color);\n color: #fff;\n padding: 15px;\n}\n\n.modal-header h3 {\n margin: 0;\n border-bottom: 1px solid #333;\n}\n\n.modal-content {\n padding: 20px;\n}\n\n.modal-form div {\n margin: 15px 0;\n}\n\n.modal-form label {\n display: block;\n margin-bottom: 5px;\n}\n\n.modal-form .form-input {\n padding: 8px;\n width: 100%;\n}\n\n.close-btn {\n background: transparent;\n font-size: 25px;\n position: absolute;\n top: 0;\n right: 0;\n}\n\n@keyframes modalopen {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n",[],[624,208],[624],{"_102":662,"_95":663,"_154":664,"_156":-5,"_157":139,"_158":665,"_160":117,"_104":666,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":667,"_98":699},"09a12240-feb7-11ef-9d99-569c3dd06744","movie-seat-booking","3e8f6448-33b5-463f-a325-2db4ea563445",51,["D",1741724756575],[668,675,683,691],{"_102":669,"_95":171,"_154":670,"_156":664,"_157":139,"_158":665,"_160":117,"_104":671,"_99":32,"_162":174,"_164":672,"_165":22,"_166":-5,"_167":673,"_98":674},"09a11e8a-feb7-11ef-9d99-569c3dd06744","09a11f2a-feb7-11ef-9d99-569c3dd06744",["D",1741724756575],"## Movie Seat Booking\r\n\r\nDisplay movie choices and seats in a theater to select from in order to purchase tickets\r\n\r\n## Project Specifications\r\n\r\n- Display UI with movie select, screen, seats, legend & seat info\r\n- User can select a movie/price\r\n- User can select/deselect seats\r\n- User can not select occupied seats\r\n- Number of seats and price will update\r\n- Save seats, movie and price to local storage so that UI is still populated on refresh\r\n\r\nDesign inspiration from [Dribbble](https://dribbble.com/shots/3628370-Movie-Seat-Booking)\r\n",[],[663,171],{"_102":676,"_95":180,"_154":677,"_156":664,"_157":139,"_158":678,"_160":117,"_104":679,"_99":32,"_162":183,"_164":680,"_165":22,"_166":-5,"_167":681,"_98":682},"09a5d42a-feb7-11ef-82b7-569c3dd06744","09a5d4e8-feb7-11ef-82b7-569c3dd06744",52,["D",1741724756608],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n Movie Seat Booking\n \n \n

\n Pick a movie:\n \n

\n\n

\n
\n N/A\n
\n
\n Selected\n
\n
\n Occupied\n

\n\n

\n You have selected 0 seats for a price of $0\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[663,180],{"_102":684,"_95":198,"_154":685,"_156":664,"_157":139,"_158":686,"_160":117,"_104":687,"_99":32,"_162":202,"_164":688,"_165":22,"_166":-5,"_167":689,"_98":690},"09ac0dd6-feb7-11ef-a7a4-569c3dd06744","09ac0e8a-feb7-11ef-a7a4-569c3dd06744",53,["D",1741724756646],"const container = document.querySelector('.container');\nconst seats = document.querySelectorAll('.row .seat:not(.occupied)');\nconst count = document.getElementById('count');\nconst total = document.getElementById('total');\nconst movieSelect = document.getElementById('movie');\n\npopulateUI();\n\nlet ticketPrice = +movieSelect.value;\n\n// Save selected movie index and price\nfunction setMovieData(movieIndex, moviePrice) {\n localStorage.setItem('selectedMovieIndex', movieIndex);\n localStorage.setItem('selectedMoviePrice', moviePrice);\n}\n\n// Update total and count\nfunction updateSelectedCount() {\n const selectedSeats = document.querySelectorAll('.row .seat.selected');\n\n const seatsIndex = [...selectedSeats].map(seat => [...seats].indexOf(seat));\n\n localStorage.setItem('selectedSeats', JSON.stringify(seatsIndex));\n\n const selectedSeatsCount = selectedSeats.length;\n\n count.innerText = selectedSeatsCount;\n total.innerText = selectedSeatsCount * ticketPrice;\n \n setMovieData(movieSelect.selectedIndex, movieSelect.value);\n}\n\n// Get data from localstorage and populate UI\nfunction populateUI() {\n const selectedSeats = JSON.parse(localStorage.getItem('selectedSeats'));\n\n if (selectedSeats !== null && selectedSeats.length > 0) {\n seats.forEach((seat, index) => {\n if (selectedSeats.indexOf(index) > -1) {\n seat.classList.add('selected');\n }\n });\n }\n\n const selectedMovieIndex = localStorage.getItem('selectedMovieIndex');\n\n if (selectedMovieIndex !== null) {\n movieSelect.selectedIndex = selectedMovieIndex;\n }\n}\n\n// Movie select event\nmovieSelect.addEventListener('change', e => {\n ticketPrice = +e.target.value;\n setMovieData(e.target.selectedIndex, e.target.value);\n updateSelectedCount();\n});\n\n// Seat click event\ncontainer.addEventListener('click', e => {\n if (\n e.target.classList.contains('seat') &&\n !e.target.classList.contains('occupied')\n ) {\n e.target.classList.toggle('selected');\n\n updateSelectedCount();\n }\n});\n\n// Initial count and total set\nupdateSelectedCount();\n",[],[663,198],{"_102":692,"_95":208,"_154":693,"_156":664,"_157":139,"_158":694,"_160":117,"_104":695,"_99":32,"_162":202,"_164":696,"_165":22,"_166":-5,"_167":697,"_98":698},"09b20c18-feb7-11ef-a0fb-569c3dd06744","09b20d4e-feb7-11ef-a0fb-569c3dd06744",54,["D",1741724756686],"@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #242333;\n color: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n height: 100vh;\n font-family: 'Lato', sans-serif;\n margin: 0;\n}\n\n.movie-container {\n margin: 20px 0;\n}\n\n.movie-container select {\n background-color: #fff;\n border: 0;\n border-radius: 5px;\n font-size: 14px;\n margin-left: 10px;\n padding: 5px 15px 5px 15px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.container {\n perspective: 1000px;\n margin-bottom: 30px;\n}\n\n.seat {\n background-color: #444451;\n height: 12px;\n width: 15px;\n margin: 3px;\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n}\n\n.seat.selected {\n background-color: #6feaf6;\n}\n\n.seat.occupied {\n background-color: #fff;\n}\n\n.seat:nth-of-type(2) {\n margin-right: 18px;\n}\n\n.seat:nth-last-of-type(2) {\n margin-left: 18px;\n}\n\n.seat:not(.occupied):hover {\n cursor: pointer;\n transform: scale(1.2);\n}\n\n.showcase .seat:not(.occupied):hover {\n cursor: default;\n transform: scale(1);\n}\n\n.showcase {\n background: rgba(0, 0, 0, 0.1);\n padding: 5px 10px;\n border-radius: 5px;\n color: #777;\n list-style-type: none;\n display: flex;\n justify-content: space-between;\n}\n\n.showcase li {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 10px;\n}\n\n.showcase li small {\n margin-left: 2px;\n}\n\n.row {\n display: flex;\n}\n\n.screen {\n background-color: #fff;\n height: 70px;\n width: 100%;\n margin: 15px 0;\n transform: rotateX(-45deg);\n box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);\n}\n\np.text {\n margin: 5px 0;\n}\n\np.text span {\n color: #6feaf6;\n}\n",[],[663,208],[663],{"_102":701,"_95":702,"_154":703,"_156":-5,"_157":139,"_158":704,"_160":117,"_104":705,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":706,"_98":738},"09b6e8c8-feb7-11ef-82b7-569c3dd06744","music-player","488d1873-8c99-4309-99a4-5940f31d600d",55,["D",1741724756717],[707,714,722,730],{"_102":708,"_95":180,"_154":709,"_156":703,"_157":139,"_158":704,"_160":117,"_104":710,"_99":32,"_162":183,"_164":711,"_165":22,"_166":-5,"_167":712,"_98":713},"09b6e436-feb7-11ef-82b7-569c3dd06744","09b6e4c2-feb7-11ef-82b7-569c3dd06744",["D",1741724756717],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n \n Music Player\n \n \n

Music Player

\n\n

\n $\"music-cover\"$ \n

\n \n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[702,180],{"_102":715,"_95":287,"_154":716,"_156":703,"_157":139,"_158":717,"_160":117,"_104":718,"_99":32,"_162":174,"_164":719,"_165":22,"_166":-5,"_167":720,"_98":721},"09bc0132-feb7-11ef-9c16-569c3dd06744","09bc01d2-feb7-11ef-9c16-569c3dd06744",56,["D",1741724756752],"## Music Player\n\nCreate beautiful UI to play music stored in the \"music folder\" using the HTML5 audio API\n\n## Project Specifications\n\n- Create UI for music player including spinning image and song detail popup\n- Add play and pause functionality\n- Switch songs\n- Progress bar\n",[],[702,287],{"_102":723,"_95":198,"_154":724,"_156":703,"_157":139,"_158":725,"_160":117,"_104":726,"_99":32,"_162":202,"_164":727,"_165":22,"_166":-5,"_167":728,"_98":729},"09c2a816-feb7-11ef-9b53-569c3dd06744","09c2a8b6-feb7-11ef-9b53-569c3dd06744",57,["D",1741724756795],"const musicContainer = document.getElementById('music-container');\nconst playBtn = document.getElementById('play');\nconst prevBtn = document.getElementById('prev');\nconst nextBtn = document.getElementById('next');\n\nconst audio = document.getElementById('audio');\nconst progress = document.getElementById('progress');\nconst progressContainer = document.getElementById('progress-container');\nconst title = document.getElementById('title');\nconst cover = document.getElementById('cover');\nconst currTime = document.querySelector('#currTime');\nconst durTime = document.querySelector('#durTime');\n\n// Song titles\nconst songs = ['hey', 'summer', 'ukulele'];\n\n// Keep track of song\nlet songIndex = 2;\n\n// Initially load song details into DOM\nloadSong(songs[songIndex]);\n\n// Update song details\nfunction loadSong(song) {\n title.innerText = song;\n audio.src = `music/${song}.mp3`;\n cover.src = `images/${song}.jpg`;\n}\n\n// Play song\nfunction playSong() {\n musicContainer.classList.add('play');\n playBtn.querySelector('i.fas').classList.remove('fa-play');\n playBtn.querySelector('i.fas').classList.add('fa-pause');\n\n audio.play();\n}\n\n// Pause song\nfunction pauseSong() {\n musicContainer.classList.remove('play');\n playBtn.querySelector('i.fas').classList.add('fa-play');\n playBtn.querySelector('i.fas').classList.remove('fa-pause');\n\n audio.pause();\n}\n\n// Previous song\nfunction prevSong() {\n songIndex--;\n\n if (songIndex < 0) {\n songIndex = songs.length - 1;\n }\n\n loadSong(songs[songIndex]);\n\n playSong();\n}\n\n// Next song\nfunction nextSong() {\n songIndex++;\n\n if (songIndex > songs.length - 1) {\n songIndex = 0;\n }\n\n loadSong(songs[songIndex]);\n\n playSong();\n}\n\n// Update progress bar\nfunction updateProgress(e) {\n const { duration, currentTime } = e.srcElement;\n const progressPercent = (currentTime / duration) * 100;\n progress.style.width = `${progressPercent}%`;\n}\n\n// Set progress bar\nfunction setProgress(e) {\n const width = this.clientWidth;\n const clickX = e.offsetX;\n const duration = audio.duration;\n\n audio.currentTime = (clickX / width) * duration;\n}\n\n//get duration & currentTime for Time of song\nfunction DurTime (e) {\n\tconst {duration,currentTime} = e.srcElement;\n\tvar sec;\n\tvar sec_d;\n\n\t// define minutes currentTime\n\tlet min = (currentTime==null)? 0:\n\t Math.floor(currentTime/60);\n\t min = min <10 ? '0'+min:min;\n\n\t// define seconds currentTime\n\tfunction get_sec (x) {\n\t\tif(Math.floor(x) >= 60){\n\t\t\t\n\t\t\tfor (var i = 1; i<=60; i++){\n\t\t\t\tif(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) {\n\t\t\t\t\tsec = Math.floor(x) - (60*i);\n\t\t\t\t\tsec = sec <10 ? '0'+sec:sec;\n\t\t\t\t}\n\t\t\t}\n\t\t}else{\n\t\t \tsec = Math.floor(x);\n\t\t \tsec = sec <10 ? '0'+sec:sec;\n\t\t }\n\t} \n\n\tget_sec (currentTime,sec);\n\n\t// change currentTime DOM\n\tcurrTime.innerHTML = min +':'+ sec;\n\n\t// define minutes duration\n\tlet min_d = (isNaN(duration) === true)? '0':\n\t\tMath.floor(duration/60);\n\t min_d = min_d <10 ? '0'+min_d:min_d;\n\n\n\t function get_sec_d (x) {\n\t\tif(Math.floor(x) >= 60){\n\t\t\t\n\t\t\tfor (var i = 1; i<=60; i++){\n\t\t\t\tif(Math.floor(x)>=(60*i) && Math.floor(x)<(60*(i+1))) {\n\t\t\t\t\tsec_d = Math.floor(x) - (60*i);\n\t\t\t\t\tsec_d = sec_d <10 ? '0'+sec_d:sec_d;\n\t\t\t\t}\n\t\t\t}\n\t\t}else{\n\t\t \tsec_d = (isNaN(duration) === true)? '0':\n\t\t \tMath.floor(x);\n\t\t \tsec_d = sec_d <10 ? '0'+sec_d:sec_d;\n\t\t }\n\t} \n\n\t// define seconds duration\n\t\n\tget_sec_d (duration);\n\n\t// change duration DOM\n\tdurTime.innerHTML = min_d +':'+ sec_d;\n\t\t\n};\n\n// Event listeners\nplayBtn.addEventListener('click', () => {\n const isPlaying = musicContainer.classList.contains('play');\n\n if (isPlaying) {\n pauseSong();\n } else {\n playSong();\n }\n});\n\n// Change song\nprevBtn.addEventListener('click', prevSong);\nnextBtn.addEventListener('click', nextSong);\n\n// Time/song update\naudio.addEventListener('timeupdate', updateProgress);\n\n// Click on progress bar\nprogressContainer.addEventListener('click', setProgress);\n\n// Song ends\naudio.addEventListener('ended', nextSong);\n\n// Time of song\naudio.addEventListener('timeupdate',DurTime);\n",[],[702,198],{"_102":731,"_95":208,"_154":732,"_156":703,"_157":139,"_158":733,"_160":117,"_104":734,"_99":32,"_162":202,"_164":735,"_165":22,"_166":-5,"_167":736,"_98":737},"09c91368-feb7-11ef-a7a4-569c3dd06744","09c914e4-feb7-11ef-a7a4-569c3dd06744",58,["D",1741724756836],"@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-image: linear-gradient(\n 0deg,\n rgba(247, 247, 247, 1) 23.8%,\n rgba(252, 221, 221, 1) 92%\n );\n height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-family: 'Lato', sans-serif;\n margin: 0;\n}\n\n.music-container {\n background-color: #fff;\n border-radius: 15px;\n box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);\n display: flex;\n padding: 20px 30px;\n position: relative;\n margin: 100px 0;\n z-index: 10;\n}\n\n.img-container {\n position: relative;\n width: 110px;\n}\n\n.img-container::after {\n content: '';\n background-color: #fff;\n border-radius: 50%;\n position: absolute;\n bottom: 100%;\n left: 50%;\n width: 20px;\n height: 20px;\n transform: translate(-50%, 50%);\n}\n\n.img-container img {\n border-radius: 50%;\n object-fit: cover;\n height: 110px;\n width: inherit;\n position: absolute;\n bottom: 0;\n left: 0;\n animation: rotate 3s linear infinite;\n\n animation-play-state: paused;\n}\n\n.music-container.play .img-container img {\n animation-play-state: running;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.navigation {\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n\n.action-btn {\n background-color: #fff;\n border: 0;\n color: #dfdbdf;\n font-size: 20px;\n cursor: pointer;\n padding: 10px;\n margin: 0 20px;\n}\n\n.action-btn.action-btn-big {\n color: #cdc2d0;\n font-size: 30px;\n}\n\n.action-btn:focus {\n outline: 0;\n}\n\n.music-info {\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 15px 15px 0 0;\n position: absolute;\n top: 0;\n left: 20px;\n width: calc(100% - 40px);\n padding: 10px 10px 10px 150px;\n opacity: 0;\n transform: translateY(0%);\n transition: transform 0.3s ease-in, opacity 0.3s ease-in;\n z-index: 0;\n}\n\n.music-container.play .music-info {\n opacity: 1;\n transform: translateY(-100%);\n}\n\n.music-info h4 {\n margin: 0;\n}\n\n.progress-container {\n background: #fff;\n border-radius: 5px;\n cursor: pointer;\n margin: 10px 0;\n height: 4px;\n width: 100%;\n}\n\n.progress {\n background-color: #fe8daa;\n border-radius: 5px;\n height: 100%;\n width: 0%;\n transition: width 0.1s linear;\n}\n",[],[702,208],[702],{"_102":740,"_95":741,"_154":742,"_156":-5,"_157":139,"_158":743,"_160":117,"_104":744,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":745,"_98":777},"09cf8324-feb7-11ef-a7a4-569c3dd06744","new-year-countdown","406a5c61-64cd-4c5f-a074-7747ad619d3f",59,["D",1741724756877],[746,753,761,769],{"_102":747,"_95":171,"_154":748,"_156":742,"_157":139,"_158":743,"_160":117,"_104":749,"_99":32,"_162":174,"_164":750,"_165":22,"_166":-5,"_167":751,"_98":752},"09cf7faa-feb7-11ef-a7a4-569c3dd06744","09cf805e-feb7-11ef-a7a4-569c3dd06744",["D",1741724756877],"## New Year Countdown\r\n\r\nLanding page that counts down from the current date to the next new year\r\n\r\n## Project Specifications\r\n\r\n- Create landing page with HTML/CSS\r\n- Calculate the days, hours, mins and seconds to the new year\r\n- Insert values into the DOM\r\n- Show a spinner right before loading the countdown\r\n- Show the coming year in the background\r\n",[],[741,171],{"_102":754,"_95":180,"_154":755,"_156":742,"_157":139,"_158":756,"_160":117,"_104":757,"_99":32,"_162":183,"_164":758,"_165":22,"_166":-5,"_167":759,"_98":760},"09d51cda-feb7-11ef-82b7-569c3dd06744","09d51d84-feb7-11ef-82b7-569c3dd06744",60,["D",1741724756917],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n New Year Countdown\n \n \n

\n\n

New Year Countdown

\n\n

00

\n days\n

00

\n hours\n

00

\n minutes\n

00

\n seconds\n

\n\n \n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[741,180],{"_102":762,"_95":198,"_154":763,"_156":742,"_157":139,"_158":764,"_160":117,"_104":765,"_99":32,"_162":202,"_164":766,"_165":22,"_166":-5,"_167":767,"_98":768},"09dbf866-feb7-11ef-82b7-569c3dd06744","09dbf8fc-feb7-11ef-82b7-569c3dd06744",61,["D",1741724756962],"const days = document.getElementById('days');\nconst hours = document.getElementById('hours');\nconst minutes = document.getElementById('minutes');\nconst seconds = document.getElementById('seconds');\nconst countdown = document.getElementById('countdown');\nconst year = document.getElementById('year');\nconst loading = document.getElementById('loading');\n\nconst currentYear = new Date().getFullYear();\n\nconst newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);\n\n// Set background year\nyear.innerText = currentYear + 1;\n\n// Update countdown time\nfunction updateCountdown() {\n const currentTime = new Date();\n const diff = newYearTime - currentTime;\n\n const d = Math.floor(diff / 1000 / 60 / 60 / 24);\n const h = Math.floor(diff / 1000 / 60 / 60) % 24;\n const m = Math.floor(diff / 1000 / 60) % 60;\n const s = Math.floor(diff / 1000) % 60;\n\n // Add values to DOM\n days.innerHTML = d;\n hours.innerHTML = h < 10 ? '0' + h : h;\n minutes.innerHTML = m < 10 ? '0' + m : m;\n seconds.innerHTML = s < 10 ? '0' + s : s;\n}\n\n// Show spinner before countdown\nsetTimeout(() => {\n loading.remove();\n countdown.style.display = 'flex';\n}, 1000);\n\n// Run every second\nsetInterval(updateCountdown, 1000);\n",[],[741,198],{"_102":770,"_95":208,"_154":771,"_156":742,"_157":139,"_158":772,"_160":117,"_104":773,"_99":32,"_162":202,"_164":774,"_165":22,"_166":-5,"_167":775,"_98":776},"09e09fce-feb7-11ef-8137-569c3dd06744","09e0a05a-feb7-11ef-8137-569c3dd06744",62,["D",1741724756993],"@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-image: url('https://images.unsplash.com/photo-1467810563316-b5476525c0f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80');\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center center;\n height: 100vh;\n color: #fff;\n font-family: 'Lato', sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n margin: 0;\n overflow: hidden;\n}\n\n/* Add a dark overlay */\nbody::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n}\n\nbody * {\n z-index: 1;\n}\n\nh1 {\n font-size: 60px;\n margin: -80px 0 40px;\n}\n\n.year {\n font-size: 200px;\n z-index: -1;\n opacity: 0.2;\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.countdown {\n /* display: flex; */\n display: none;\n transform: scale(2);\n}\n\n.time {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 15px;\n}\n\n.time h2 {\n margin: 0 0 5px;\n}\n\n@media (max-width: 500px) {\n h1 {\n font-size: 45px;\n }\n\n .time {\n margin: 5px;\n }\n\n .time h2 {\n font-size: 12px;\n margin: 0;\n }\n\n .time small {\n font-size: 10px;\n }\n}\n",[],[741,208],[741],{"_102":779,"_95":780,"_154":781,"_156":-5,"_157":139,"_158":782,"_160":117,"_104":783,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":784,"_98":800},"09e6ab3a-feb7-11ef-9b53-569c3dd06744","product-filtering","439518a1-08a4-4fdc-ad28-5dffdce9efb2",63,["D",1741724757029],[785,792],{"_102":786,"_95":180,"_154":787,"_156":781,"_157":139,"_158":782,"_160":117,"_104":788,"_99":32,"_162":183,"_164":789,"_165":22,"_166":-5,"_167":790,"_98":791},"09e6a432-feb7-11ef-9b53-569c3dd06744","09e6a4c8-feb7-11ef-9b53-569c3dd06744",["D",1741724757029],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n Product Filtering\n \n \n \n\n

Filters

Relaxer

\n\n

\n \n

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[803,180],{"_102":824,"_95":198,"_154":825,"_156":804,"_157":139,"_158":826,"_160":117,"_104":827,"_99":32,"_162":202,"_164":828,"_165":22,"_166":-5,"_167":829,"_98":830},"0a02345e-feb7-11ef-82b7-569c3dd06744","0a0234ea-feb7-11ef-82b7-569c3dd06744",68,["D",1741724757213],"const container = document.getElementById('container');\nconst text = document.getElementById('text');\n\nconst totalTime = 7500;\nconst breatheTime = (totalTime / 5) * 2;\nconst holdTime = totalTime / 5;\n\nbreathAnimation();\n\nfunction breathAnimation() {\n text.innerText = 'Breathe In!';\n container.className = 'container grow';\n\n setTimeout(() => {\n text.innerText = 'Hold';\n\n setTimeout(() => {\n text.innerText = 'Breathe Out!';\n container.className = 'container shrink';\n }, holdTime);\n }, breatheTime);\n}\n\nsetInterval(breathAnimation, totalTime);\n",[],[803,198],{"_102":832,"_95":208,"_154":833,"_156":804,"_157":139,"_158":834,"_160":117,"_104":835,"_99":32,"_162":202,"_164":836,"_165":22,"_166":-5,"_167":837,"_98":838},"0a067f82-feb7-11ef-82b7-569c3dd06744","0a068022-feb7-11ef-82b7-569c3dd06744",69,["D",1741724757241],"@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background: #224941 url('./img/bg.jpg') no-repeat center center/cover;\n color: #fff;\n font-family: 'Montserrat', sans-serif;\n min-height: 100vh;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0;\n}\n\n.container {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: auto;\n height: 300px;\n width: 300px;\n position: relative;\n transform: scale(1);\n}\n\n.circle {\n background-color: #010f1c;\n height: 100%;\n width: 100%;\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: -1;\n}\n\n.gradient-circle {\n background: conic-gradient(\n #55b7a4 0%,\n #4ca493 40%,\n #fff 40%,\n #fff 60%,\n #336d62 60%,\n #2a5b52 100%\n );\n height: 320px;\n width: 320px;\n z-index: -2;\n border-radius: 50%;\n position: absolute;\n top: -10px;\n left: -10px;\n}\n\n.pointer {\n background-color: #fff;\n border-radius: 50%;\n height: 20px;\n width: 20px;\n display: block;\n}\n\n.pointer-container {\n position: absolute;\n top: -40px;\n left: 140px;\n width: 20px;\n height: 190px;\n animation: rotate 7.5s linear forwards infinite;\n transform-origin: bottom center;\n}\n\n@keyframes rotate {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.container.grow {\n animation: grow 3s linear forwards;\n}\n\n@keyframes grow {\n from {\n transform: scale(1);\n }\n\n to {\n transform: scale(1.2);\n }\n}\n\n.container.shrink {\n animation: shrink 3s linear forwards;\n}\n\n@keyframes shrink {\n from {\n transform: scale(1.2);\n }\n\n to {\n transform: scale(1);\n }\n}\n",[],[803,208],[803],{"_102":841,"_95":842,"_154":843,"_156":-5,"_157":139,"_158":844,"_160":117,"_104":845,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":846,"_98":878},"0a0c26a8-feb7-11ef-9519-569c3dd06744","sortable-list","465d9b70-be89-445c-912b-ef9a77990730",70,["D",1741724757275],[847,854,862,870],{"_102":848,"_95":171,"_154":849,"_156":843,"_157":139,"_158":844,"_160":117,"_104":850,"_99":32,"_162":174,"_164":851,"_165":22,"_166":-5,"_167":852,"_98":853},"0a0c228e-feb7-11ef-9519-569c3dd06744","0a0c234c-feb7-11ef-9519-569c3dd06744",["D",1741724757275],"## Sortable List\r\n\r\nDisplay a scrambled list that can be sorted with drag and drop\r\n\r\n## Project Specifications\r\n\r\n- Create an ordered list (Top 10 richest people)\r\n- Scramble list items randomly\r\n- Allow user to drag and drop an item to a different position\r\n- Button to check if items are in correct order\r\n- Show green for correct order and red for wrong order\r\n",[],[842,171],{"_102":855,"_95":180,"_154":856,"_156":843,"_157":139,"_158":857,"_160":117,"_104":858,"_99":32,"_162":183,"_164":859,"_165":22,"_166":-5,"_167":860,"_98":861},"0a11975a-feb7-11ef-a0fb-569c3dd06744","0a119818-feb7-11ef-a0fb-569c3dd06744",71,["D",1741724757314],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n Top 10 Richest People\n \n \n \n \n

10 Richest People

Drag and drop the items into their corresponding spots

\n \n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[842,180],{"_102":863,"_95":198,"_154":864,"_156":843,"_157":139,"_158":865,"_160":117,"_104":866,"_99":32,"_162":202,"_164":867,"_165":22,"_166":-5,"_167":868,"_98":869},"0a16250e-feb7-11ef-a0fb-569c3dd06744","0a16259a-feb7-11ef-a0fb-569c3dd06744",72,["D",1741724757344],"const draggable_list = document.getElementById('draggable-list');\nconst check = document.getElementById('check');\n\nconst richestPeople = [\n 'Jeff Bezos',\n 'Bill Gates',\n 'Warren Buffett',\n 'Bernard Arnault',\n 'Carlos Slim Helu',\n 'Amancio Ortega',\n 'Larry Ellison',\n 'Mark Zuckerberg',\n 'Michael Bloomberg',\n 'Larry Page'\n];\n\n// Store listitems\nconst listItems = [];\n\nlet dragStartIndex;\n\ncreateList();\n\n// Insert list items into DOM\nfunction createList() {\n [...richestPeople]\n .map(a => ({ value: a, sort: Math.random() }))\n .sort((a, b) => a.sort - b.sort)\n .map(a => a.value)\n .forEach((person, index) => {\n const listItem = document.createElement('li');\n\n listItem.setAttribute('data-index', index);\n\n listItem.innerHTML = `\n ${index + 1}\n

${person}

\n \n

\n `;\n\n listItems.push(listItem);\n\n draggable_list.appendChild(listItem);\n });\n\n addEventListeners();\n}\n\nfunction dragStart() {\n // console.log('Event: ', 'dragstart');\n dragStartIndex = +this.closest('li').getAttribute('data-index');\n}\n\nfunction dragEnter() {\n // console.log('Event: ', 'dragenter');\n this.classList.add('over');\n}\n\nfunction dragLeave() {\n // console.log('Event: ', 'dragleave');\n this.classList.remove('over');\n}\n\nfunction dragOver(e) {\n // console.log('Event: ', 'dragover');\n e.preventDefault();\n}\n\nfunction dragDrop() {\n // console.log('Event: ', 'drop');\n const dragEndIndex = +this.getAttribute('data-index');\n swapItems(dragStartIndex, dragEndIndex);\n\n this.classList.remove('over');\n}\n\n// Swap list items that are drag and drop\nfunction swapItems(fromIndex, toIndex) {\n const itemOne = listItems[fromIndex].querySelector('.draggable');\n const itemTwo = listItems[toIndex].querySelector('.draggable');\n\n listItems[fromIndex].appendChild(itemTwo);\n listItems[toIndex].appendChild(itemOne);\n}\n\n// Check the order of list items\nfunction checkOrder() {\n listItems.forEach((listItem, index) => {\n const personName = listItem.querySelector('.draggable').innerText.trim();\n\n if (personName !== richestPeople[index]) {\n listItem.classList.add('wrong');\n } else {\n listItem.classList.remove('wrong');\n listItem.classList.add('right');\n }\n });\n}\n\nfunction addEventListeners() {\n const draggables = document.querySelectorAll('.draggable');\n const dragListItems = document.querySelectorAll('.draggable-list li');\n\n draggables.forEach(draggable => {\n draggable.addEventListener('dragstart', dragStart);\n });\n\n dragListItems.forEach(item => {\n item.addEventListener('dragover', dragOver);\n item.addEventListener('drop', dragDrop);\n item.addEventListener('dragenter', dragEnter);\n item.addEventListener('dragleave', dragLeave);\n });\n}\n\ncheck.addEventListener('click', checkOrder);\n",[],[842,198],{"_102":871,"_95":208,"_154":872,"_156":843,"_157":139,"_158":873,"_160":117,"_104":874,"_99":32,"_162":202,"_164":875,"_165":22,"_166":-5,"_167":876,"_98":877},"0a1bc7de-feb7-11ef-9a59-569c3dd06744","0a1bc874-feb7-11ef-9a59-569c3dd06744",73,["D",1741724757379],"@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');\n\n:root {\n --border-color: #e3e5e4;\n --background-color: #c3c7ca;\n --text-color: #34444f;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #fff;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n height: 100vh;\n margin: 0;\n font-family: 'Lato', sans-serif;\n}\n\n.draggable-list {\n border: 1px solid var(--border-color);\n color: var(--text-color);\n padding: 0;\n list-style-type: none;\n}\n\n.draggable-list li {\n background-color: #fff;\n display: flex;\n flex: 1;\n}\n\n.draggable-list li:not(:last-of-type) {\n border-bottom: 1px solid var(--border-color);\n}\n\n.draggable-list .number {\n background-color: var(--background-color);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 28px;\n height: 60px;\n width: 60px;\n}\n\n.draggable-list li.over .draggable {\n background-color: #eaeaea;\n}\n\n.draggable-list .person-name {\n margin: 0 20px 0 0;\n}\n\n.draggable-list li.right .person-name {\n color: #3ae374;\n}\n\n.draggable-list li.wrong .person-name {\n color: #ff3838;\n}\n\n.draggable {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 15px;\n flex: 1;\n}\n\n.check-btn {\n background-color: var(--background-color);\n border: none;\n color: var(--text-color);\n font-size: 16px;\n padding: 10px 20px;\n cursor: pointer;\n}\n\n.check-btn:active {\n transform: scale(0.98);\n}\n\n.check-btn:focus {\n outline: none;\n}\n",[],[842,208],[842],{"_102":880,"_95":881,"_154":882,"_156":-5,"_157":139,"_158":883,"_160":117,"_104":884,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":885,"_98":917},"0a22870e-feb7-11ef-a7a4-569c3dd06744","speak-number-guess","997823bc-489e-4d13-8188-1403c06e6d87",74,["D",1741724757421],[886,893,901,909],{"_102":887,"_95":180,"_154":888,"_156":882,"_157":139,"_158":883,"_160":117,"_104":889,"_99":32,"_162":183,"_164":890,"_165":22,"_166":-5,"_167":891,"_98":892},"0a22840c-feb7-11ef-a7a4-569c3dd06744","0a2284a2-feb7-11ef-a7a4-569c3dd06744",["D",1741724757421],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n Speak Number Guess\n \n \n $\"Speak\"$ \n\n

Guess a Number Between 1 - 100

\n\n

Speak the number into your microphone

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[881,180],{"_102":894,"_95":287,"_154":895,"_156":882,"_157":139,"_158":896,"_160":117,"_104":897,"_99":32,"_162":174,"_164":898,"_165":22,"_166":-5,"_167":899,"_98":900},"0a28eed2-feb7-11ef-a7a4-569c3dd06744","0a28ef7c-feb7-11ef-a7a4-569c3dd06744",75,["D",1741724757465],"## Speak Number Guessing Game\n\nNumber guessing game where you speak your guess into the microphone using the speech recognition API\n\n## Project Specifications\n\n- Display UI directing user to speak guess\n- Implement speech recognition to listen to mic\n- Process user's guess and match\n- Let user know higher, lower, match or not a number\n",[],[881,287],{"_102":902,"_95":198,"_154":903,"_156":882,"_157":139,"_158":904,"_160":117,"_104":905,"_99":32,"_162":202,"_164":906,"_165":22,"_166":-5,"_167":907,"_98":908},"0a321b2e-feb7-11ef-82b7-569c3dd06744","0a321bf6-feb7-11ef-82b7-569c3dd06744",76,["D",1741724757522],"const msgEl = document.getElementById('msg');\n\nconst randomNum = getRandomNumber();\n\nconsole.log('Number:', randomNum);\n\nwindow.SpeechRecognition =\n window.SpeechRecognition || window.webkitSpeechRecognition;\n\nlet recognition = new window.SpeechRecognition();\n\n// Start recognition and game\nrecognition.start();\n\n// Capture user speak\nfunction onSpeak(e) {\n const msg = e.results[0][0].transcript;\n\n writeMessage(msg);\n checkNumber(msg);\n}\n\n// Write what user speaks\nfunction writeMessage(msg) {\n msgEl.innerHTML = `\n

You said:

\n ${msg}\n `;\n}\n\n// Check msg against number\nfunction checkNumber(msg) {\n const num = +msg;\n\n // Check if valid number\n if (Number.isNaN(num)) {\n msgEl.innerHTML += '

That is not a valid number

';\n return;\n }\n\n // Check in range\n if (num > 100 || num < 1) {\n msgEl.innerHTML += '

Number must be between 1 and 100

';\n return;\n }\n\n // Check number\n if (num === randomNum) {\n document.body.innerHTML = `\n

Congrats! You have guessed the number!

\n It was ${num}

\n \n `;\n } else if (num > randomNum) {\n msgEl.innerHTML += '

GO LOWER

';\n } else {\n msgEl.innerHTML += '

GO HIGHER

';\n }\n}\n\n// Generate random number\nfunction getRandomNumber() {\n return Math.floor(Math.random() * 100) + 1;\n}\n\n// Speak result\nrecognition.addEventListener('result', onSpeak);\n\n// End SR service\nrecognition.addEventListener('end', () => recognition.start());\n\ndocument.body.addEventListener('click', e => {\n if (e.target.id == 'play-again') {\n window.location.reload();\n }\n});\n",[],[881,198],{"_102":910,"_95":208,"_154":911,"_156":882,"_157":139,"_158":912,"_160":117,"_104":913,"_99":32,"_162":202,"_164":914,"_165":22,"_166":-5,"_167":915,"_98":916},"0a36c8fe-feb7-11ef-82b7-569c3dd06744","0a36c994-feb7-11ef-82b7-569c3dd06744",77,["D",1741724757558],"* {\n box-sizing: border-box;\n}\n\nbody {\n background: #2f3542 url('img/bg.jpg') no-repeat left center/cover;\n color: #fff;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n}\n\nh1,\nh3 {\n margin-bottom: 0;\n}\n\np {\n line-height: 1.5;\n margin: 0;\n}\n\n.play-again {\n padding: 8px 15px;\n border: 0;\n background: #f4f4f4;\n border-radius: 5px;\n margin-top: 10px;\n}\n\n.msg {\n font-size: 1.5em;\n margin-top: 40px;\n}\n\n.box {\n border: 1px solid #dedede;\n display: inline-block;\n font-size: 30px;\n margin: 20px;\n padding: 10px;\n}\n",[],[881,208],[881],{"_102":919,"_95":920,"_154":921,"_156":-5,"_157":139,"_158":922,"_160":117,"_104":923,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":924,"_98":956},"0a3b70b6-feb7-11ef-a0fb-569c3dd06744","speech-text-reader","9f2bc8c5-34c5-4c6d-9961-cae1336432be",78,["D",1741724757586],[925,932,940,948],{"_102":926,"_95":171,"_154":927,"_156":921,"_157":139,"_158":922,"_160":117,"_104":928,"_99":32,"_162":174,"_164":929,"_165":22,"_166":-5,"_167":930,"_98":931},"0a3b6cc4-feb7-11ef-a0fb-569c3dd06744","0a3b6d6e-feb7-11ef-a0fb-569c3dd06744",["D",1741724757586],"## Speech Text Reader\r\n\r\nA text to speech app for non-verbal people. Pre-made buttons and custom text speech. This project uses the Web Speech API\r\n\r\n## Project Specifications\r\n\r\n- Create responsive UI (CSS Grid) with picture buttons\r\n- Speaks the text when button clicked\r\n- Drop down custom text to speech\r\n- Speaks the text typed in\r\n- Change voices and accents\r\n",[],[920,171],{"_102":933,"_95":180,"_154":934,"_156":921,"_157":139,"_158":935,"_160":117,"_104":936,"_99":32,"_162":183,"_164":937,"_165":22,"_166":-5,"_167":938,"_98":939},"0a40944c-feb7-11ef-9a59-569c3dd06744","0a409500-feb7-11ef-9a59-569c3dd06744",79,["D",1741724757621],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n Speech Text Reader\n \n \n

Speech Text Reader

\n \n

Choose Voice

\n \n \n \n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[920,180],{"_102":941,"_95":198,"_154":942,"_156":921,"_157":139,"_158":943,"_160":117,"_104":944,"_99":32,"_162":202,"_164":945,"_165":22,"_166":-5,"_167":946,"_98":947},"0a468be0-feb7-11ef-9c16-569c3dd06744","0a468ca8-feb7-11ef-9c16-569c3dd06744",80,["D",1741724757660],"const main = document.querySelector('main');\nconst voicesSelect = document.getElementById('voices');\nconst textarea = document.getElementById('text');\nconst readBtn = document.getElementById('read');\nconst toggleBtn = document.getElementById('toggle');\nconst closeBtn = document.getElementById('close');\n\nconst data = [\n {\n image: './img/drink.jpg',\n text: \"I'm Thirsty\"\n },\n {\n image: './img/food.jpg',\n text: \"I'm Hungry\"\n },\n {\n image: './img/tired.jpg',\n text: \"I'm Tired\"\n },\n {\n image: './img/hurt.jpg',\n text: \"I'm Hurt\"\n },\n {\n image: './img/happy.jpg',\n text: \"I'm Happy\"\n },\n {\n image: './img/angry.jpg',\n text: \"I'm Angry\"\n },\n {\n image: './img/sad.jpg',\n text: \"I'm Sad\"\n },\n {\n image: './img/scared.jpg',\n text: \"I'm Scared\"\n },\n {\n image: './img/outside.jpg',\n text: 'I Want To Go Outside'\n },\n {\n image: './img/home.jpg',\n text: 'I Want To Go Home'\n },\n {\n image: './img/school.jpg',\n text: 'I Want To Go To School'\n },\n {\n image: './img/grandma.jpg',\n text: 'I Want To Go To Grandmas'\n }\n];\n\ndata.forEach(createBox);\n\n// Create speech boxes\nfunction createBox(item) {\n const box = document.createElement('div');\n\n const { image, text } = item;\n\n box.classList.add('box');\n\n box.innerHTML = `\n $\"${text}\"$ \n

${text}

\n `;\n\n box.addEventListener('click', () => {\n setTextMessage(text);\n speakText();\n\n // Add active effect\n box.classList.add('active');\n setTimeout(() => box.classList.remove('active'), 800);\n });\n\n main.appendChild(box);\n}\n\n// Init speech synth\nconst message = new SpeechSynthesisUtterance();\n\n// Store voices\nlet voices = [];\n\nfunction getVoices() {\n voices = speechSynthesis.getVoices();\n\n voices.forEach(voice => {\n const option = document.createElement('option');\n\n option.value = voice.name;\n option.innerText = `${voice.name} ${voice.lang}`;\n\n voicesSelect.appendChild(option);\n });\n}\n\n// Set text\nfunction setTextMessage(text) {\n message.text = text;\n}\n\n// Speak text\nfunction speakText() {\n speechSynthesis.speak(message);\n}\n\n// Set voice\nfunction setVoice(e) {\n message.voice = voices.find(voice => voice.name === e.target.value);\n}\n\n// Voices changed\nspeechSynthesis.addEventListener('voiceschanged', getVoices);\n\n// Toggle text box\ntoggleBtn.addEventListener('click', () =>\n document.getElementById('text-box').classList.toggle('show')\n);\n\n// Close button\ncloseBtn.addEventListener('click', () =>\n document.getElementById('text-box').classList.remove('show')\n);\n\n// Change voice\nvoicesSelect.addEventListener('change', setVoice);\n\n// Read text button\nreadBtn.addEventListener('click', () => {\n setTextMessage(textarea.value);\n speakText();\n});\n\ngetVoices();\n",[],[920,198],{"_102":949,"_95":208,"_154":950,"_156":921,"_157":139,"_158":951,"_160":117,"_104":952,"_99":32,"_162":202,"_164":953,"_165":22,"_166":-5,"_167":954,"_98":955},"0a4bffa8-feb7-11ef-8137-569c3dd06744","0a4c007a-feb7-11ef-8137-569c3dd06744",81,["D",1741724757696],"@import url('https://fonts.googleapis.com/css?family=Lato');\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n background: #ffefea;\n font-family: 'Lato', sans-serif;\n min-height: 100vh;\n margin: 0;\n}\n\nh1 {\n text-align: center;\n}\n\n.container {\n margin: auto;\n padding: 20px;\n}\n\n.btn {\n cursor: pointer;\n background-color: darksalmon;\n border: 0;\n border-radius: 4px;\n color: #fff;\n font-size: 16px;\n padding: 8px;\n}\n\n.btn:active {\n transform: scale(0.98);\n}\n\n.btn:focus,\nselect:focus {\n outline: 0;\n}\n\n.btn-toggle {\n display: block;\n margin: auto;\n margin-bottom: 20px;\n}\n\n.text-box {\n width: 70%;\n position: absolute;\n top: 30%;\n left: 50%;\n transform: translate(-50%, -800px);\n background-color: #333;\n color: #fff;\n padding: 20px;\n border-radius: 5px;\n transition: all 1s ease-in-out;\n}\n\n.text-box.show {\n transform: translate(-50%, 0);\n}\n\n.text-box select {\n background-color: darksalmon;\n border: 0;\n color: #fff;\n font-size: 12px;\n height: 30px;\n width: 100%;\n}\n\n.text-box textarea {\n border: 1px #dadada solid;\n border-radius: 4px;\n font-size: 16px;\n padding: 8px;\n margin: 15px 0;\n width: 100%;\n height: 150px;\n}\n\n.text-box .btn {\n width: 100%;\n}\n\n.text-box .close {\n float: right;\n text-align: right;\n cursor: pointer;\n}\n\nmain {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n grid-gap: 10px;\n}\n\n.box {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n border-radius: 5px;\n cursor: pointer;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n transition: box-shadow 0.2s ease-out;\n}\n\n.box.active {\n box-shadow: 0 0 10px 5px darksalmon;\n}\n\n.box img {\n width: 100%;\n object-fit: cover;\n height: 200px;\n}\n\n.box .info {\n background-color: darksalmon;\n color: #fff;\n font-size: 18px;\n letter-spacing: 1px;\n text-transform: uppercase;\n margin: 0;\n padding: 10px;\n text-align: center;\n height: 100%;\n}\n\n@media (max-width: 1100px) {\n main {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n@media (max-width: 760px) {\n main {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 500px) {\n main {\n grid-template-columns: 1fr;\n }\n}\n",[],[920,208],[920],{"_102":958,"_95":959,"_154":960,"_156":-5,"_157":139,"_158":961,"_160":117,"_104":962,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":963,"_98":995},"0a51e404-feb7-11ef-a7a4-569c3dd06744","typing-game","6a686f5e-1064-4eb1-91c2-892c2d96d025",82,["D",1741724757731],[964,971,979,987],{"_102":965,"_95":180,"_154":966,"_156":960,"_157":139,"_158":961,"_160":117,"_104":967,"_99":32,"_162":183,"_164":968,"_165":22,"_166":-5,"_167":969,"_98":970},"0a51dcde-feb7-11ef-a7a4-569c3dd06744","0a51dd88-feb7-11ef-a7a4-569c3dd06744",["D",1741724757731],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n \n Speed Typer\n \n \n \n\n

\n \n

\n\n

👩‍💻 Speed Typer 👨‍💻

\n Type the following:\n\n

\n\n \n\n

Time left: 10s

\n\n

Score: 0

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[959,180],{"_102":972,"_95":287,"_154":973,"_156":960,"_157":139,"_158":974,"_160":117,"_104":975,"_99":32,"_162":174,"_164":976,"_165":22,"_166":-5,"_167":977,"_98":978},"0a583d04-feb7-11ef-9fd0-569c3dd06744","0a583da4-feb7-11ef-9fd0-569c3dd06744",83,["D",1741724757776],"## Speed Typer Typing Game\n\nGame to beat the clock by typing random words\n\n## Project Specifications\n\n- Create game UI including a difficuly setting\n- Generate random word and place in DOM\n- Score increase after word is typed\n- Implement timer\n- Add certain amount of time after word is typed based on difficulty\n- Store difficulty setting in local storage\n",[],[959,287],{"_102":980,"_95":198,"_154":981,"_156":960,"_157":139,"_158":982,"_160":117,"_104":983,"_99":32,"_162":202,"_164":984,"_165":22,"_166":-5,"_167":985,"_98":986},"0a5e4488-feb7-11ef-a330-569c3dd06744","0a5e456e-feb7-11ef-a330-569c3dd06744",84,["D",1741724757816],"const word = document.getElementById('word');\nconst text = document.getElementById('text');\nconst scoreEl = document.getElementById('score');\nconst timeEl = document.getElementById('time');\nconst endgameEl = document.getElementById('end-game-container');\nconst settingsBtn = document.getElementById('settings-btn');\nconst settings = document.getElementById('settings');\nconst settingsForm = document.getElementById('settings-form');\nconst difficultySelect = document.getElementById('difficulty');\n\n// List of words for game\nconst words = [\n 'sigh',\n 'tense',\n 'airplane',\n 'ball',\n 'pies',\n 'juice',\n 'warlike',\n 'bad',\n 'north',\n 'dependent',\n 'steer',\n 'silver',\n 'highfalutin',\n 'superficial',\n 'quince',\n 'eight',\n 'feeble',\n 'admit',\n 'drag',\n 'loving'\n];\n\n// Init word\nlet randomWord;\n\n// Init score\nlet score = 0;\n\n// Init time\nlet time = 10;\n\n// Set difficulty to value in ls or medium\nlet difficulty =\n localStorage.getItem('difficulty') !== null\n ? localStorage.getItem('difficulty')\n : 'medium';\n\n// Set difficulty select value\ndifficultySelect.value =\n localStorage.getItem('difficulty') !== null\n ? localStorage.getItem('difficulty')\n : 'medium';\n\n// Focus on text on start\ntext.focus();\n\n// Start counting down\nconst timeInterval = setInterval(updateTime, 1000);\n\n// Generate random word from array\nfunction getRandomWord() {\n return words[Math.floor(Math.random() * words.length)];\n}\n\n// Add word to DOM\nfunction addWordToDOM() {\n randomWord = getRandomWord();\n word.innerHTML = randomWord;\n}\n\n// Update score\nfunction updateScore() {\n score++;\n scoreEl.innerHTML = score;\n}\n\n// Update time\nfunction updateTime() {\n time--;\n timeEl.innerHTML = time + 's';\n\n if (time === 0) {\n clearInterval(timeInterval);\n // end game\n gameOver();\n }\n}\n\n// Game over, show end screen\nfunction gameOver() {\n endgameEl.innerHTML = `\n

Time ran out

Your final score is ${score}

\n \n `;\n\n endgameEl.style.display = 'flex';\n}\n\naddWordToDOM();\n\n// Event listeners\n\n// Typing\ntext.addEventListener('input', e => {\n const insertedText = e.target.value;\n\n if (insertedText === randomWord) {\n addWordToDOM();\n updateScore();\n\n // Clear\n e.target.value = '';\n\n if (difficulty === 'hard') {\n time += 2;\n } else if (difficulty === 'medium') {\n time += 3;\n } else {\n time += 5;\n }\n\n updateTime();\n }\n});\n\n// Settings btn click\nsettingsBtn.addEventListener('click', () => settings.classList.toggle('hide'));\n\n// Settings select\nsettingsForm.addEventListener('change', e => {\n difficulty = e.target.value;\n localStorage.setItem('difficulty', difficulty);\n});\n",[],[959,198],{"_102":988,"_95":208,"_154":989,"_156":960,"_157":139,"_158":990,"_160":117,"_104":991,"_99":32,"_162":202,"_164":992,"_165":22,"_166":-5,"_167":993,"_98":994},"0a62e470-feb7-11ef-a330-569c3dd06744","0a62e54c-feb7-11ef-a330-569c3dd06744",85,["D",1741724757846],"* {\n box-sizing: border-box;\n}\n\nbody {\n background-color: #2c3e50;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n margin: 0;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n}\n\nbutton {\n cursor: pointer;\n font-size: 14px;\n border-radius: 4px;\n padding: 5px 15px;\n}\n\nselect {\n width: 200px;\n padding: 5px;\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n border-radius: 0;\n background-color: #a7c5e3;\n}\n\nselect:focus,\nbutton:focus {\n outline: 0;\n}\n\n.settings-btn {\n position: absolute;\n bottom: 30px;\n left: 30px;\n}\n\n.settings {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n background-color: rgba(0, 0, 0, 0.3);\n height: 70px;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: translateY(0);\n transition: transform 0.3s ease-in-out;\n}\n\n.settings.hide {\n transform: translateY(-100%);\n}\n\n.container {\n background-color: #34495e;\n padding: 20px;\n border-radius: 4px;\n box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);\n color: #fff;\n position: relative;\n text-align: center;\n width: 500px;\n}\n\nh2 {\n background-color: rgba(0, 0, 0, 0.3);\n padding: 8px;\n border-radius: 4px;\n margin: 0 0 40px;\n}\n\nh1 {\n margin: 0;\n}\n\ninput {\n border: 0;\n border-radius: 4px;\n font-size: 14px;\n width: 300px;\n padding: 12px 20px;\n margin-top: 10px;\n}\n\n.score-container {\n position: absolute;\n top: 60px;\n right: 20px;\n}\n\n.time-container {\n position: absolute;\n top: 60px;\n left: 20px;\n}\n\n.end-game-container {\n background-color: inherit;\n display: none;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n",[],[959,208],[959],{"_102":997,"_95":287,"_154":998,"_156":-5,"_157":139,"_158":999,"_160":117,"_104":1000,"_99":32,"_162":174,"_164":1001,"_165":22,"_166":-5,"_167":1002,"_98":1003},"09f16250-feb7-11ef-8137-569c3dd06744","09f162dc-feb7-11ef-8137-569c3dd06744",65,["D",1741724757103],"# 20+ Web Projects With Vanilla JavaScript\n\nThis is the main repository for all of the projects in the course.\n\n- [Course Link](https://www.traversymedia.com/20-Vanilla-JavaScript-Projects)\n- [Get Course On Udemy](https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75)\n\n| # | Project | Live Demo |\n| :-: | :----------------------------: | :-------: |\n| 01 | [Form Validator](https://github.com/bradtraversy/vanillawebprojects/tree/master/form-validator) | [Live Demo](https://vanillawebprojects.com/projects/form-validator/) |\n| 02 | [Movie Seat Booking](https://github.com/bradtraversy/vanillawebprojects/tree/master/movie-seat-booking) | [Live Demo](https://vanillawebprojects.com/projects/movie-seat-booking/) |\n| 03 | [Custom Video Player](https://github.com/bradtraversy/vanillawebprojects/tree/master/custom-video-player) | [Live Demo](https://vanillawebprojects.com/projects/custom-video-player/) |\n| 04 | [Exchange Rate Calculator](https://github.com/bradtraversy/vanillawebprojects/tree/master/exchange-rate) | [Live Demo](https://vanillawebprojects.com/projects/exchange-rate/) |\n| 05 | [DOM Array Methods Project](https://github.com/bradtraversy/vanillawebprojects/tree/master/dom-array-methods) | [Live Demo](https://vanillawebprojects.com/projects/dom-array-methods/) |\n| 06 | [Menu Slider & Modal](https://github.com/bradtraversy/vanillawebprojects/tree/master/modal-menu-slider) | [Live Demo](https://vanillawebprojects.com/projects/modal-menu-slider/) |\n| 07 | [Hangman Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/hangman) | [Live Demo](https://vanillawebprojects.com/projects/hangman/) |\n| 08 | [Mealfinder App](https://github.com/bradtraversy/vanillawebprojects/tree/master/meal-finder) | [Live Demo](https://vanillawebprojects.com/projects/meal-finder/) |\n| 09 | [Expense Tracker](https://github.com/bradtraversy/vanillawebprojects/tree/master/expense-tracker) | [Live Demo](https://vanillawebprojects.com/projects/expense-tracker/) |\n| 10 | [Music Player](https://github.com/bradtraversy/vanillawebprojects/tree/master/music-player) | [Live Demo](https://vanillawebprojects.com/projects/music-player/) |\n| 11 | [Infinite Scrolling](https://github.com/bradtraversy/vanillawebprojects/tree/master/infinite_scroll_blog) | [Live Demo](https://vanillawebprojects.com/projects/infinite_scroll_blog/) |\n| 12 | [Typing Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/typing-game) | [Live Demo](https://vanillawebprojects.com/projects/typing-game/) |\n| 13 | [Speech Text Reader](https://github.com/bradtraversy/vanillawebprojects/tree/master/speech-text-reader) | [Live Demo](https://vanillawebprojects.com/projects/speech-text-reader/) |\n| 14 | [Memory Cards](https://github.com/bradtraversy/vanillawebprojects/tree/master/memory-cards) | [Live Demo](https://vanillawebprojects.com/projects/memory-cards/) |\n| 15 | [LyricsSearch App](https://github.com/bradtraversy/vanillawebprojects/tree/master/lyrics-search) | [Live Demo](https://vanillawebprojects.com/projects/lyrics-search/) |\n| 16 | [Relaxer App](https://github.com/bradtraversy/vanillawebprojects/tree/master/relaxer-app) | [Live Demo](https://vanillawebprojects.com/projects//relaxer-app/) |\n| 17 | [Breakout Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/breakout-game) | [Live Demo](https://vanillawebprojects.com/projects/breakout-game/) |\n| 18 | [New Year Countdown](https://github.com/bradtraversy/vanillawebprojects/tree/master/new-year-countdown) | [Live Demo](https://vanillawebprojects.com/projects/new-year-countdown/) |\n| 19 | [Speak Number Guessing Game](https://github.com/bradtraversy/vanillawebprojects/tree/master/speak-number-guess) | [Live Demo](https://vanillawebprojects.com/projects/speak-number-guess/) |\n| 20 | [Product Filtering UI](https://github.com/bradtraversy/vanillawebprojects/tree/master/product-filtering) | [Live Demo](https://vanillawebprojects.com/projects/product-filtering/) |\n\n\nNOTE ON PULL REQUESTS: All of these projects are part of the course. While I do appreciate people trying to make some things prettier or adding new features, we are only accepting pull requests and looking at issues for bug fixes so that the code stays inline with the course\n",[],[287],"files",[151,169,178,187,196,206,216,223,230,238,247,254,262,271,278,285,294,302,311,318,325,333,341,350,357,364,372,380,389,396,403,411,419,428,435,442,449,457,466,473,480,488,496,505,512,519,527,535,544,551,558,566,574,583,590,597,605,613,622,629,636,644,652,661,668,675,683,691,700,707,714,722,730,739,746,753,761,769,778,785,792,801,808,815,823,831,840,847,854,862,870,879,886,893,901,909,918,925,932,940,948,957,964,971,979,987,996],"counts",{"_1008":32,"_1009":159,"_1010":32,"_1011":1012},"pulls","branches","forks","envVars",{"_1013":32,"_1014":32},"count","emptyCount","contents",[1017,1020,1023,1026,1029,1032,1035,1038,1041,1044,1047,1050,1053,1056,1059,1062,1065,1068,1071,1074,1077,1080],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":139,"_158":159,"_160":117,"_104":1018,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1019},["D",1741724754731],[153],{"_102":217,"_95":218,"_154":219,"_156":-5,"_157":139,"_158":220,"_160":117,"_104":1021,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1022},["D",1741724754926],[218],{"_102":272,"_95":273,"_154":274,"_156":-5,"_157":139,"_158":275,"_160":117,"_104":1024,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1025},["D",1741724755125],[273],{"_102":312,"_95":313,"_154":314,"_156":-5,"_157":139,"_158":315,"_160":117,"_104":1027,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1028},["D",1741724755263],[313],{"_102":351,"_95":352,"_154":353,"_156":-5,"_157":139,"_158":354,"_160":117,"_104":1030,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1031},["D",1741724755406],[352],{"_102":390,"_95":391,"_154":392,"_156":-5,"_157":139,"_158":393,"_160":117,"_104":1033,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1034},["D",1741724755544],[391],{"_102":429,"_95":430,"_154":431,"_156":-5,"_157":139,"_158":432,"_160":117,"_104":1036,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1037},["D",1741724755692],[430],{"_102":467,"_95":468,"_154":469,"_156":-5,"_157":139,"_158":470,"_160":117,"_104":1039,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1040},["D",1741724755820],[468],{"_102":506,"_95":507,"_154":508,"_156":-5,"_157":139,"_158":509,"_160":117,"_104":1042,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1043},["D",1741724755984],[507],{"_102":545,"_95":546,"_154":547,"_156":-5,"_157":139,"_158":548,"_160":117,"_104":1045,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1046},["D",1741724756143],[546],{"_102":584,"_95":585,"_154":586,"_156":-5,"_157":139,"_158":587,"_160":117,"_104":1048,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1049},["D",1741724756291],[585],{"_102":623,"_95":624,"_154":625,"_156":-5,"_157":139,"_158":626,"_160":117,"_104":1051,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1052},["D",1741724756430],[624],{"_102":662,"_95":663,"_154":664,"_156":-5,"_157":139,"_158":665,"_160":117,"_104":1054,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1055},["D",1741724756575],[663],{"_102":701,"_95":702,"_154":703,"_156":-5,"_157":139,"_158":704,"_160":117,"_104":1057,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1058},["D",1741724756717],[702],{"_102":740,"_95":741,"_154":742,"_156":-5,"_157":139,"_158":743,"_160":117,"_104":1060,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1061},["D",1741724756877],[741],{"_102":779,"_95":780,"_154":781,"_156":-5,"_157":139,"_158":782,"_160":117,"_104":1063,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1064},["D",1741724757029],[780],{"_102":802,"_95":803,"_154":804,"_156":-5,"_157":139,"_158":805,"_160":117,"_104":1066,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1067},["D",1741724757136],[803],{"_102":841,"_95":842,"_154":843,"_156":-5,"_157":139,"_158":844,"_160":117,"_104":1069,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1070},["D",1741724757275],[842],{"_102":880,"_95":881,"_154":882,"_156":-5,"_157":139,"_158":883,"_160":117,"_104":1072,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1073},["D",1741724757421],[881],{"_102":919,"_95":920,"_154":921,"_156":-5,"_157":139,"_158":922,"_160":117,"_104":1075,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1076},["D",1741724757586],[920],{"_102":958,"_95":959,"_154":960,"_156":-5,"_157":139,"_158":961,"_160":117,"_104":1078,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":1079},["D",1741724757731],[959],{"_102":997,"_95":287,"_154":998,"_156":-5,"_157":139,"_158":999,"_160":117,"_104":1081,"_99":32,"_162":174,"_164":1001,"_165":22,"_166":-5,"_98":1082},["D",1741724757103],[287],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":1091,"_1011":1096},{"_102":103,"_95":96,"_104":1092,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":1093,"_133":1094,"_136":1095,"_148":22},["D",1741724733530],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_99":138,"_95":43,"_102":139,"_140":103,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},[],"actionData","errors"]

Breakout!

How To Play:

Custom Video Player

DOM Array Methods

Person Wealth

Total Wealth: ${formatMoney(\n wealth\n )}

Person Wealth

Exchange Rate Calculator

Expense Tracker

Your Balance

$0.00

Income

Expense

History

Add new transaction

Register With Us

Hangman

My Blog

${post.title}

${artist} - ${songTitle}

Meal Finder

Search results for '${term}':

${meal.strMeal}

${meal.strMeal}

Ingredients

\n Memory Cards\n \n Add New Card\n \n

\n Add New Card\n \n \n \n

What is this landing page about?

Tell Me More

Benefits

Sign Up

Music Player

New Year Countdown

00

00

00

00

Filters

Category

Relaxer

10 Richest People

Guess a Number Between 1 - 100

Speak the number into your microphone

Congrats! You have guessed the number! \n It was ${num}

Speech Text Reader

Choose Voice

👩‍💻 Speed Typer 👨‍💻

Time ran out

\n Memory Cards\n \n

\n Add New Card\n \n

Congrats! You have guessed the number!

\n It was ${num}

shouser

vanillawebprojects-1741724733419

Environment variables