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}",[18,156],"08880568-feb7-11ef-9519-569c3dd06744","README.md","08880626-feb7-11ef-9519-569c3dd06744",["D",1741724754731],"## Breakout! Game\r\n\r\nGame where you control a paddle with the arrow keys to bounce a ball up to break bricks. This app uses the HTML5 canvas element and API\r\n\r\n## Project Specifications\r\n\r\n- Draw elements on canvas\r\n- Use canvas paths to draw shapes\r\n- Add animation with requestAnimationFrame(cb)\r\n- Move paddle on arrow key press\r\n- Add collision detection\r\n- Keep score\r\n- Add rules button with slider\r\n",[18,163],"pulls","branches","forks","envVars",{"_175":26,"_177":26},"connections",{"_175":26,"_176":26},"count","unfilledCount","emptyCount",{"_38":118,"_13":18,"_32":33,"_119":-5,"_120":81,"_121":122,"_123":24,"_40":988,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":989,"_17":990},{"_38":162,"_13":163,"_32":164,"_119":33,"_120":81,"_121":122,"_123":24,"_40":985,"_79":26,"_34":21,"_125":166,"_36":30,"_126":-5,"_291":986,"_17":987},{"_38":155,"_13":156,"_32":52,"_119":33,"_120":81,"_121":157,"_123":24,"_40":982,"_79":26,"_34":159,"_125":160,"_36":30,"_126":-5,"_291":983,"_17":984},{"_38":148,"_13":149,"_32":150,"_119":33,"_120":81,"_121":151,"_123":24,"_40":979,"_79":26,"_34":21,"_125":153,"_36":30,"_126":-5,"_291":980,"_17":981},{"_38":141,"_13":142,"_32":143,"_119":33,"_120":81,"_121":144,"_123":24,"_40":976,"_79":26,"_34":138,"_125":146,"_36":30,"_126":-5,"_291":977,"_17":978},{"_38":133,"_13":134,"_32":135,"_119":33,"_120":81,"_121":136,"_123":24,"_40":973,"_79":26,"_34":138,"_125":139,"_36":30,"_126":-5,"_291":974,"_17":975},{"_38":969,"_13":933,"_32":927,"_119":-5,"_120":81,"_121":943,"_123":24,"_40":970,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":971,"_17":972},{"_38":965,"_13":956,"_32":950,"_119":927,"_120":81,"_121":960,"_123":24,"_40":966,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":967,"_17":968},{"_38":957,"_13":958,"_32":959,"_119":950,"_120":81,"_121":960,"_123":24,"_40":961,"_79":26,"_34":138,"_125":962,"_36":30,"_126":-5,"_291":963,"_17":964},{"_38":948,"_13":134,"_32":949,"_119":950,"_120":81,"_121":951,"_123":24,"_40":952,"_79":26,"_34":138,"_125":953,"_36":30,"_126":-5,"_291":954,"_17":955},{"_38":941,"_13":163,"_32":942,"_119":927,"_120":81,"_121":943,"_123":24,"_40":944,"_79":26,"_34":21,"_125":945,"_36":30,"_126":-5,"_291":946,"_17":947},{"_38":934,"_13":156,"_32":935,"_119":927,"_120":81,"_121":936,"_123":24,"_40":937,"_79":26,"_34":159,"_125":938,"_36":30,"_126":-5,"_291":939,"_17":940},{"_38":925,"_13":142,"_32":926,"_119":927,"_120":81,"_121":928,"_123":24,"_40":929,"_79":26,"_34":138,"_125":930,"_36":30,"_126":-5,"_291":931,"_17":932},{"_38":921,"_13":899,"_32":893,"_119":-5,"_120":81,"_121":916,"_123":24,"_40":922,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":923,"_17":924},{"_38":914,"_13":156,"_32":915,"_119":893,"_120":81,"_121":916,"_123":24,"_40":917,"_79":26,"_34":159,"_125":918,"_36":30,"_126":-5,"_291":919,"_17":920},{"_38":907,"_13":286,"_32":908,"_119":893,"_120":81,"_121":909,"_123":24,"_40":910,"_79":26,"_34":21,"_125":911,"_36":30,"_126":-5,"_291":912,"_17":913},{"_38":900,"_13":142,"_32":901,"_119":893,"_120":81,"_121":902,"_123":24,"_40":903,"_79":26,"_34":138,"_125":904,"_36":30,"_126":-5,"_291":905,"_17":906},{"_38":891,"_13":134,"_32":892,"_119":893,"_120":81,"_121":894,"_123":24,"_40":895,"_79":26,"_34":138,"_125":896,"_36":30,"_126":-5,"_291":897,"_17":898},{"_38":887,"_13":865,"_32":859,"_119":-5,"_120":81,"_121":882,"_123":24,"_40":888,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":889,"_17":890},{"_38":880,"_13":163,"_32":881,"_119":859,"_120":81,"_121":882,"_123":24,"_40":883,"_79":26,"_34":21,"_125":884,"_36":30,"_126":-5,"_291":885,"_17":886},{"_38":873,"_13":156,"_32":874,"_119":859,"_120":81,"_121":875,"_123":24,"_40":876,"_79":26,"_34":159,"_125":877,"_36":30,"_126":-5,"_291":878,"_17":879},{"_38":866,"_13":142,"_32":867,"_119":859,"_120":81,"_121":868,"_123":24,"_40":869,"_79":26,"_34":138,"_125":870,"_36":30,"_126":-5,"_291":871,"_17":872},{"_38":857,"_13":134,"_32":858,"_119":859,"_120":81,"_121":860,"_123":24,"_40":861,"_79":26,"_34":138,"_125":862,"_36":30,"_126":-5,"_291":863,"_17":864},{"_38":853,"_13":831,"_32":825,"_119":-5,"_120":81,"_121":848,"_123":24,"_40":854,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":855,"_17":856},{"_38":846,"_13":156,"_32":847,"_119":825,"_120":81,"_121":848,"_123":24,"_40":849,"_79":26,"_34":159,"_125":850,"_36":30,"_126":-5,"_291":851,"_17":852},{"_38":839,"_13":286,"_32":840,"_119":825,"_120":81,"_121":841,"_123":24,"_40":842,"_79":26,"_34":21,"_125":843,"_36":30,"_126":-5,"_291":844,"_17":845},{"_38":832,"_13":142,"_32":833,"_119":825,"_120":81,"_121":834,"_123":24,"_40":835,"_79":26,"_34":138,"_125":836,"_36":30,"_126":-5,"_291":837,"_17":838},{"_38":823,"_13":134,"_32":824,"_119":825,"_120":81,"_121":826,"_123":24,"_40":827,"_79":26,"_34":138,"_125":828,"_36":30,"_126":-5,"_291":829,"_17":830},{"_38":819,"_13":797,"_32":791,"_119":-5,"_120":81,"_121":814,"_123":24,"_40":820,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":821,"_17":822},{"_38":812,"_13":156,"_32":813,"_119":791,"_120":81,"_121":814,"_123":24,"_40":815,"_79":26,"_34":159,"_125":816,"_36":30,"_126":-5,"_291":817,"_17":818},{"_38":805,"_13":286,"_32":806,"_119":791,"_120":81,"_121":807,"_123":24,"_40":808,"_79":26,"_34":21,"_125":809,"_36":30,"_126":-5,"_291":810,"_17":811},{"_38":798,"_13":142,"_32":799,"_119":791,"_120":81,"_121":800,"_123":24,"_40":801,"_79":26,"_34":138,"_125":802,"_36":30,"_126":-5,"_291":803,"_17":804},{"_38":789,"_13":134,"_32":790,"_119":791,"_120":81,"_121":792,"_123":24,"_40":793,"_79":26,"_34":138,"_125":794,"_36":30,"_126":-5,"_291":795,"_17":796},{"_38":785,"_13":764,"_32":758,"_119":-5,"_120":81,"_121":780,"_123":24,"_40":786,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":787,"_17":788},{"_38":778,"_13":163,"_32":779,"_119":758,"_120":81,"_121":780,"_123":24,"_40":781,"_79":26,"_34":21,"_125":782,"_36":30,"_126":-5,"_291":783,"_17":784},{"_38":772,"_13":156,"_32":773,"_119":758,"_120":81,"_121":80,"_123":24,"_40":774,"_79":144,"_34":159,"_125":775,"_36":30,"_126":-5,"_291":776,"_17":777},{"_38":765,"_13":142,"_32":766,"_119":758,"_120":81,"_121":767,"_123":24,"_40":768,"_79":122,"_34":138,"_125":769,"_36":30,"_126":-5,"_291":770,"_17":771},{"_38":756,"_13":134,"_32":757,"_119":758,"_120":81,"_121":759,"_123":24,"_40":760,"_79":144,"_34":159,"_125":761,"_36":30,"_126":-5,"_291":762,"_17":763},{"_38":752,"_13":730,"_32":724,"_119":-5,"_120":81,"_121":747,"_123":24,"_40":753,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":754,"_17":755},{"_38":745,"_13":156,"_32":746,"_119":724,"_120":81,"_121":747,"_123":24,"_40":748,"_79":26,"_34":159,"_125":749,"_36":30,"_126":-5,"_291":750,"_17":751},{"_38":738,"_13":286,"_32":739,"_119":724,"_120":81,"_121":740,"_123":24,"_40":741,"_79":26,"_34":21,"_125":742,"_36":30,"_126":-5,"_291":743,"_17":744},{"_38":731,"_13":142,"_32":732,"_119":724,"_120":81,"_121":733,"_123":24,"_40":734,"_79":26,"_34":138,"_125":735,"_36":30,"_126":-5,"_291":736,"_17":737},{"_38":722,"_13":134,"_32":723,"_119":724,"_120":81,"_121":725,"_123":24,"_40":726,"_79":26,"_34":138,"_125":727,"_36":30,"_126":-5,"_291":728,"_17":729},{"_38":718,"_13":696,"_32":690,"_119":-5,"_120":81,"_121":713,"_123":24,"_40":719,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":720,"_17":721},{"_38":711,"_13":156,"_32":712,"_119":690,"_120":81,"_121":713,"_123":24,"_40":714,"_79":26,"_34":159,"_125":715,"_36":30,"_126":-5,"_291":716,"_17":717},{"_38":704,"_13":286,"_32":705,"_119":690,"_120":81,"_121":706,"_123":24,"_40":707,"_79":26,"_34":21,"_125":708,"_36":30,"_126":-5,"_291":709,"_17":710},{"_38":697,"_13":142,"_32":698,"_119":690,"_120":81,"_121":699,"_123":24,"_40":700,"_79":26,"_34":138,"_125":701,"_36":30,"_126":-5,"_291":702,"_17":703},{"_38":688,"_13":134,"_32":689,"_119":690,"_120":81,"_121":691,"_123":24,"_40":692,"_79":26,"_34":138,"_125":693,"_36":30,"_126":-5,"_291":694,"_17":695},{"_38":684,"_13":662,"_32":656,"_119":-5,"_120":81,"_121":679,"_123":24,"_40":685,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":686,"_17":687},{"_38":677,"_13":156,"_32":678,"_119":656,"_120":81,"_121":679,"_123":24,"_40":680,"_79":26,"_34":159,"_125":681,"_36":30,"_126":-5,"_291":682,"_17":683},{"_38":670,"_13":286,"_32":671,"_119":656,"_120":81,"_121":672,"_123":24,"_40":673,"_79":26,"_34":21,"_125":674,"_36":30,"_126":-5,"_291":675,"_17":676},{"_38":663,"_13":142,"_32":664,"_119":656,"_120":81,"_121":665,"_123":24,"_40":666,"_79":26,"_34":138,"_125":667,"_36":30,"_126":-5,"_291":668,"_17":669},{"_38":654,"_13":134,"_32":655,"_119":656,"_120":81,"_121":657,"_123":24,"_40":658,"_79":26,"_34":138,"_125":659,"_36":30,"_126":-5,"_291":660,"_17":661},{"_38":650,"_13":628,"_32":622,"_119":-5,"_120":81,"_121":645,"_123":24,"_40":651,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":652,"_17":653},{"_38":643,"_13":156,"_32":644,"_119":622,"_120":81,"_121":645,"_123":24,"_40":646,"_79":26,"_34":159,"_125":647,"_36":30,"_126":-5,"_291":648,"_17":649},{"_38":636,"_13":286,"_32":637,"_119":622,"_120":81,"_121":638,"_123":24,"_40":639,"_79":26,"_34":21,"_125":640,"_36":30,"_126":-5,"_291":641,"_17":642},{"_38":629,"_13":142,"_32":630,"_119":622,"_120":81,"_121":631,"_123":24,"_40":632,"_79":26,"_34":138,"_125":633,"_36":30,"_126":-5,"_291":634,"_17":635},{"_38":620,"_13":134,"_32":621,"_119":622,"_120":81,"_121":623,"_123":24,"_40":624,"_79":26,"_34":138,"_125":625,"_36":30,"_126":-5,"_291":626,"_17":627},{"_38":616,"_13":594,"_32":588,"_119":-5,"_120":81,"_121":611,"_123":24,"_40":617,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":618,"_17":619},{"_38":609,"_13":163,"_32":610,"_119":588,"_120":81,"_121":611,"_123":24,"_40":612,"_79":26,"_34":21,"_125":613,"_36":30,"_126":-5,"_291":614,"_17":615},{"_38":602,"_13":156,"_32":603,"_119":588,"_120":81,"_121":604,"_123":24,"_40":605,"_79":26,"_34":159,"_125":606,"_36":30,"_126":-5,"_291":607,"_17":608},{"_38":595,"_13":142,"_32":596,"_119":588,"_120":81,"_121":597,"_123":24,"_40":598,"_79":26,"_34":138,"_125":599,"_36":30,"_126":-5,"_291":600,"_17":601},{"_38":586,"_13":134,"_32":587,"_119":588,"_120":81,"_121":589,"_123":24,"_40":590,"_79":26,"_34":138,"_125":591,"_36":30,"_126":-5,"_291":592,"_17":593},{"_38":582,"_13":560,"_32":554,"_119":-5,"_120":81,"_121":577,"_123":24,"_40":583,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":584,"_17":585},{"_38":575,"_13":163,"_32":576,"_119":554,"_120":81,"_121":577,"_123":24,"_40":578,"_79":26,"_34":21,"_125":579,"_36":30,"_126":-5,"_291":580,"_17":581},{"_38":568,"_13":156,"_32":569,"_119":554,"_120":81,"_121":570,"_123":24,"_40":571,"_79":26,"_34":159,"_125":572,"_36":30,"_126":-5,"_291":573,"_17":574},{"_38":561,"_13":142,"_32":562,"_119":554,"_120":81,"_121":563,"_123":24,"_40":564,"_79":26,"_34":138,"_125":565,"_36":30,"_126":-5,"_291":566,"_17":567},{"_38":552,"_13":134,"_32":553,"_119":554,"_120":81,"_121":555,"_123":24,"_40":556,"_79":26,"_34":138,"_125":557,"_36":30,"_126":-5,"_291":558,"_17":559},{"_38":548,"_13":526,"_32":520,"_119":-5,"_120":81,"_121":543,"_123":24,"_40":549,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":550,"_17":551},{"_38":541,"_13":156,"_32":542,"_119":520,"_120":81,"_121":543,"_123":24,"_40":544,"_79":26,"_34":159,"_125":545,"_36":30,"_126":-5,"_291":546,"_17":547},{"_38":534,"_13":286,"_32":535,"_119":520,"_120":81,"_121":536,"_123":24,"_40":537,"_79":26,"_34":21,"_125":538,"_36":30,"_126":-5,"_291":539,"_17":540},{"_38":527,"_13":142,"_32":528,"_119":520,"_120":81,"_121":529,"_123":24,"_40":530,"_79":26,"_34":138,"_125":531,"_36":30,"_126":-5,"_291":532,"_17":533},{"_38":518,"_13":134,"_32":519,"_119":520,"_120":81,"_121":521,"_123":24,"_40":522,"_79":26,"_34":138,"_125":523,"_36":30,"_126":-5,"_291":524,"_17":525},{"_38":514,"_13":492,"_32":486,"_119":-5,"_120":81,"_121":509,"_123":24,"_40":515,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":516,"_17":517},{"_38":507,"_13":163,"_32":508,"_119":486,"_120":81,"_121":509,"_123":24,"_40":510,"_79":26,"_34":21,"_125":511,"_36":30,"_126":-5,"_291":512,"_17":513},{"_38":500,"_13":156,"_32":501,"_119":486,"_120":81,"_121":502,"_123":24,"_40":503,"_79":26,"_34":159,"_125":504,"_36":30,"_126":-5,"_291":505,"_17":506},{"_38":493,"_13":142,"_32":494,"_119":486,"_120":81,"_121":495,"_123":24,"_40":496,"_79":26,"_34":138,"_125":497,"_36":30,"_126":-5,"_291":498,"_17":499},{"_38":484,"_13":134,"_32":485,"_119":486,"_120":81,"_121":487,"_123":24,"_40":488,"_79":26,"_34":138,"_125":489,"_36":30,"_126":-5,"_291":490,"_17":491},{"_38":480,"_13":472,"_32":466,"_119":-5,"_120":81,"_121":475,"_123":24,"_40":481,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":482,"_17":483},{"_38":473,"_13":156,"_32":474,"_119":466,"_120":81,"_121":475,"_123":24,"_40":476,"_79":26,"_34":159,"_125":477,"_36":30,"_126":-5,"_291":478,"_17":479},{"_38":464,"_13":142,"_32":465,"_119":466,"_120":81,"_121":467,"_123":24,"_40":468,"_79":26,"_34":138,"_125":469,"_36":30,"_126":-5,"_291":470,"_17":471},{"_38":460,"_13":438,"_32":432,"_119":-5,"_120":81,"_121":455,"_123":24,"_40":461,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":462,"_17":463},{"_38":453,"_13":163,"_32":454,"_119":432,"_120":81,"_121":455,"_123":24,"_40":456,"_79":26,"_34":21,"_125":457,"_36":30,"_126":-5,"_291":458,"_17":459},{"_38":446,"_13":156,"_32":447,"_119":432,"_120":81,"_121":448,"_123":24,"_40":449,"_79":26,"_34":159,"_125":450,"_36":30,"_126":-5,"_291":451,"_17":452},{"_38":439,"_13":142,"_32":440,"_119":432,"_120":81,"_121":441,"_123":24,"_40":442,"_79":26,"_34":138,"_125":443,"_36":30,"_126":-5,"_291":444,"_17":445},{"_38":430,"_13":134,"_32":431,"_119":432,"_120":81,"_121":433,"_123":24,"_40":434,"_79":26,"_34":138,"_125":435,"_36":30,"_126":-5,"_291":436,"_17":437},{"_38":426,"_13":404,"_32":398,"_119":-5,"_120":81,"_121":421,"_123":24,"_40":427,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":428,"_17":429},{"_38":419,"_13":163,"_32":420,"_119":398,"_120":81,"_121":421,"_123":24,"_40":422,"_79":26,"_34":21,"_125":423,"_36":30,"_126":-5,"_291":424,"_17":425},{"_38":412,"_13":156,"_32":413,"_119":398,"_120":81,"_121":414,"_123":24,"_40":415,"_79":26,"_34":159,"_125":416,"_36":30,"_126":-5,"_291":417,"_17":418},{"_38":405,"_13":142,"_32":406,"_119":398,"_120":81,"_121":407,"_123":24,"_40":408,"_79":26,"_34":138,"_125":409,"_36":30,"_126":-5,"_291":410,"_17":411},{"_38":396,"_13":134,"_32":397,"_119":398,"_120":81,"_121":399,"_123":24,"_40":400,"_79":26,"_34":138,"_125":401,"_36":30,"_126":-5,"_291":402,"_17":403},{"_38":392,"_13":370,"_32":364,"_119":-5,"_120":81,"_121":387,"_123":24,"_40":393,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":394,"_17":395},{"_38":385,"_13":156,"_32":386,"_119":364,"_120":81,"_121":387,"_123":24,"_40":388,"_79":26,"_34":159,"_125":389,"_36":30,"_126":-5,"_291":390,"_17":391},{"_38":378,"_13":286,"_32":379,"_119":364,"_120":81,"_121":380,"_123":24,"_40":381,"_79":26,"_34":21,"_125":382,"_36":30,"_126":-5,"_291":383,"_17":384},{"_38":371,"_13":142,"_32":372,"_119":364,"_120":81,"_121":373,"_123":24,"_40":374,"_79":26,"_34":138,"_125":375,"_36":30,"_126":-5,"_291":376,"_17":377},{"_38":362,"_13":134,"_32":363,"_119":364,"_120":81,"_121":365,"_123":24,"_40":366,"_79":26,"_34":138,"_125":367,"_36":30,"_126":-5,"_291":368,"_17":369},{"_38":358,"_13":336,"_32":330,"_119":-5,"_120":81,"_121":353,"_123":24,"_40":359,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":360,"_17":361},{"_38":351,"_13":163,"_32":352,"_119":330,"_120":81,"_121":353,"_123":24,"_40":354,"_79":26,"_34":21,"_125":355,"_36":30,"_126":-5,"_291":356,"_17":357},{"_38":344,"_13":156,"_32":345,"_119":330,"_120":81,"_121":346,"_123":24,"_40":347,"_79":26,"_34":159,"_125":348,"_36":30,"_126":-5,"_291":349,"_17":350},{"_38":337,"_13":142,"_32":338,"_119":330,"_120":81,"_121":339,"_123":24,"_40":340,"_79":26,"_34":138,"_125":341,"_36":30,"_126":-5,"_291":342,"_17":343},{"_38":328,"_13":134,"_32":329,"_119":330,"_120":81,"_121":331,"_123":24,"_40":332,"_79":26,"_34":138,"_125":333,"_36":30,"_126":-5,"_291":334,"_17":335},{"_38":324,"_13":302,"_32":296,"_119":-5,"_120":81,"_121":319,"_123":24,"_40":325,"_79":26,"_34":35,"_125":-5,"_36":30,"_126":-5,"_291":326,"_17":327},{"_38":317,"_13":156,"_32":318,"_119":296,"_120":81,"_121":319,"_123":24,"_40":320,"_79":26,"_34":159,"_125":321,"_36":30,"_126":-5,"_291":322,"_17":323},{"_38":310,"_13":286,"_32":311,"_119":296,"_120":81,"_121":312,"_123":24,"_40":313,"_79":26,"_34":21,"_125":314,"_36":30,"_126":-5,"_291":315,"_17":316},{"_38":303,"_13":142,"_32":304,"_119":296,"_120":81,"_121":305,"_123":24,"_40":306,"_79":26,"_34":138,"_125":307,"_36":30,"_126":-5,"_291":308,"_17":309},{"_38":294,"_13":134,"_32":295,"_119":296,"_120":81,"_121":297,"_123":24,"_40":298,"_79":26,"_34":138,"_125":299,"_36":30,"_126":-5,"_291":300,"_17":301},{"_38":285,"_13":286,"_32":287,"_119":-5,"_120":81,"_121":288,"_123":24,"_40":289,"_79":26,"_34":21,"_125":290,"_36":30,"_126":-5,"_291":292,"_17":293},"09f16250-feb7-11ef-8137-569c3dd06744","readme.md","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","children",[],[286],"0a62e470-feb7-11ef-a330-569c3dd06744","0a62e54c-feb7-11ef-a330-569c3dd06744","6a686f5e-1064-4eb1-91c2-892c2d96d025",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",[],[302,134],"typing-game","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",[],[302,142],"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",[],[302,286],"0a51dcde-feb7-11ef-a7a4-569c3dd06744","0a51dd88-feb7-11ef-a7a4-569c3dd06744",82,["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}",[],[302,156],"0a51e404-feb7-11ef-a7a4-569c3dd06744",["D",1741724757731],[280,281,282,283],[302],"0a4bffa8-feb7-11ef-8137-569c3dd06744","0a4c007a-feb7-11ef-8137-569c3dd06744","9f2bc8c5-34c5-4c6d-9961-cae1336432be",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",[],[336,134],"speech-text-reader","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",[],[336,142],"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}",[],[336,156],"0a3b6cc4-feb7-11ef-a0fb-569c3dd06744","0a3b6d6e-feb7-11ef-a0fb-569c3dd06744",78,["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",[],[336,163],"0a3b70b6-feb7-11ef-a0fb-569c3dd06744",["D",1741724757586],[275,276,277,278],[336],"0a36c8fe-feb7-11ef-82b7-569c3dd06744","0a36c994-feb7-11ef-82b7-569c3dd06744","997823bc-489e-4d13-8188-1403c06e6d87",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",[],[370,134],"speak-number-guess","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",[],[370,142],"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",[],[370,286],"0a22840c-feb7-11ef-a7a4-569c3dd06744","0a2284a2-feb7-11ef-a7a4-569c3dd06744",74,["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}",[],[370,156],"0a22870e-feb7-11ef-a7a4-569c3dd06744",["D",1741724757421],[270,271,272,273],[370],"0a1bc7de-feb7-11ef-9a59-569c3dd06744","0a1bc874-feb7-11ef-9a59-569c3dd06744","465d9b70-be89-445c-912b-ef9a77990730",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",[],[404,134],"sortable-list","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",[],[404,142],"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}",[],[404,156],"0a0c228e-feb7-11ef-9519-569c3dd06744","0a0c234c-feb7-11ef-9519-569c3dd06744",70,["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",[],[404,163],"0a0c26a8-feb7-11ef-9519-569c3dd06744",["D",1741724757275],[265,266,267,268],[404],"0a067f82-feb7-11ef-82b7-569c3dd06744","0a068022-feb7-11ef-82b7-569c3dd06744","0f77db21-4f93-4af8-b912-b223ec249a2f",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",[],[438,134],"relaxer-app","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",[],[438,142],"09fce404-feb7-11ef-a7a4-569c3dd06744","09fce4ea-feb7-11ef-a7a4-569c3dd06744",67,["D",1741724757177],"export default function server(request: Request): Response {\n return new Response(\n `\n\n \n \n \n \n \n Relaxer\n \n \n

Relaxer

\n\n

\n \n

\n\n

\n\n \n \n\n`,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",[],[438,156],"09f6f38c-feb7-11ef-a7a4-569c3dd06744","09f6f44a-feb7-11ef-a7a4-569c3dd06744",66,["D",1741724757136],"## Relaxer App\r\n\r\nA relaxing breathing app with a visual director to tell you when to breathe in, hold and breathe out\r\n\r\n## Project Specifications\r\n\r\n- Create circle and gradient circle with CSS\r\n- Create and animate pointer (Small circle)\r\n- Create grow and shrink animations\r\n- Add JavaScript to create the breath animation effect\r\n",[],[438,163],"09f6f77e-feb7-11ef-a7a4-569c3dd06744",["D",1741724757136],[260,261,262,263],[438],"09ec3db6-feb7-11ef-9b53-569c3dd06744","09ec3e60-feb7-11ef-9b53-569c3dd06744","439518a1-08a4-4fdc-ad28-5dffdce9efb2",64,["D",1741724757068],"const products = [\n {\n name: 'Sony Playstation 5',\n url: 'images/playstation_5.png',\n type: 'games',\n price: 499.99,\n },\n {\n name: 'Samsung Galaxy',\n url: 'images/samsung_galaxy.png',\n type: 'smartphones',\n price: 399.99,\n },\n {\n name: 'Cannon EOS Camera',\n url: 'images/cannon_eos_camera.png',\n type: 'cameras',\n price: 749.99,\n },\n {\n name: 'Sony A7 Camera',\n url: 'images/sony_a7_camera.png',\n type: 'cameras',\n price: 1999.99,\n },\n {\n name: 'LG TV',\n url: 'images/lg_tv.png',\n type: 'televisions',\n price: 799.99,\n },\n {\n name: 'Nintendo Switch',\n url: 'images/nintendo_switch.png',\n type: 'games',\n price: 299.99,\n },\n {\n name: 'Xbox Series X',\n url: 'images/xbox_series_x.png',\n type: 'games',\n price: 499.99,\n },\n {\n name: 'Samsung TV',\n url: 'images/samsung_tv.png',\n type: 'televisions',\n price: 1099.99,\n },\n {\n name: 'Google Pixel',\n url: 'images/google_pixel.png',\n type: 'smartphones',\n price: 499.99,\n },\n {\n name: 'Sony ZV1F Camera',\n url: 'images/sony_zv1f_camera.png',\n type: 'cameras',\n price: 799.99,\n },\n {\n name: 'Toshiba TV',\n url: 'images/toshiba_tv.png',\n type: 'televisions',\n price: 499.99,\n },\n {\n name: 'iPhone 14',\n url: 'images/iphone_14.png',\n type: 'smartphones',\n price: 999.99,\n },\n];\n\n// Get DOM elements\nconst productsWrapperEl = document.getElementById('products-wrapper');\nconst checkEls = document.querySelectorAll('.check');\nconst filtersContainer = document.getElementById('filters-container');\nconst searchInput = document.getElementById('search');\nconst cartButton = document.getElementById('cartButton');\nconst cartCount = document.getElementById('cartCount');\n\n// Initialize cart item count\nlet cartItemCount = 0;\n\n// Initialize products\nconst productsEls = [];\n\n// Loop over the products and create the product elements\nproducts.forEach((product) => {\n const productEl = createProductElement(product);\n productsEls.push(productEl);\n productsWrapperEl.appendChild(productEl);\n});\n\n// Add filter event listeners\nfiltersContainer.addEventListener('change', filterProducts);\nsearchInput.addEventListener('input', filterProducts);\n\n// Create product element\nfunction createProductElement(product) {\n const productEl = document.createElement('div');\n\n productEl.className = 'item space-y-2';\n\n productEl.innerHTML = `\n \n Add To Cart\n\n

${product.name}

\n$${product.price.toLocaleString()}`;\n\n productEl.querySelector('.status').addEventListener('click', addToCart);\n\n return productEl;\n}\n\n// Toggle add/remove from cart\nfunction addToCart(e) {\n const statusEl = e.target;\n\n if (statusEl.classList.contains('added')) {\n // Remove from cart\n statusEl.classList.remove('added');\n statusEl.innerText = 'Add To Cart';\n statusEl.classList.remove('bg-red-600');\n statusEl.classList.add('bg-gray-800');\n\n cartItemCount--;\n } else {\n // Add to cart\n statusEl.classList.add('added');\n statusEl.innerText = 'Remove From Cart';\n statusEl.classList.remove('bg-gray-800');\n statusEl.classList.add('bg-red-600');\n\n cartItemCount++;\n }\n\n // Update cart item count\n cartCount.innerText = cartItemCount.toString();\n}\n\n// Filter products by search or checkbox\nfunction filterProducts() {\n // Get search term\n const searchTerm = searchInput.value.trim().toLowerCase();\n // Get checked categories\n const checkedCategories = Array.from(checkEls)\n .filter((check) => check.checked)\n .map((check) => check.id);\n\n // Loop over products and check for matches\n productsEls.forEach((productEl, index) => {\n const product = products[index];\n\n // Check to see if product matches the search or checked items\n const matchesSearchTerm = product.name.toLowerCase().includes(searchTerm);\n const isInCheckedCategory =\n checkedCategories.length === 0 ||\n checkedCategories.includes(product.type);\n\n // Show or hide product based on matches\n if (matchesSearchTerm && isInCheckedCategory) {\n productEl.classList.remove('hidden');\n } else {\n productEl.classList.add('hidden');\n }\n });\n}\n",[],[472,142],"product-filtering","09e6a432-feb7-11ef-9b53-569c3dd06744","09e6a4c8-feb7-11ef-9b53-569c3dd06744",63,["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

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}",[],[492,156],"09cf7faa-feb7-11ef-a7a4-569c3dd06744","09cf805e-feb7-11ef-a7a4-569c3dd06744",59,["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",[],[492,163],"09cf8324-feb7-11ef-a7a4-569c3dd06744",["D",1741724756877],[252,253,254,255],[492],"09c91368-feb7-11ef-a7a4-569c3dd06744","09c914e4-feb7-11ef-a7a4-569c3dd06744","488d1873-8c99-4309-99a4-5940f31d600d",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",[],[526,134],"music-player","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",[],[526,142],"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",[],[526,286],"09b6e436-feb7-11ef-82b7-569c3dd06744","09b6e4c2-feb7-11ef-82b7-569c3dd06744",55,["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}",[],[526,156],"09b6e8c8-feb7-11ef-82b7-569c3dd06744",["D",1741724756717],[247,248,249,250],[526],"09b20c18-feb7-11ef-a0fb-569c3dd06744","09b20d4e-feb7-11ef-a0fb-569c3dd06744","3e8f6448-33b5-463f-a325-2db4ea563445",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",[],[560,134],"movie-seat-booking","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",[],[560,142],"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}",[],[560,156],"09a11e8a-feb7-11ef-9d99-569c3dd06744","09a11f2a-feb7-11ef-9d99-569c3dd06744",51,["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",[],[560,163],"09a12240-feb7-11ef-9d99-569c3dd06744",["D",1741724756575],[242,243,244,245],[560],"099bf81a-feb7-11ef-b98e-569c3dd06744","099bf8ce-feb7-11ef-b98e-569c3dd06744","cb1392da-88fc-4cd8-90bf-e5c817fb7e3f",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",[],[594,134],"modal-menu-slider","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",[],[594,142],"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}",[],[594,156],"098af7b8-feb7-11ef-92cc-569c3dd06744","098af86c-feb7-11ef-92cc-569c3dd06744",47,["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",[],[594,163],"098b019a-feb7-11ef-92cc-569c3dd06744",["D",1741724756430],[237,238,239,240],[594],"0984e79c-feb7-11ef-9d99-569c3dd06744","0984e832-feb7-11ef-9d99-569c3dd06744","2787eb0e-a715-429c-9dd7-1a24f99b16fb",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",[],[628,134],"memory-cards","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",[],[628,142],"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",[],[628,286],"0975baba-feb7-11ef-a0fb-569c3dd06744","0975bb46-feb7-11ef-a0fb-569c3dd06744",43,["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}",[],[628,156],"0975c37a-feb7-11ef-a0fb-569c3dd06744",["D",1741724756291],[232,233,234,235],[628],"09706290-feb7-11ef-b98e-569c3dd06744","09706326-feb7-11ef-b98e-569c3dd06744","db082377-2a2a-4e45-87a9-384529cc5003",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",[],[662,134],"meal-finder","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",[],[662,142],"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",[],[662,286],"095f40b4-feb7-11ef-92cc-569c3dd06744","095f414a-feb7-11ef-92cc-569c3dd06744",39,["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}",[],[662,156],"095f444c-feb7-11ef-92cc-569c3dd06744",["D",1741724756143],[227,228,229,230],[662],"095999e8-feb7-11ef-a0fb-569c3dd06744","09599a7e-feb7-11ef-a0fb-569c3dd06744","10e625aa-828c-4f88-a40d-08d3f0618375",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",[],[696,134],"lyrics-search","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",[],[696,142],"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",[],[696,286],"0946ec4e-feb7-11ef-9d99-569c3dd06744","0946ecda-feb7-11ef-9d99-569c3dd06744",35,["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}",[],[696,156],"0946ef78-feb7-11ef-9d99-569c3dd06744",["D",1741724755984],[222,223,224,225],[696],"09419442-feb7-11ef-a7a4-569c3dd06744","094194d8-feb7-11ef-a7a4-569c3dd06744","7d12f2a5-2900-493e-ad2d-6b4b79d1ccf2",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",[],[730,134],"infinite_scroll_blog","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",[],[730,142],"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",[],[730,286],"092de280-feb7-11ef-92cc-569c3dd06744","092de316-feb7-11ef-92cc-569c3dd06744",31,["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}",[],[730,156],"092de604-feb7-11ef-92cc-569c3dd06744",["D",1741724755820],[217,218,219,220],[730],"71491ae6-feb8-11ef-adef-569c3dd06744","09296cf0-feb7-11ef-9d99-569c3dd06744","b2560ed3-2a49-4079-8a30-821c8ab27282",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}",[],[764,134],"hangman","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();",[],[764,142],"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}",[],[764,156],"091a75f6-feb7-11ef-9d99-569c3dd06744","091a768c-feb7-11ef-9d99-569c3dd06744",27,["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",[],[764,163],"091a78e4-feb7-11ef-9d99-569c3dd06744",["D",1741724755692],[212,213,214,215],[764],"0915198a-feb7-11ef-a694-569c3dd06744","09151a16-feb7-11ef-a694-569c3dd06744","bfb57700-bec6-4304-ac7b-02280af95464",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",[],[797,134],"form-validator","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",[],[797,142],"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",[],[797,286],"0903d10c-feb7-11ef-b702-569c3dd06744","0903d1a2-feb7-11ef-b702-569c3dd06744",23,["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}",[],[797,156],"0903d4d6-feb7-11ef-b702-569c3dd06744",["D",1741724755544],[207,208,209,210],[797],"08ff0316-feb7-11ef-9d99-569c3dd06744","08ff03ac-feb7-11ef-9d99-569c3dd06744","c0a7bdf2-ff2b-4951-a946-13bee3e4fd86",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",[],[831,134],"expense-tracker","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",[],[831,142],"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",[],[831,286],"08eebb6e-feb7-11ef-9d99-569c3dd06744","08eebc04-feb7-11ef-9d99-569c3dd06744",19,["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}",[],[831,156],"08eebf42-feb7-11ef-9d99-569c3dd06744",["D",1741724755406],[202,203,204,205],[831],"08e9161e-feb7-11ef-b98e-569c3dd06744","08e916be-feb7-11ef-b98e-569c3dd06744","dc95c042-0fa5-4f6e-95be-5fa1ebc40eb2",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",[],[865,134],"exchange-rate","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();",[],[865,142],"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}",[],[865,156],"08d8dc18-feb7-11ef-92cc-569c3dd06744","08d8dce0-feb7-11ef-92cc-569c3dd06744",15,["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",[],[865,163],"08d8e0b4-feb7-11ef-92cc-569c3dd06744",["D",1741724755263],[197,198,199,200],[865],"08d39f46-feb7-11ef-b98e-569c3dd06744","08d39ffa-feb7-11ef-b98e-569c3dd06744","448ca4cd-712a-44d3-acff-e647b5a55360",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",[],[899,134],"dom-array-methods","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",[],[899,142],"08c8d99e-feb7-11ef-8137-569c3dd06744","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",[],[899,286],"08c3e36c-feb7-11ef-b702-569c3dd06744","08c3e434-feb7-11ef-b702-569c3dd06744",11,["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}",[],[899,156],"08c3f05a-feb7-11ef-b702-569c3dd06744",["D",1741724755125],[192,193,194,195],[899],"08be5ed8-feb7-11ef-a694-569c3dd06744","08be5fa0-feb7-11ef-a694-569c3dd06744","4904c0e7-cddc-4e33-8d1e-2cc0f4813d74",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",[],[933,142],"custom-video-player","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}",[],[933,156],"08a5b1d0-feb7-11ef-92cc-569c3dd06744","08a5b298-feb7-11ef-92cc-569c3dd06744",6,["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",[],[933,163],"08b1b458-feb7-11ef-9519-569c3dd06744","08b1b520-feb7-11ef-9519-569c3dd06744","288f7165-e6cf-4c0c-9e33-01cdcfe9e5f7",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",[],[933,956,134],"css","08ac7876-feb7-11ef-813f-569c3dd06744","progress.css","08ac7916-feb7-11ef-813f-569c3dd06744",7,["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",[],[933,956,958],"08ac80f0-feb7-11ef-813f-569c3dd06744",["D",1741724754972],[186,187],[933,956],"08a5b892-feb7-11ef-92cc-569c3dd06744",["D",1741724754926],[185,188,189,190],[933],["D",1741724754892],[],[18,134],["D",1741724754852],[],[18,142],["D",1741724754807],[],[18,149],["D",1741724754771],[],[18,156],["D",1741724754731],[],[18,163],["D",1741724754731],[179,180,181,182,183],[18],["D",1741724733530],{"_11":12,"_96":92},{"_11":12,"_90":-5,"_91":92,"_31":50,"_93":94,"_95":30},{"_79":80,"_13":16,"_38":81,"_82":39,"_83":-5,"_84":-5,"_85":-5,"_86":-5,"_87":-5,"_88":14,"_89":12},"ctx",{"_72":-5,"_115":1028,"_1029":1030,"_1031":1032,"_1033":30,"_1034":30,"_1035":30,"_1036":24,"_1037":-5,"_1038":-7,"_1039":-7,"_1040":26,"_1041":30,"_1042":30,"_1043":-5,"_1044":30,"_1045":30,"_1046":30,"_1047":-5},"ENV",{"_999":1000,"_1001":1002,"_1003":16,"_1004":1005,"_1006":1007,"_1008":1009,"_1010":1011,"_1012":1013,"_1014":1015,"_1016":1017,"_1018":1019,"_1020":1021,"_1022":1023,"_1024":1025,"_1026":1027},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Breakout!

How To Play:

Time ran out

👩‍💻 Speed Typer 👨‍💻

Speech Text Reader

Choose Voice

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

Guess a Number Between 1 - 100

Speak the number into your microphone

10 Richest People

Relaxer

Filters

Category

New Year Countdown

00

00

00

00

Music Player

What is this landing page about?

Tell Me More

Benefits

Sign Up

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

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

Search results for '${term}':

${meal.strMeal}

${meal.strMeal}

Ingredients

Meal Finder

${artist} - ${songTitle}

${post.title}

My Blog

Hangman

Register With Us

Expense Tracker

Your Balance

$0.00

Income

Expense

History

Add new transaction

Exchange Rate Calculator

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

Person Wealth

DOM Array Methods

Person Wealth

Custom Video Player

Congrats! You have guessed the number!

\n It was ${num}

\n Memory Cards\n \n

\n Add New Card\n \n

History · breakout-game