From 0fcdcfb731870128bcde6dfaa71201b54ea94105 Mon Sep 17 00:00:00 2001 From: Connie Leung Date: Sun, 30 Oct 2022 15:51:32 +0800 Subject: [PATCH 01/18] chore: implement JavaScript 30 in RxJS and Angular --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index 447c66018d..146517e264 100644 --- a/readme.md +++ b/readme.md @@ -67,6 +67,7 @@ Here are some links of people who have done the tutorials, but in a different la * [Will Wager](https://github.com/wwags33/JavaScript30) another [TypeScript](https://www.typescriptlang.org/) implementation! * [marcoSven](https://github.com/marcoSven) solution suggestion for [10 - Hold Shift and Check Checkboxes](https://github.com/marcoSven/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-FINISHED.html) * [ALMaclaine](https://github.com/almaclaine) Javascript 30 written in [Dart 2.0](https://github.com/ALMaclaine/Dart30). +* [Connie Leung](https://github.com/railsstudent) Javascript 30 written in [Angular and RxJS](https://github.com/railsstudent/ng-rxjs-30). ## A note on Pull Requests From 47f3126a1bf1d5484fe94c16d58fa4aacdc7feb5 Mon Sep 17 00:00:00 2001 From: CJY Date: Fri, 18 Nov 2022 21:13:05 +0800 Subject: [PATCH 02/18] chore: implement JavaScript 30 in RxJS and Angular --- readme.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/readme.md b/readme.md index 146517e264..7237a323f5 100644 --- a/readme.md +++ b/readme.md @@ -12,8 +12,6 @@ Feel free to submit a PR adding a link to your own recaps, guides or reviews! * [Arjun Khode’s blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features * [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching -* [Meredith Underell's](http://meredithunderell.com/tag/javascript30/) Quick Lessons Learned -* [Rowan Weismiller's](http://rowanweismiller.com/blog/javascript-30/) Recaps + Lessons Learned * [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers * [Soyaine 写的中文指南](https://github.com/soyaine/JavaScript30)包含了过程记录和难点解释 * [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned From 10388a59c22d2d0428147acb8497c68ca574a5aa Mon Sep 17 00:00:00 2001 From: Hamna R Date: Fri, 25 Nov 2022 20:05:08 +0500 Subject: [PATCH 03/18] sticky nav on multiple screens is fixed by the height in px --- 24 - Sticky Nav/style-FINISHED.css | 2 +- 24 - Sticky Nav/style-START.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/24 - Sticky Nav/style-FINISHED.css b/24 - Sticky Nav/style-FINISHED.css index 0f8df57cb9..2d36a02ba1 100644 --- a/24 - Sticky Nav/style-FINISHED.css +++ b/24 - Sticky Nav/style-FINISHED.css @@ -31,7 +31,7 @@ body.fixed-nav .site-wrap { header { text-align: center; - height: 50vh; + height: 500px; background: url(https://source.unsplash.com/GKN6rpDr0EI/960x640) bottom center no-repeat; background-size: cover; display: flex; diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index ef2bc15845..0049a2f597 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -27,7 +27,7 @@ body { header { text-align: center; - height: 50vh; + height: 500px; background: url(https://source.unsplash.com/GKN6rpDr0EI/960x640) bottom center no-repeat; background-size: cover; display: flex; From a89f7633af116e2ca18335ba88f3423347747541 Mon Sep 17 00:00:00 2001 From: Clavis7 <96084919+Clavis7@users.noreply.github.com> Date: Sat, 10 Dec 2022 19:04:06 +0530 Subject: [PATCH 04/18] Removed a button element The empty button just before script tag is confusing. There is no need for it in the start file as Wes already wrote this element in the end section of tutorial. --- .../index-START.html | 1 - 1 file changed, 1 deletion(-) diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html index 7bd5931e01..094cb20b8b 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -40,7 +40,6 @@ } - From 64ff97930ab4007953abb55cde73a8e5ca1d8224 Mon Sep 17 00:00:00 2001 From: Hsin-tingCHI Date: Mon, 9 Jan 2023 13:42:18 +0100 Subject: [PATCH 05/18] Update README.md --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index 7237a323f5..74d31cc120 100644 --- a/readme.md +++ b/readme.md @@ -53,6 +53,7 @@ Feel free to submit a PR adding a link to your own recaps, guides or reviews! * [filipkowal](https://github.com/filipkowal/JS30-05-Flex-Panels-Deactivate) Fix to flex panels (5th day) so the panels deactivate when clicked on another one. * [Mo. Saif's](https://github.com/MoSaif00)note on lessons learned and a [gh-pages showcase](https://mosaif00.github.io/30-Days-JavaScript-Challenge/) for the projects. * [Stiaannel's](https://stiaannel.co.za/my-projects/javascript30) implementation of the Javascript30 challenge, with small design changes and a couple of extra features. +* [Kelly CHI's](https://kellychi22.github.io/JavaScript30/) complete JavaScript30 challenges! Click the links to check demos and notes of each challenge. 🇹🇼 🌟 ## Alternative Implementations Here are some links of people who have done the tutorials, but in a different language or framework: From 6ad1c023355e518eeea52e330cd5b5901a9de90e Mon Sep 17 00:00:00 2001 From: Piyush <118425491+piyush280599@users.noreply.github.com> Date: Mon, 16 Jan 2023 12:41:59 +0530 Subject: [PATCH 06/18] Update readme.md --- readme.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/readme.md b/readme.md index 74d31cc120..b27738c126 100644 --- a/readme.md +++ b/readme.md @@ -10,13 +10,13 @@ Grab the course at [https://JavaScript30.com](https://JavaScript30.com) Feel free to submit a PR adding a link to your own recaps, guides or reviews! -* [Arjun Khode’s blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features -* [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching -* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers +* [Arjun Khode’s blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features. +* [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching. +* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers. * [Soyaine 写的中文指南](https://github.com/soyaine/JavaScript30)包含了过程记录和难点解释 -* [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned -* [Adriana Rios](https://stpcollabr8nlstn.github.io/JavaScript30/) shares her alternative solutions -* [Michael Einsohn](http://30daysofjs.michaeleinsohn.com) publishes each challenge after watching the video once +* [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned. +* [Adriana Rios](https://stpcollabr8nlstn.github.io/JavaScript30/) shares her alternative solutions. +* [Michael Einsohn](http://30daysofjs.michaeleinsohn.com) publishes each challenge after watching the video once. * [Mike Ekkel](https://medium.com/@mike_ekkel/javascript-30-a-30-day-vanilla-js-challenge-6a733fc9f62c#.9frjtaje9) * [Yusef Habib](https://github.com/yhabib/JavaScript30) lessons and tricks learned, and a [gh-page](https://yhabib.github.io/JavaScript30/) to see working all the mini-projects. * [Amelie Yeh](https://github.com/amelieyeh/JS30) 30 lessons notes with things I've learned, and those important recaps. and directly view my demos [here](https://amelieyeh.github.io/JS30/) 🇹🇼😄 @@ -24,20 +24,20 @@ Feel free to submit a PR adding a link to your own recaps, guides or reviews! * [Rayhatron](https://rayhatron.github.io/blog/) - walkthroughs, recaps and lessons learned. * [Andrei Dobra](https://github.com/andreidbr/JS30) Full repo with lessons learned and a [gh-page](https://andreidbr.github.io/JS30/) with all the exercises. * [从零到壹全栈部落](https://github.com/liyuechun/JavaScript30-liyuechun),春哥发起的从零到壹全栈部落，旨在带领大家一起学习，一起输出，文档化，代码化，中文视频化，全栈部落口号：输出是最好的学习方式。 -* [Usmaan Ali's](https://github.com/usyyy/javascript/blob/master/JavaScript30/analysis.md) summary of the technical skills learned from each project. He's also posting them as separate blog posts [here](https://medium.com/@usyyy) +* [Usmaan Ali's](https://github.com/usyyy/javascript/blob/master/JavaScript30/analysis.md) summary of the technical skills learned from each project. He's also posting them as separate blog posts [here](https://medium.com/@usyyy). * [Axel](https://github.com/afuh/js30)'s lessons learned and a [showcase](https://afuh.github.io/js30/) with the projects. * [Chris](https://github.com/dwatow/JavaScript30) 中文實戰，目標描述、過程紀錄。 * [Muhammad D. Ramadhan's](https://miayam.github.io) blog. He shamlesly mixed his personal life with 30 day JavaScript challenge so as to increase his learning retention. He also summarised the challenge on [one single page](https://miayam.github.io/js30). Do not read his blog! * [Lee Keitel's Blog](https://blog.keitel.xyz/categories/javascript30/) includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future. * [Dustin Hsiao](https://github.com/dustinhsiao21/Javascript30-dustin) 包含了各篇介紹、 效果Demo、各篇詳解及記錄過程，附上部分延伸閱讀及[gh-page](https://dustinhsiao21.github.io/Javascript30-dustin/)。 * [GuaHsu](https://github.com/guahsu/JavaScript30) - 紀錄各篇練習過程與心得，並嘗試擴充部分練習，也做了一個包含全部練習的[介紹站](http://guahsu.io/JavaScript30/)🇹🇼 -* [Daniela](https://github.com/misslild)'s completed challenges on [GitHub Pages](https://misslild.github.io/WesBos-30day-Coding-challenge/) and [Codepen](https://codepen.io/collection/DapZeP/) :raised_hands: :muscle: :+1: -* [Dmitrii Pashutskii's](https://github.com/guar47) code of all challenges on [GitHub with Pages](https://github.com/guar47/javascript30Summary) and review [blog posts](https://blog.dpashutskii.com/tag/javascript30/) +* [Daniela](https://github.com/misslild)'s completed challenges on [GitHub Pages](https://misslild.github.io/WesBos-30day-Coding-challenge/) and [Codepen].(https://codepen.io/collection/DapZeP/) :raised_hands: :muscle: :+1: +* [Dmitrii Pashutskii's](https://github.com/guar47) code of all challenges on [GitHub with Pages](https://github.com/guar47/javascript30Summary) and review [blog posts](https://blog.dpashutskii.com/tag/javascript30/). * [Abid Hasan's](https://github.com/sabidhasan/javascript-30) completion of all challenges. This was awesome!! Learned so much! :+1: -* [Yusong Notes](https://sky172839465.github.io/course/js30) Records Yusong JS 30 days note and demo :star2: -* [Ding's Implementation](https://github.com/Ding-Fan/javascript30) code and online demo +* [Yusong Notes](https://sky172839465.github.io/course/js30) Records Yusong JS 30 days note and demo. :star2: +* [Ding's Implementation](https://github.com/Ding-Fan/javascript30) code and online demo. * [Herminio Torres](https://github.com/herminiotorres/JavaScript30) lessons and tricks learned, and a [gh-page](https://herminiotorres.github.io/JavaScript30/) to see working all the mini-projects. -* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks to for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days) 👍👍👍 +* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks to for the course to Wes 🤝 It was incredible challenge 👌 The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days).👍👍👍 * [Kizito](https://github.com/akhilome/)'s follow along [repo](https://github.com/akhilome/js30) with [completed challenges](https://akhilome.github.io/js30) and [notes](https://akhilome.github.io/js30/notes). * [VannTile](https://github.com/vanntile)'s [repository](https://github.com/vanntile/JavaScript30) and [GitHub Pages showcase](https://vanntile.github.io/JavaScript30/). Thank you for a great ⌨️ experience. * [Alex Kim](https://github.com/Alex-K1m/js30-challenge) completed all the challenges. You can check them out at [github pages](https://alex-k1m.github.io/js30-challenge/). @@ -58,13 +58,13 @@ Feel free to submit a PR adding a link to your own recaps, guides or reviews! ## Alternative Implementations Here are some links of people who have done the tutorials, but in a different language or framework: -* [Thomas Mattacchione](https://github.com/tkjone/clojurescript-30) JavaScript 30 written in ClojureScript +* [Thomas Mattacchione](https://github.com/tkjone/clojurescript-30) JavaScript 30 written in ClojureScript. * [Dave Follett's](https://github.com/davefollett) blog series, [A New Vue on #JavaScript30](https://davefollett.io/categories/a-new-vue-on-javascript30/), where he explores re-implementing #JavaScript30 projects using [Vue](https://vuejs.org). -* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises +* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises. * [Adrien Poly](https://github.com/adrienpoly/javascript30-stimulus) a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to [Stimulus JS](https://stimulusjs.org/) framework in a Rails App. -* [Bogdan Lazar](https://github.com/tricinel/TypeScript30) all the JavaScript 30 written in [TypeScript](https://www.typescriptlang.org/) +* [Bogdan Lazar](https://github.com/tricinel/TypeScript30) all the JavaScript 30 written in [TypeScript](https://www.typescriptlang.org/). * [Will Wager](https://github.com/wwags33/JavaScript30) another [TypeScript](https://www.typescriptlang.org/) implementation! -* [marcoSven](https://github.com/marcoSven) solution suggestion for [10 - Hold Shift and Check Checkboxes](https://github.com/marcoSven/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-FINISHED.html) +* [marcoSven](https://github.com/marcoSven) solution suggestion for [10 - Hold Shift and Check Checkboxes](https://github.com/marcoSven/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-FINISHED.html). * [ALMaclaine](https://github.com/almaclaine) Javascript 30 written in [Dart 2.0](https://github.com/ALMaclaine/Dart30). * [Connie Leung](https://github.com/railsstudent) Javascript 30 written in [Angular and RxJS](https://github.com/railsstudent/ng-rxjs-30). From 5547fc057b46b2fa2f6354e757a52cdcee0d4c07 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 27 Jan 2023 16:12:10 -0500 Subject: [PATCH 07/18] Add favicons to projects as favicon.ico errors were throwing learners --- 01 - JavaScript Drum Kit/index-FINISHED.html | 1 + 01 - JavaScript Drum Kit/index-START.html | 1 + 02 - JS and CSS Clock/index-FINISHED.html | 1 + 02 - JS and CSS Clock/index-START.html | 1 + 03 - CSS Variables/index-FINISHED.html | 1 + 03 - CSS Variables/index-START.html | 1 + 04 - Array Cardio Day 1/index-FINISHED.html | 1 + 04 - Array Cardio Day 1/index-START.html | 1 + 05 - Flex Panel Gallery/index-FINISHED.html | 9 +++++---- 05 - Flex Panel Gallery/index-START.html | 7 ++++--- 06 - Type Ahead/index-FINISHED.html | 1 + 06 - Type Ahead/index-START.html | 1 + 07 - Array Cardio Day 2/index-FINISHED.html | 1 + 07 - Array Cardio Day 2/index-START.html | 1 + 08 - Fun with HTML5 Canvas/index-FINISHED.html | 1 + 08 - Fun with HTML5 Canvas/index-START.html | 1 + 09 - Dev Tools Domination/index-FINISHED.html | 1 + 09 - Dev Tools Domination/index-START.html | 1 + 10 - Hold Shift and Check Checkboxes/index-FINISHED.html | 1 + 10 - Hold Shift and Check Checkboxes/index-START.html | 1 + 11 - Custom Video Player/index.html | 1 + 12 - Key Sequence Detection/index-FINISHED.html | 1 + 12 - Key Sequence Detection/index-START.html | 1 + 13 - Slide in on Scroll/index-FINISHED.html | 7 ++++--- 13 - Slide in on Scroll/index-START.html | 7 ++++--- .../index-FINISHED.html | 1 + 14 - JavaScript References VS Copying/index-START.html | 1 + 15 - LocalStorage/index-FINISHED.html | 1 + 15 - LocalStorage/index-START.html | 1 + 16 - Mouse Move Shadow/index-FINISHED.html | 1 + 16 - Mouse Move Shadow/index-START.html | 1 + 17 - Sort Without Articles/index-FINISHED.html | 5 +++-- 17 - Sort Without Articles/index-START.html | 5 +++-- 18 - Adding Up Times with Reduce/index-FINISHED.html | 1 + 18 - Adding Up Times with Reduce/index-START.html | 1 + 19 - Webcam Fun/index.html | 1 + 20 - Speech Detection/index-FINISHED.html | 5 +++-- 20 - Speech Detection/index-START.html | 3 ++- 21 - Geolocation/index-FINISHED.html | 3 ++- 21 - Geolocation/index-START.html | 3 ++- 22 - Follow Along Link Highlighter/index-FINISHED.html | 1 + 22 - Follow Along Link Highlighter/index-START.html | 1 + 23 - Speech Synthesis/index-FINISHED.html | 1 + 23 - Speech Synthesis/index-START.html | 1 + 24 - Sticky Nav/index-FINISHED.html | 1 + 24 - Sticky Nav/index-START.html | 1 + .../index-FINISHED.html | 7 ++++--- .../index-START.html | 7 ++++--- 26 - Stripe Follow Along Nav/index-FINISHED.html | 7 ++++--- 26 - Stripe Follow Along Nav/index-START.html | 7 ++++--- 27 - Click and Drag/index-FINISHED.html | 1 + 27 - Click and Drag/index-START.html | 1 + 28 - Video Speed Controller/index-FINISHED.html | 1 + 28 - Video Speed Controller/index-START.html | 1 + 29 - Countdown Timer/index.html | 1 + 30 - Whack A Mole/index-FINISHED.html | 1 + 30 - Whack A Mole/index-START.html | 1 + 57 files changed, 91 insertions(+), 34 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..7dd9d9cb6a 100644 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ b/01 - JavaScript Drum Kit/index-FINISHED.html @@ -4,6 +4,7 @@ JS Drum Kit + diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..8a2f8e8417 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -4,6 +4,7 @@ JS Drum Kit + diff --git a/02 - JS and CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html index 04d1a4e40e..52d379ed94 100644 --- a/02 - JS and CSS Clock/index-FINISHED.html +++ b/02 - JS and CSS Clock/index-FINISHED.html @@ -3,6 +3,7 @@ JS + CSS Clock + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..55ab1a5331 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -3,6 +3,7 @@ JS + CSS Clock + diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html index 2f0d1464ff..f9e6a04b2c 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -3,6 +3,7 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..d5fcc3a2ae 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -3,6 +3,7 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html index d1f6ce33d6..a9f2ec20b4 100644 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -3,6 +3,7 @@ Array Cardio 💪 +

Psst: have a look at the JavaScript Console 💁

diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 21bec96e8c..0dcfd00f40 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -3,6 +3,7 @@ Array Cardio 💪 +

Psst: have a look at the JavaScript Console 💁

diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html index bfa64d6be3..684ee7e307 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -4,6 +4,7 @@ Flex Panels 💪 +