diff --git a/.gitignore b/.gitignore index 6e1a3738b8..164ae8655c 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules/ *.log haters/ +.idea/ diff --git a/01 - JavaScript Drum Kit/background.jpg b/01 - JavaScript Drum Kit/background.jpg new file mode 100644 index 0000000000..590036d636 Binary files /dev/null and b/01 - JavaScript Drum Kit/background.jpg differ diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html index 1a16d0997c..ae9aacaf07 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/01 - JavaScript Drum Kit/sounds/tink.wav b/01 - JavaScript Drum Kit/sounds/tink.wav old mode 100755 new mode 100644 index f907ea2c0e..1f3c7b9191 Binary files a/01 - JavaScript Drum Kit/sounds/tink.wav and b/01 - JavaScript Drum Kit/sounds/tink.wav differ diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 3e0a320b37..bfdba84312 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,8 +1,9 @@ html { font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background: url('./background.jpg') bottom center; background-size: cover; } + body,html { margin: 0; padding: 0; @@ -10,41 +11,41 @@ body,html { } .keys { - display:flex; - flex:1; - min-height:100vh; + display: flex; + flex: 1; + min-height: 100vh; align-items: center; justify-content: center; } .key { - border:4px solid black; - border-radius:5px; - margin:1rem; + border: .4rem solid black; + border-radius: .5rem; + margin: 1rem; font-size: 1.5rem; - padding:1rem .5rem; - transition:all .07s; - width:100px; + padding: 1rem .5rem; + transition: all .07s ease; + width: 10rem; text-align: center; - color:white; - background:rgba(0,0,0,0.4); - text-shadow:0 0 5px black; + color: white; + background: rgba(0,0,0,0.4); + text-shadow: 0 0 .5rem black; } .playing { - transform:scale(1.1); - border-color:#ffc600; - box-shadow: 0 0 10px #ffc600; + transform: scale(1.1); + border-color: #ffc600; + box-shadow: 0 0 1rem #ffc600; } kbd { display: block; - font-size: 40px; + font-size: 4rem; } .sound { font-size: 1.2rem; text-transform: uppercase; - letter-spacing: 1px; - color:#ffc600; + letter-spacing: .1rem; + color: #ffc600; } diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html similarity index 75% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS and CSS Clock/index-FINISHED.html index db653a5340..87b91480ca 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS and CSS Clock/index-FINISHED.html @@ -3,6 +3,7 @@ JS + CSS Clock + @@ -18,17 +19,18 @@ diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html index c3217fc003..b52b9f61af 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -3,19 +3,20 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

- + - + - +
@@ -43,9 +44,6 @@

Update CSS Variables with JS

body { text-align: center; - } - - body { background: #193549; color: white; font-family: 'helvetica neue', sans-serif; @@ -58,7 +56,7 @@

Update CSS Variables with JS

} input { - width:100px; + width: 100px; } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..d5fcc3a2ae 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -3,19 +3,20 @@ Scoped CSS Variables and JS +

Update CSS Variables with JS

- + - + - +
@@ -28,9 +29,6 @@

Update CSS Variables with JS

body { text-align: center; - } - - body { background: #193549; color: white; font-family: 'helvetica neue', sans-serif; @@ -43,7 +41,7 @@

Update CSS Variables with JS

} input { - width:100px; + width: 100px; } diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html index ede883f1f9..10b655820a 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 ๐Ÿ’

@@ -27,7 +28,13 @@ { first: 'Hanna', last: 'Hammarstrรถm', year: 1829, passed: 1909 } ]; - const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; + const people = [ + 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig', + 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving', + 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano', + 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose', + 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank' + ]; // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 317883a4c1..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 ๐Ÿ’

@@ -27,19 +28,25 @@ { first: 'Hanna', last: 'Hammarstrรถm', year: 1829, passed: 1909 } ]; - const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William']; - + const people = [ + 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig', + 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving', + 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano', + 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose', + 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank' + ]; + // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's // Array.prototype.map() - // 2. Give us an array of the inventors' first and last names + // 2. Give us an array of the inventors first and last names // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest // Array.prototype.reduce() - // 4. How many years did all the inventors live? + // 4. How many years did all the inventors live all together? // 5. Sort the inventors by years lived diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html index 243f8a221d..85c33c1ee2 100644 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -4,35 +4,38 @@ Flex Panels ๐Ÿ’ช + diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index e1d643ad5c..88a4f1d1e2 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -4,34 +4,37 @@ Flex Panels ๐Ÿ’ช + diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html index 5902b43936..b11786cee7 100644 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -4,6 +4,7 @@ Type Ahead ๐Ÿ‘€ + diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..5a9aa7e4e8 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -4,6 +4,7 @@ Type Ahead ๐Ÿ‘€ + @@ -18,5 +19,5 @@ const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; - + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css index 36dc55f30e..0c8c74e01b 100644 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -1,87 +1,74 @@ - html { - box-sizing: border-box; - background:#ffc600; - font-family:'helvetica neue'; - font-size: 20px; - font-weight: 200; - } - *, *:before, *:after { - box-sizing: inherit; - } - input { - width: 100%; - padding:20px; - } +html { + box-sizing: border-box; + background: #ffc600; + font-family: 'helvetica neue'; + font-size: 20px; + font-weight: 200; +} - .search-form { - max-width:400px; - margin:50px auto; - } +*, *:before, *:after { + box-sizing: inherit; +} - input.search { - margin: 0; - text-align: center; - outline:0; - border: 10px solid #F7F7F7; - width: 120%; - left: -10%; - position: relative; - top: 10px; - z-index: 2; - border-radius: 5px; - font-size: 40px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); - } +input { + width: 100%; + padding: 20px; +} +.search-form { + max-width: 400px; + margin: 50px auto; +} - .suggestions { - margin: 0; - padding: 0; - position: relative; - /*perspective:20px;*/ - } - .suggestions li { - background:white; - list-style: none; - border-bottom: 1px solid #D8D8D8; - box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); - margin:0; - padding:20px; - transition:background 0.2s; - display:flex; - justify-content:space-between; - text-transform: capitalize; - } +input.search { + margin: 0; + text-align: center; + outline: 0; + border: 10px solid #F7F7F7; + width: 120%; + left: -10%; + position: relative; + top: 10px; + z-index: 2; + border-radius: 5px; + font-size: 40px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); +} - .suggestions li:nth-child(even) { - transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); - background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); - } - .suggestions li:nth-child(odd) { - transform: perspective(100px) rotateX(-3deg) translateY(3px); - background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); - } +.suggestions { + margin: 0; + padding: 0; + position: relative; + /*perspective: 20px;*/ +} - span.population { - font-size: 15px; - } +.suggestions li { + background: white; + list-style: none; + border-bottom: 1px solid #D8D8D8; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); + margin: 0; + padding: 20px; + transition: background 0.2s; + display: flex; + justify-content: space-between; + text-transform: capitalize; +} +.suggestions li:nth-child(even) { + transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); + background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); +} - .details { - text-align: center; - font-size: 15px; - } +.suggestions li:nth-child(odd) { + transform: perspective(100px) rotateX(-3deg) translateY(3px); + background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); +} - .hl { - background:#ffc600; - } +span.population { + font-size: 15px; +} - .love { - text-align: center; - } - - a { - color:black; - background:rgba(0,0,0,0.1); - text-decoration: none; - } +.hl { + background: #ffc600; +} diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html index c8e5b25d3b..0d99beba99 100644 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index-FINISHED.html @@ -3,6 +3,7 @@ Array Cardio ๐Ÿ’ช๐Ÿ’ช +

Psst: have a look at the JavaScript Console ๐Ÿ’

@@ -13,7 +14,7 @@ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, - { name: 'Lux', year: 2015 }, + { name: 'Lux', year: 2015 } ]; const comments = [ diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index 969566ff78..4ca34c7536 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -3,6 +3,7 @@ Array Cardio ๐Ÿ’ช๐Ÿ’ช +

Psst: have a look at the JavaScript Console ๐Ÿ’

diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html index 0791e17d0d..7d2c933c61 100644 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ b/08 - Fun with HTML5 Canvas/index-FINISHED.html @@ -3,6 +3,7 @@ HTML5 Canvas + @@ -65,7 +66,7 @@ diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html index 37c148df07..f70ad2059b 100644 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -3,6 +3,7 @@ HTML5 Canvas + @@ -11,7 +12,7 @@ diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html index 55cd3a2f42..0fdf53baf2 100644 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ b/09 - Dev Tools Domination/index-FINISHED.html @@ -3,6 +3,7 @@ Console Tricks! + diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html index 196fffd719..c061d01cda 100644 --- a/09 - Dev Tools Domination/index-START.html +++ b/09 - Dev Tools Domination/index-START.html @@ -3,6 +3,7 @@ Console Tricks! + diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html index 3ce296cc4b..0ee3162ae2 100644 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html @@ -2,66 +2,60 @@ - Document + Hold Shift to Check Multiple Checkboxes +
@@ -83,11 +77,11 @@
-

Everything inbetween should also be set to checked

+

Everything in between should also be set to checked

-

Try do it with out any libraries

+

Try do it without any libraries

@@ -119,7 +113,7 @@ console.log(checkbox); if (checkbox === this || checkbox === lastChecked) { inBetween = !inBetween; - console.log('STarting to check them inbetween!'); + console.log('Starting to check them in between!'); } if (inBetween) { diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed310bb..25df6ad31e 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -2,61 +2,54 @@ - Document + Hold Shift to Check Multiple Checkboxes + diff --git a/readme.md b/readme.md index 5a1eaa18c8..584068db0e 100644 --- a/readme.md +++ b/readme.md @@ -1,17 +1,80 @@ -![](https://javascript30.com/images/JS3-social-share.png) +๏ปฟ![](https://javascript30.com/images/JS3-social-share.png) # JavaScript30 -Starter Files + Completed solutions for the JavaScript 30 Day Challenge. +Starter Files + Completed solutions for the JavaScript 30 Day Challenge. Grab the course at [https://JavaScript30.com](https://JavaScript30.com) -Text-based guides (unofficial) for the challenges can be found here - [Text Guides](https://github.com/nitishdayal/JavaScript30). +## Community #JavaScript30 Content -## Pull Requests +Feel free to submit a PR by adding a link to your own recaps, guides, or reviews! -These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. +* [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)ๅŒ…ๅซไบ†่ฟ‡็จ‹่ฎฐๅฝ•ๅ’Œ้šพ็‚น่งฃ้‡Š +* [Aaron็š„่ฏญ้›€ๅญฆไน ๅฐ็ป„](https://github.com/A-aronYang/JavaScript30)ๅŒ…ๅซไธญๆ–‡ๆ–‡ๆกฃ๏ผŒๆกˆไพ‹ๅ’Œ็›ธๅ…ณ่ต„ๆ–™ +* [ไน”ๆœจ ๅฝ•ๅˆถ็š„่ฎฒ่งฃ่ง†้ข‘](https://b23.tv/pSa7rdu) ็œ‹ไธญๆ–‡่ฎฒ่งฃ่ง†้ข‘ไธ€่ตทๅญฆไน  Javascript30 ๅง! Javascript30 ไธญ CSS/JS/HTML ่ง†้ข‘่ฎฒ่งฃ +* [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 lesson notes with things I've learned, and those important recaps. and directly view my demos [here](https://amelieyeh.github.io/JS30/) ๐Ÿ‡น๐Ÿ‡ผ๐Ÿ˜„ +* [Winar](https://github.com/winar-jin/JavaScript30-Challenge)็š„JavaScript30ๅคฉๆŒ‘ๆˆ˜๏ผŒ่ฎฐๅฝ•็ปƒไน ่ฟ‡็จ‹๏ผŒ้‡้šพ็‚นๅ’Œๅ…ถไป–็š„่งฃๅ†ณๆ–นๆกˆใ€‚๐ŸŽจ +* [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). +* [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 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/). +* [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. +* [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 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/). +* [Mikhail Thomas](https://github.com/seckela) created [JS30++](https://github.com/seckela/js30plusplus) to add another level of challenge on top of this already great course. +* [Ramon Morcillo](https://github.com/reymon359/JavaScript30) finished this awesome challenge!. You can see the showcase of his implementations on [this link](https://reymon359.github.io/JavaScript30/). +* [Santiago Escobar](https://github.com/sescobar99)'s [repository](https://github.com/sescobar99/javascript30-challenge) and [GitHub Pages showcase](https://sescobar99.github.io/javascript30-challenge/). +* [Harry Xie](https://github.com/a90100/JavaScript30) ็ด€้Œ„ 30 ๅคฉ็š„็ทด็ฟ’็ญ†่จ˜ๅœจ [ๆญค้€ฃ็ต](https://github.com/a90100/JavaScript30). +* [ Van Ribeiro's ](https://vanribeiro-30daysofjavascript.netlify.app/) about demos and recaps. On [GitHub Repo](https://github.com/vanribeiro/30days-Of-JavaScript) there's a summary about what was learned and researched. +* [Mugilan](https://github.com/Mugilan-Codes) is currently doing this challenge. Check out his [Repo](https://github.com/Mugilan-Codes/javascript-30) and the [Live Demo](https://mugilan-codes.github.io/javascript-30/). +* [Eshan Vohra](https://github.com/eshanvohra) is currently doing this challenge. Check out my repo [here](https://github.com/eshanvohra/JavaScript30). +* [RegusAl](https://github.com/RegusAl) is currently doing this challenge. Check out my repo [here](https://github.com/RegusAl/JavaScript30). +* [Ayush Gupta's](https://javascript30.ayushgupta.tech/) implementation of JavaScript30 challenge with some add-ons & updated design. +* [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. ๐Ÿ‡น๐Ÿ‡ผ ๐ŸŒŸ +* [Issam Seghir](https://issam-seghir.github.io/JavaScript30/) added custom solutions and styles ๐Ÿง, improved performance, including fixed bugs/issus ๐Ÿ’ข. , added articles for each exercise ๐Ÿ“. -The starter files + solutions will be updated if/when the videos are updated. +## 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. +* [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. +* [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/). +* [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 + +These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos. + +The starter files + solutions will be updated if/when the videos are updated. Thanks!