diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html old mode 100644 new mode 100755 index 4070d32767..92cbe6b5de --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,23 @@ diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html deleted file mode 100644 index a18f2bc2ca..0000000000 --- a/01 - JavaScript Drum Kit/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride -
-
- J - snare -
-
- K - tom -
-
- L - tink -
-
- - - - - - - - - - - - - - - diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css old mode 100644 new mode 100755 index 3e0a320b37..075578c930 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -1,6 +1,6 @@ html { font-size: 10px; - background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center; + background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center; background-size: cover; } body,html { @@ -10,41 +10,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-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 259280d228..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - Document - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html old mode 100644 new mode 100755 similarity index 88% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS and CSS Clock/index-FINISHED.html index 36c420f534..37436ed1ca --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS and CSS Clock/index-FINISHED.html @@ -2,7 +2,7 @@ - Document + JS + CSS Clock @@ -26,6 +26,7 @@ } body { + margin: 0; font-size: 2rem; display:flex; flex:1; @@ -42,7 +43,7 @@ position: relative; padding:2rem; box-shadow: - 0 0 0px 4px rgba(0,0,0,0.1), + 0 0 0 4px rgba(0,0,0,0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); @@ -81,16 +82,18 @@ secondHand.style.transform = `rotate(${secondsDegrees}deg)`; const mins = now.getMinutes(); - const minsDegrees = ((mins / 60) * 360) + 90; + const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`; - const hour = now.getMinutes(); - const hourDegrees = ((mins / 12) * 360) + 90; + const hour = now.getHours(); + const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; } setInterval(setDate, 1000); + setDate(); + diff --git a/02 - JS + CSS Clock/index.html b/02 - JS and CSS Clock/index-START.html old mode 100644 new mode 100755 similarity index 98% rename from 02 - JS + CSS Clock/index.html rename to 02 - JS and CSS Clock/index-START.html index 36c420f534..43991416c1 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS and CSS Clock/index-START.html @@ -66,9 +66,9 @@ transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } - - + diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html old mode 100644 new mode 100755 index 9401d7b339..848a0f95f9 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -9,13 +9,13 @@

Update CSS Variables with JS

- + - + - +
@@ -57,11 +57,6 @@

Update CSS Variables with JS

margin-bottom: 50px; } - a { - color: var(--base); - text-decoration: none; - } - input { width:100px; } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html old mode 100644 new mode 100755 index bf0f33e3ba..ca2b59d077 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -9,13 +9,13 @@

Update CSS Variables with JS

- + - + - +
@@ -42,11 +42,6 @@

Update CSS Variables with JS

margin-bottom: 50px; } - a { - color: var(--base); - text-decoration: none; - } - input { width:100px; } diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html old mode 100644 new mode 100755 index 80006d3f8b..ede883f1f9 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -5,6 +5,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 old mode 100644 new mode 100755 index adb9060f5f..243f8a221d --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -44,7 +44,6 @@ background-position:center; flex: 1; justify-content: center; - align-items: center; display: flex; flex-direction: column; } diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html old mode 100644 new mode 100755 index e1d643ad5c..308f87b2a3 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,7 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; } diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html old mode 100644 new mode 100755 index 53c36248b0..5902b43936 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -20,7 +20,7 @@ const cities = []; fetch(endpoint) .then(blob => blob.json()) - .then(data => cities.push(...data)) + .then(data => cities.push(...data)); function findMatches(wordToMatch, cities) { return cities.filter(place => { diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html old mode 100644 new mode 100755 index 1436886918..4bbe23c367 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -15,8 +15,40 @@ - + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css old mode 100644 new mode 100755 index 155164bae9..36dc55f30e --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -22,7 +22,6 @@ margin: 0; text-align: center; outline:0; - border:0; border: 10px solid #F7F7F7; width: 120%; left: -10%; diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html old mode 100644 new mode 100755 index e39d35f79a..c8e5b25d3b --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index-FINISHED.html @@ -2,9 +2,10 @@ - Document + 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 old mode 100644 new mode 100755 diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html old mode 100644 new mode 100755 diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html old mode 100644 new mode 100755 index 02264aa8fa..55cd3a2f42 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ b/09 - Dev Tools Domination/index-FINISHED.html @@ -21,7 +21,7 @@ console.log('hello'); // Interpolated - console.log('Hello I am a %s string!', '๐Ÿ’ฉ') + console.log('Hello I am a %s string!', '๐Ÿ’ฉ'); // Styled // console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue') diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html old mode 100644 new mode 100755 diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html old mode 100644 new mode 100755 index 3ce296cc4b..2b5d39a52c --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html @@ -2,7 +2,7 @@ - Document + Hold Shift to Check Multiple Checkboxes + + + + diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html old mode 100644 new mode 100755 index 4328eaf6ab..543cb51eab --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -16,6 +16,10 @@

๐Ÿ”ฅWOAH!

font-family: sans-serif; } + body { + margin: 0; + } + .hero { min-height: 100vh; display:flex; @@ -24,7 +28,6 @@

๐Ÿ”ฅWOAH!

color:black; } - h1 { text-shadow: 10px 10px 0 rgba(0,0,0,1); font-size: 100px; @@ -32,32 +35,6 @@

๐Ÿ”ฅWOAH!

diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index-FINISHED.html old mode 100644 new mode 100755 index 5de851cbbd..4208fb5b18 --- a/17 - Sort Without Articles/index-FINISHED.html +++ b/17 - Sort Without Articles/index-FINISHED.html @@ -8,6 +8,7 @@ diff --git a/22 - Follow Along Link Highlighter/index-FINISHED.html b/22 - Follow Along Link Highlighter/index-FINISHED.html old mode 100644 new mode 100755 index 74bd06e321..869d8dab94 --- a/22 - Follow Along Link Highlighter/index-FINISHED.html +++ b/22 - Follow Along Link Highlighter/index-FINISHED.html @@ -29,7 +29,7 @@ const triggers = document.querySelectorAll('a'); const highlight = document.createElement('span'); highlight.classList.add('highlight'); - document.body.append(highlight); + document.body.appendChild(highlight); function highlightLink() { const linkCoords = this.getBoundingClientRect(); diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html old mode 100644 new mode 100755 diff --git a/22 - Follow Along Link Highlighter/style.css b/22 - Follow Along Link Highlighter/style.css old mode 100644 new mode 100755 index e1c51e8c12..222e27ae68 --- a/22 - Follow Along Link Highlighter/style.css +++ b/22 - Follow Along Link Highlighter/style.css @@ -45,7 +45,6 @@ a { .menu { padding: 0; - margin: 0; display: flex; list-style: none; justify-content: center; diff --git a/23 - Speech Synthesis/index-FINISHED.html b/23 - Speech Synthesis/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html old mode 100644 new mode 100755 diff --git a/23 - Speech Synthesis/style.css b/23 - Speech Synthesis/style.css old mode 100644 new mode 100755 index 0e44fd0522..a7aaa3938b --- a/23 - Speech Synthesis/style.css +++ b/23 - Speech Synthesis/style.css @@ -8,6 +8,7 @@ html { } body { + margin: 0; padding: 0; font-family: sans-serif; background-color:#3BC1AC; @@ -39,10 +40,7 @@ body { h1 { width:calc(100% + 4rem); - margin: 0; - margin-left: -2rem; - margin-top: -2rem; - margin-bottom: 2rem; + margin: -2rem 0 2rem -2rem; padding:.5rem; background: #ffc600; border-bottom: 5px solid #F3C010; diff --git a/24 - Sticky Nav/index-FINISHED.html b/24 - Sticky Nav/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html old mode 100644 new mode 100755 index 4982537eea..e7bc67e9a5 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -54,20 +54,7 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-FINISHED.css b/24 - Sticky Nav/style-FINISHED.css old mode 100644 new mode 100755 diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css old mode 100644 new mode 100755 index 19961112b4..c6d59a31b3 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -23,10 +23,6 @@ body { transition: transform 0.5s; } -.fixed-nav .site-wrap { - transform: scale(1); -} - header { text-align: center; height:50vh; @@ -52,11 +48,6 @@ nav { z-index: 1; } -.fixed-nav nav { - position: fixed; - box-shadow: 0 5px rgba(0,0,0,0.1) -} - nav ul { margin: 0; padding:0; @@ -81,10 +72,6 @@ li.logo { font-size: 30px; } -.fixed-nav li.logo { - max-width:500px; -} - li.logo a { color:black; } diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html b/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html old mode 100644 new mode 100755 diff --git a/26 - Stripe Follow Along Nav/index-FINISHED.html b/26 - Stripe Follow Along Nav/index-FINISHED.html old mode 100644 new mode 100755 index 90a50b971c..9905df83e1 --- a/26 - Stripe Follow Along Nav/index-FINISHED.html +++ b/26 - Stripe Follow Along Nav/index-FINISHED.html @@ -75,6 +75,7 @@

Cool

box-sizing: inherit; } body { + margin: 0; min-height: 100vh; background: linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%), @@ -83,6 +84,11 @@

Cool

linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%); } + h2 { + margin-top: 0; + padding-top: .8em; + } + nav { position: relative; perspective: 600px; @@ -144,7 +150,7 @@

Cool

border-radius: 4px; box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1); transition:all 0.3s, opacity 0.1s, translate 0.2s; - transform-origin: 50% 0%; + transform-origin: 50% 0; display: flex; justify-content: center; opacity:0; @@ -225,7 +231,7 @@

Cool

height: dropdownCoords.height, width: dropdownCoords.width, top: dropdownCoords.top - navCoords.top, - left: dropdownCoords.left - navCoords.left, + left: dropdownCoords.left - navCoords.left }; background.style.setProperty('width', `${coords.width}px`); diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html old mode 100644 new mode 100755 index 9780d0d1ac..01b6d21e39 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -75,6 +75,7 @@

Cool

box-sizing: inherit; } body { + margin: 0; min-height: 100vh; background: linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%), @@ -83,6 +84,11 @@

Cool

linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%); } + h2 { + margin-top: 0; + padding-top: .8em; + } + nav { position: relative; perspective: 600px; @@ -144,7 +150,7 @@

Cool

border-radius: 4px; box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1); transition:all 0.3s, opacity 0.1s, translate 0.2s; - transform-origin: 50% 0%; + transform-origin: 50% 0; display: flex; justify-content: center; opacity:0; diff --git a/27 - Click and Drag/index-FINISHED.html b/27 - Click and Drag/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html old mode 100644 new mode 100755 diff --git a/27 - Click and Drag/style.css b/27 - Click and Drag/style.css old mode 100644 new mode 100755 index 209b32cae5..48a6ab6c6b --- a/27 - Click and Drag/style.css +++ b/27 - Click and Drag/style.css @@ -31,6 +31,7 @@ body { cursor: pointer; transition: all 0.2s; transform: scale(0.98); + will-change: transform; position: relative; background: rgba(255,255,255,0.1); font-size: 0; diff --git a/28 - Video Speed Controller/index-FINISHED.html b/28 - Video Speed Controller/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html old mode 100644 new mode 100755 diff --git a/28 - Video Speed Controller/style.css b/28 - Video Speed Controller/style.css old mode 100644 new mode 100755 index 0d7a2b0acb..dbd8b28a29 --- a/28 - Video Speed Controller/style.css +++ b/28 - Video Speed Controller/style.css @@ -1,4 +1,5 @@ body { + margin: 0; display:flex; justify-content: center; align-items: center; @@ -27,7 +28,6 @@ video { } .speed-bar { width:100%; - height:10px; background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%); text-shadow:1px 1px 0 rgba(0,0,0,0.2); display: flex; diff --git a/29 - Countown Timer/index.html b/29 - Countdown Timer/index.html old mode 100644 new mode 100755 similarity index 100% rename from 29 - Countown Timer/index.html rename to 29 - Countdown Timer/index.html diff --git a/29 - Countown Timer/scripts-FINISHED.js b/29 - Countdown Timer/scripts-FINISHED.js old mode 100644 new mode 100755 similarity index 100% rename from 29 - Countown Timer/scripts-FINISHED.js rename to 29 - Countdown Timer/scripts-FINISHED.js diff --git a/29 - Countown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js old mode 100644 new mode 100755 similarity index 100% rename from 29 - Countown Timer/scripts-START.js rename to 29 - Countdown Timer/scripts-START.js diff --git a/29 - Countown Timer/style.css b/29 - Countdown Timer/style.css old mode 100644 new mode 100755 similarity index 100% rename from 29 - Countown Timer/style.css rename to 29 - Countdown Timer/style.css diff --git a/30 - Whack A Mole/dirt.svg b/30 - Whack A Mole/dirt.svg old mode 100644 new mode 100755 diff --git a/30 - Whack A Mole/index-FINISHED.html b/30 - Whack A Mole/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html old mode 100644 new mode 100755 diff --git a/30 - Whack A Mole/mole.svg b/30 - Whack A Mole/mole.svg old mode 100644 new mode 100755 diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css old mode 100644 new mode 100755 diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md new file mode 100755 index 0000000000..fc1b0c6834 --- /dev/null +++ b/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,13 @@ +๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹ +๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹Hello Friend!๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹ +๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹๐Ÿ‘‹ + +Thanks for Submitting a pull request. Before you hit that button please make sure: + +These files are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things or fixed a small bug, that is great great, but I will be keeping them the same as the videos to avoid confusing. + +Spelling mistakes / CSS updates / other clarifications are welcome as long as they don't change what is shown in the videos. + +I encourage you to blog about your implementation and add the link to this repo - that way everyone can benefit from it. + + diff --git a/readme.md b/readme.md old mode 100644 new mode 100755 index 873f3242f4..8cb280be36 --- a/readme.md +++ b/readme.md @@ -2,6 +2,32 @@ # 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) + +## Community #JavaScript30 Content + +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 +* [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) +* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises +* [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/) ๐Ÿ‡น๐Ÿ‡ผ๐Ÿ˜„ + +## 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!