diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index a18f2bc2ca..8b4fd26880 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -63,7 +63,7 @@ function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); - if (!audio) return; // stop the fucntion from running all together + if (!audio) return; // stop the function from running altogether audio.currentTime = 0; // rewind to the start audio.play(); key.classList.add('playing'); diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html index 36c420f534..db653a5340 100644 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-FINISHED.html @@ -2,7 +2,7 @@ - Document + JS + CSS Clock @@ -42,7 +42,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); @@ -84,13 +84,15 @@ const minsDegrees = ((mins / 60) * 360) + 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) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; } setInterval(setDate, 1000); + setDate(); + diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 259280d228..2712384201 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -2,7 +2,7 @@ - Document + JS + CSS Clock @@ -42,7 +42,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); diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html deleted file mode 100644 index 36c420f534..0000000000 --- a/02 - JS + CSS Clock/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - Document - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html index 9401d7b339..c3217fc003 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -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 index bf0f33e3ba..7171607a8b 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -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 index 80006d3f8b..e61b94c006 100644 --- 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/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html index 02264aa8fa..55cd3a2f42 100644 --- 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/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index 41fea5522c..c07581c1c0 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -107,13 +107,13 @@ input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); background: rgba(255,255,255,0.8); border-radius: 1.3px; border: 0.2px solid rgba(1, 1, 1, 0); } input[type=range]::-webkit-slider-thumb { - box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); height: 15px; width: 15px; border-radius: 50px; @@ -130,13 +130,13 @@ input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; - box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0); + box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0); background: #ffffff; border-radius: 1.3px; border: 0.2px solid rgba(1, 1, 1, 0); } input[type=range]::-moz-range-thumb { - box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(13, 13, 13, 0); + box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0); height: 15px; width: 15px; border-radius: 50px; diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index bbaf0b6f22..12591bad30 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -56,7 +56,7 @@

Slide in on Scroll

timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; - }; + } const sliderImages = document.querySelectorAll('.slide-in'); diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14 - JavaScript References VS Copying/index-FINISHED.html index 20f0732c4e..be6d1b7646 100644 --- a/14 - JavaScript References VS Copying/index-FINISHED.html +++ b/14 - JavaScript References VS Copying/index-FINISHED.html @@ -51,7 +51,7 @@ team4[3] = 'heeee hawww'; console.log(team4); - const team5 = Array.from(players) + const team5 = Array.from(players); // now when we update it, the original one isn't changed diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css index 3514871ab3..ea5bab179c 100644 --- a/15 - LocalStorage/style.css +++ b/15 - LocalStorage/style.css @@ -7,7 +7,6 @@ display:flex; justify-content: center; align-items: center; - font-family: sans-serif; text-align: center; font-family: Futura,"Trebuchet MS",Arial,sans-serif } diff --git a/16 - Mouse Move Shadow/index-finished.html b/16 - Mouse Move Shadow/index-finished.html new file mode 100644 index 0000000000..4328eaf6ab --- /dev/null +++ b/16 - Mouse Move Shadow/index-finished.html @@ -0,0 +1,63 @@ + + + + + Mouse Shadow + + + +
+

🔥WOAH!

+
+ + + + + + diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html index 4328eaf6ab..58a9bba861 100644 --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -24,7 +24,6 @@

🔥WOAH!

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

🔥WOAH!

diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index-FINISHED.html index e1932f41ac..413c3eeaaf 100644 --- a/20 - Speech Detection/index-FINISHED.html +++ b/20 - Speech Detection/index-FINISHED.html @@ -23,7 +23,7 @@ const transcript = Array.from(e.results) .map(result => result[0]) .map(result => result.transcript) - .join('') + .join(''); const poopScript = transcript.replace(/poop|poo|shit|dump/gi, '💩'); p.textContent = poopScript; diff --git a/22 - Follow Along Link Highlighter/style.css b/22 - Follow Along Link Highlighter/style.css index e1c51e8c12..222e27ae68 100644 --- 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/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index 4982537eea..e7bc67e9a5 100644 --- 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-START.css b/24 - Sticky Nav/style-START.css index 19961112b4..c6d59a31b3 100644 --- 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/26 - Stripe Follow Along Nav/index-FINISHED.html b/26 - Stripe Follow Along Nav/index-FINISHED.html index 90a50b971c..9cf05f388d 100644 --- a/26 - Stripe Follow Along Nav/index-FINISHED.html +++ b/26 - Stripe Follow Along Nav/index-FINISHED.html @@ -225,7 +225,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/28 - Video Speed Controller/style.css b/28 - Video Speed Controller/style.css index 0d7a2b0acb..c837d991e4 100644 --- a/28 - Video Speed Controller/style.css +++ b/28 - Video Speed Controller/style.css @@ -27,7 +27,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 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 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 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 similarity index 100% rename from 29 - Countown Timer/style.css rename to 29 - Countdown Timer/style.css diff --git a/readme.md b/readme.md index 873f3242f4..5a1eaa18c8 100644 --- a/readme.md +++ b/readme.md @@ -5,3 +5,13 @@ 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). + +## 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!