+
+
+
+
diff --git a/03 - CSS Variables/index-FINISHED.html b/03_css_variables/index-FINISHED.html
similarity index 100%
rename from 03 - CSS Variables/index-FINISHED.html
rename to 03_css_variables/index-FINISHED.html
diff --git a/03 - CSS Variables/index-START.html b/03_css_variables/index-START.html
similarity index 98%
rename from 03 - CSS Variables/index-START.html
rename to 03_css_variables/index-START.html
index ca2b59d077..1f94376120 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03_css_variables/index-START.html
@@ -43,7 +43,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
similarity index 100%
rename from 04 - Array Cardio Day 1/index-FINISHED.html
rename to 04_array_cardio_day_1/index-FINISHED.html
diff --git a/04 - Array Cardio Day 1/index-START.html b/04_array_cardio_day_1/index-START.html
similarity index 100%
rename from 04 - Array Cardio Day 1/index-START.html
rename to 04_array_cardio_day_1/index-START.html
diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05_flex_panel_gallery/index-FINISHED.html
similarity index 100%
rename from 05 - Flex Panel Gallery/index-FINISHED.html
rename to 05_flex_panel_gallery/index-FINISHED.html
diff --git a/05 - Flex Panel Gallery/index-START.html b/05_flex_panel_gallery/index-START.html
similarity index 100%
rename from 05 - Flex Panel Gallery/index-START.html
rename to 05_flex_panel_gallery/index-START.html
diff --git a/06 - Type Ahead/index-FINISHED.html b/06_type_ahead/index-FINISHED.html
similarity index 100%
rename from 06 - Type Ahead/index-FINISHED.html
rename to 06_type_ahead/index-FINISHED.html
diff --git a/06 - Type Ahead/index-START.html b/06_type_ahead/index-START.html
similarity index 100%
rename from 06 - Type Ahead/index-START.html
rename to 06_type_ahead/index-START.html
diff --git a/06 - Type Ahead/style.css b/06_type_ahead/style.css
similarity index 100%
rename from 06 - Type Ahead/style.css
rename to 06_type_ahead/style.css
diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07_array_cardio_day_2/index-FINISHED.html
similarity index 100%
rename from 07 - Array Cardio Day 2/index-FINISHED.html
rename to 07_array_cardio_day_2/index-FINISHED.html
diff --git a/07 - Array Cardio Day 2/index-START.html b/07_array_cardio_day_2/index-START.html
similarity index 100%
rename from 07 - Array Cardio Day 2/index-START.html
rename to 07_array_cardio_day_2/index-START.html
diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08_fun_with_html5_canvas/index-FINISHED.html
similarity index 100%
rename from 08 - Fun with HTML5 Canvas/index-FINISHED.html
rename to 08_fun_with_html5_canvas/index-FINISHED.html
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08_fun_with_html5_canvas/index-START.html
similarity index 100%
rename from 08 - Fun with HTML5 Canvas/index-START.html
rename to 08_fun_with_html5_canvas/index-START.html
diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09_dev_tools_domination/index-FINISHED.html
similarity index 100%
rename from 09 - Dev Tools Domination/index-FINISHED.html
rename to 09_dev_tools_domination/index-FINISHED.html
diff --git a/09 - Dev Tools Domination/index-START.html b/09_dev_tools_domination/index-START.html
similarity index 100%
rename from 09 - Dev Tools Domination/index-START.html
rename to 09_dev_tools_domination/index-START.html
diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10_hold_shift_and_check_checkboxes/index-FINISHED.html
similarity index 100%
rename from 10 - Hold Shift and Check Checkboxes/index-FINISHED.html
rename to 10_hold_shift_and_check_checkboxes/index-FINISHED.html
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10_hold_shift_and_check_checkboxes/index-START.html
similarity index 100%
rename from 10 - Hold Shift and Check Checkboxes/index-START.html
rename to 10_hold_shift_and_check_checkboxes/index-START.html
diff --git a/11 - Custom Video Player/index.html b/11_custom_video_player/index.html
similarity index 100%
rename from 11 - Custom Video Player/index.html
rename to 11_custom_video_player/index.html
diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11_custom_video_player/scripts-FINISHED.js
similarity index 100%
rename from 11 - Custom Video Player/scripts-FINISHED.js
rename to 11_custom_video_player/scripts-FINISHED.js
diff --git a/11 - Custom Video Player/scripts.js b/11_custom_video_player/scripts.js
similarity index 100%
rename from 11 - Custom Video Player/scripts.js
rename to 11_custom_video_player/scripts.js
diff --git a/11 - Custom Video Player/style.css b/11_custom_video_player/style.css
similarity index 100%
rename from 11 - Custom Video Player/style.css
rename to 11_custom_video_player/style.css
diff --git a/12 - Key Sequence Detection/index-FINISHED.html b/12_key_sequence_detection/index-FINISHED.html
similarity index 100%
rename from 12 - Key Sequence Detection/index-FINISHED.html
rename to 12_key_sequence_detection/index-FINISHED.html
diff --git a/12 - Key Sequence Detection/index-START.html b/12_key_sequence_detection/index-START.html
similarity index 100%
rename from 12 - Key Sequence Detection/index-START.html
rename to 12_key_sequence_detection/index-START.html
diff --git a/13 - Slide in on Scroll/index-FINISHED.html b/13_slide_in_on_scroll/index-FINISHED.html
similarity index 100%
rename from 13 - Slide in on Scroll/index-FINISHED.html
rename to 13_slide_in_on_scroll/index-FINISHED.html
diff --git a/13 - Slide in on Scroll/index-START.html b/13_slide_in_on_scroll/index-START.html
similarity index 100%
rename from 13 - Slide in on Scroll/index-START.html
rename to 13_slide_in_on_scroll/index-START.html
diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14_javascript_references_vs_copying/index-FINISHED.html
similarity index 100%
rename from 14 - JavaScript References VS Copying/index-FINISHED.html
rename to 14_javascript_references_vs_copying/index-FINISHED.html
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14_javascript_references_vs_copying/index-START.html
similarity index 100%
rename from 14 - JavaScript References VS Copying/index-START.html
rename to 14_javascript_references_vs_copying/index-START.html
diff --git a/15 - LocalStorage/index-FINISHED.html b/15_localstorage/index-FINISHED.html
similarity index 100%
rename from 15 - LocalStorage/index-FINISHED.html
rename to 15_localstorage/index-FINISHED.html
diff --git a/15 - LocalStorage/index-START.html b/15_localstorage/index-START.html
similarity index 100%
rename from 15 - LocalStorage/index-START.html
rename to 15_localstorage/index-START.html
diff --git a/15 - LocalStorage/style.css b/15_localstorage/style.css
similarity index 100%
rename from 15 - LocalStorage/style.css
rename to 15_localstorage/style.css
diff --git a/16 - Mouse Move Shadow/index-finished.html b/16_mouse_move_shadow/index-finished.html
similarity index 100%
rename from 16 - Mouse Move Shadow/index-finished.html
rename to 16_mouse_move_shadow/index-finished.html
diff --git a/16 - Mouse Move Shadow/index-start.html b/16_mouse_move_shadow/index-start.html
similarity index 100%
rename from 16 - Mouse Move Shadow/index-start.html
rename to 16_mouse_move_shadow/index-start.html
diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17_sort_without_articles/index-FINISHED.html
similarity index 100%
rename from 17 - Sort Without Articles/index-FINISHED.html
rename to 17_sort_without_articles/index-FINISHED.html
diff --git a/17 - Sort Without Articles/index-START.html b/17_sort_without_articles/index-START.html
similarity index 100%
rename from 17 - Sort Without Articles/index-START.html
rename to 17_sort_without_articles/index-START.html
diff --git a/18 - Adding Up Times with Reduce/index-FINISHED.html b/18_adding_up_times_with_reduce/index-FINISHED.html
similarity index 100%
rename from 18 - Adding Up Times with Reduce/index-FINISHED.html
rename to 18_adding_up_times_with_reduce/index-FINISHED.html
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18_adding_up_times_with_reduce/index-START.html
similarity index 100%
rename from 18 - Adding Up Times with Reduce/index-START.html
rename to 18_adding_up_times_with_reduce/index-START.html
diff --git a/19 - Webcam Fun/index.html b/19_webcam_fun/index.html
similarity index 100%
rename from 19 - Webcam Fun/index.html
rename to 19_webcam_fun/index.html
diff --git a/19 - Webcam Fun/package.json b/19_webcam_fun/package.json
similarity index 100%
rename from 19 - Webcam Fun/package.json
rename to 19_webcam_fun/package.json
diff --git a/19 - Webcam Fun/scripts-FINISHED.js b/19_webcam_fun/scripts-FINISHED.js
similarity index 100%
rename from 19 - Webcam Fun/scripts-FINISHED.js
rename to 19_webcam_fun/scripts-FINISHED.js
diff --git a/19 - Webcam Fun/scripts.js b/19_webcam_fun/scripts.js
similarity index 100%
rename from 19 - Webcam Fun/scripts.js
rename to 19_webcam_fun/scripts.js
diff --git a/19 - Webcam Fun/style.css b/19_webcam_fun/style.css
similarity index 100%
rename from 19 - Webcam Fun/style.css
rename to 19_webcam_fun/style.css
diff --git a/20 - Speech Detection/index-FINISHED.html b/20_speech_detection/index-FINISHED.html
similarity index 100%
rename from 20 - Speech Detection/index-FINISHED.html
rename to 20_speech_detection/index-FINISHED.html
diff --git a/20 - Speech Detection/index-START.html b/20_speech_detection/index-START.html
similarity index 100%
rename from 20 - Speech Detection/index-START.html
rename to 20_speech_detection/index-START.html
diff --git a/20 - Speech Detection/package.json b/20_speech_detection/package.json
similarity index 100%
rename from 20 - Speech Detection/package.json
rename to 20_speech_detection/package.json
diff --git a/21 - Geolocation/index-FINISHED.html b/21_geolocation/index-FINISHED.html
similarity index 100%
rename from 21 - Geolocation/index-FINISHED.html
rename to 21_geolocation/index-FINISHED.html
diff --git a/21 - Geolocation/index-START.html b/21_geolocation/index-START.html
similarity index 100%
rename from 21 - Geolocation/index-START.html
rename to 21_geolocation/index-START.html
diff --git a/21 - Geolocation/package.json b/21_geolocation/package.json
similarity index 100%
rename from 21 - Geolocation/package.json
rename to 21_geolocation/package.json
diff --git a/22 - Follow Along Link Highlighter/index-FINISHED.html b/22_follow_along_link_highlighter/index-FINISHED.html
similarity index 100%
rename from 22 - Follow Along Link Highlighter/index-FINISHED.html
rename to 22_follow_along_link_highlighter/index-FINISHED.html
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22_follow_along_link_highlighter/index-START.html
similarity index 100%
rename from 22 - Follow Along Link Highlighter/index-START.html
rename to 22_follow_along_link_highlighter/index-START.html
diff --git a/22 - Follow Along Link Highlighter/style.css b/22_follow_along_link_highlighter/style.css
similarity index 100%
rename from 22 - Follow Along Link Highlighter/style.css
rename to 22_follow_along_link_highlighter/style.css
diff --git a/23 - Speech Synthesis/index-FINISHED.html b/23_speech_synthesis/index-FINISHED.html
similarity index 100%
rename from 23 - Speech Synthesis/index-FINISHED.html
rename to 23_speech_synthesis/index-FINISHED.html
diff --git a/23 - Speech Synthesis/index-START.html b/23_speech_synthesis/index-START.html
similarity index 100%
rename from 23 - Speech Synthesis/index-START.html
rename to 23_speech_synthesis/index-START.html
diff --git a/23 - Speech Synthesis/style.css b/23_speech_synthesis/style.css
similarity index 100%
rename from 23 - Speech Synthesis/style.css
rename to 23_speech_synthesis/style.css
diff --git a/24 - Sticky Nav/index-FINISHED.html b/24_sticky_nav/index-FINISHED.html
similarity index 100%
rename from 24 - Sticky Nav/index-FINISHED.html
rename to 24_sticky_nav/index-FINISHED.html
diff --git a/24 - Sticky Nav/index-START.html b/24_sticky_nav/index-START.html
similarity index 100%
rename from 24 - Sticky Nav/index-START.html
rename to 24_sticky_nav/index-START.html
diff --git a/24 - Sticky Nav/style-FINISHED.css b/24_sticky_nav/style-FINISHED.css
similarity index 100%
rename from 24 - Sticky Nav/style-FINISHED.css
rename to 24_sticky_nav/style-FINISHED.css
diff --git a/24 - Sticky Nav/style-START.css b/24_sticky_nav/style-START.css
similarity index 100%
rename from 24 - Sticky Nav/style-START.css
rename to 24_sticky_nav/style-START.css
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html b/25_event_capture_propagation_bubbling_and_once/index-FINISHED.html
similarity index 100%
rename from 25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html
rename to 25_event_capture_propagation_bubbling_and_once/index-FINISHED.html
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25_event_capture_propagation_bubbling_and_once/index-START.html
similarity index 100%
rename from 25 - Event Capture, Propagation, Bubbling and Once/index-START.html
rename to 25_event_capture_propagation_bubbling_and_once/index-START.html
diff --git a/26 - Stripe Follow Along Nav/index-FINISHED.html b/26_stripe_follow_along_nav/index-FINISHED.html
similarity index 100%
rename from 26 - Stripe Follow Along Nav/index-FINISHED.html
rename to 26_stripe_follow_along_nav/index-FINISHED.html
diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26_stripe_follow_along_nav/index-START.html
similarity index 100%
rename from 26 - Stripe Follow Along Nav/index-START.html
rename to 26_stripe_follow_along_nav/index-START.html
diff --git a/27 - Click and Drag/index-FINISHED.html b/27_click_and_drag/index-FINISHED.html
similarity index 100%
rename from 27 - Click and Drag/index-FINISHED.html
rename to 27_click_and_drag/index-FINISHED.html
diff --git a/27 - Click and Drag/index-START.html b/27_click_and_drag/index-START.html
similarity index 100%
rename from 27 - Click and Drag/index-START.html
rename to 27_click_and_drag/index-START.html
diff --git a/27 - Click and Drag/style.css b/27_click_and_drag/style.css
similarity index 100%
rename from 27 - Click and Drag/style.css
rename to 27_click_and_drag/style.css
diff --git a/28 - Video Speed Controller/index-FINISHED.html b/28_video_speed_controller/index-FINISHED.html
similarity index 100%
rename from 28 - Video Speed Controller/index-FINISHED.html
rename to 28_video_speed_controller/index-FINISHED.html
diff --git a/28 - Video Speed Controller/index-START.html b/28_video_speed_controller/index-START.html
similarity index 100%
rename from 28 - Video Speed Controller/index-START.html
rename to 28_video_speed_controller/index-START.html
diff --git a/28 - Video Speed Controller/style.css b/28_video_speed_controller/style.css
similarity index 100%
rename from 28 - Video Speed Controller/style.css
rename to 28_video_speed_controller/style.css
diff --git a/29_countown_timer/index.html b/29_countown_timer/index.html
new file mode 100644
index 0000000000..d54f447dd9
--- /dev/null
+++ b/29_countown_timer/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+ Countdown Timer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/29_countown_timer/scripts-FINISHED.js b/29_countown_timer/scripts-FINISHED.js
new file mode 100644
index 0000000000..581cadb270
--- /dev/null
+++ b/29_countown_timer/scripts-FINISHED.js
@@ -0,0 +1,55 @@
+let countdown;
+const timerDisplay = document.querySelector('.display__time-left');
+const endTime = document.querySelector('.display__end-time');
+const buttons = document.querySelectorAll('[data-time]');
+
+function timer(seconds) {
+ // clear any existing timers
+ clearInterval(countdown);
+
+ const now = Date.now();
+ const then = now + seconds * 1000;
+ displayTimeLeft(seconds);
+ displayEndTime(then);
+
+ countdown = setInterval(() => {
+ const secondsLeft = Math.round((then - Date.now()) / 1000);
+ // check if we should stop it!
+ if(secondsLeft < 0) {
+ clearInterval(countdown);
+ return;
+ }
+ // display it
+ displayTimeLeft(secondsLeft);
+ }, 1000);
+}
+
+function displayTimeLeft(seconds) {
+ const minutes = Math.floor(seconds / 60);
+ const remainderSeconds = seconds % 60;
+ const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`;
+ document.title = display;
+ timerDisplay.textContent = display;
+}
+
+function displayEndTime(timestamp) {
+ const end = new Date(timestamp);
+ const hour = end.getHours();
+ const adjustedHour = hour > 12 ? hour - 12 : hour;
+ const minutes = end.getMinutes();
+ endTime.textContent = `Be Back At ${adjustedHour}:${minutes < 10 ? '0' : ''}${minutes}`;
+}
+
+function startTimer() {
+ const seconds = parseInt(this.dataset.time);
+ timer(seconds);
+}
+
+buttons.forEach(button => button.addEventListener('click', startTimer));
+document.customForm.addEventListener('submit', function(e) {
+ e.preventDefault();
+ const mins = this.minutes.value;
+ console.log(mins);
+ timer(mins * 60);
+ this.reset();
+});
diff --git a/29_countown_timer/scripts-START.js b/29_countown_timer/scripts-START.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/29_countown_timer/style.css b/29_countown_timer/style.css
new file mode 100644
index 0000000000..f240799477
--- /dev/null
+++ b/29_countown_timer/style.css
@@ -0,0 +1,82 @@
+html {
+ box-sizing: border-box;
+ font-size: 10px;
+ background: #8E24AA;
+ background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%);
+}
+
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+body {
+ margin:0;
+ text-align: center;
+ font-family: 'Inconsolata', monospace;
+}
+
+.display__time-left {
+ font-weight: 100;
+ font-size: 20rem;
+ margin: 0;
+ color:white;
+ text-shadow:4px 4px 0 rgba(0,0,0,0.05);
+}
+
+.timer {
+ display:flex;
+ min-height: 100vh;
+ flex-direction:column;
+}
+
+.timer__controls {
+ display: flex;
+}
+
+.timer__controls > * {
+ flex:1;
+}
+
+.timer__controls form {
+ flex:1;
+ display:flex;
+}
+
+.timer__controls input {
+ flex:1;
+ border:0;
+ padding:2rem;
+}
+
+.timer__button {
+ background:none;
+ border:0;
+ cursor: pointer;
+ color:white;
+ font-size: 2rem;
+ text-transform: uppercase;
+ background:rgba(0,0,0,0.1);
+ border-bottom:3px solid rgba(0,0,0,0.2);
+ border-right:1px solid rgba(0,0,0,0.2);
+ padding:1rem;
+ font-family: 'Inconsolata', monospace;
+}
+
+.timer__button:hover,
+.timer__button:focus {
+ background:rgba(0,0,0,0.2);
+ outline:0;
+}
+
+.display {
+ flex:1;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.display__end-time {
+ font-size: 4rem;
+ color:white;
+}
diff --git a/30 - Whack A Mole/dirt.svg b/30_whack_a_mole/dirt.svg
similarity index 100%
rename from 30 - Whack A Mole/dirt.svg
rename to 30_whack_a_mole/dirt.svg
diff --git a/30 - Whack A Mole/index-FINISHED.html b/30_whack_a_mole/index-FINISHED.html
similarity index 100%
rename from 30 - Whack A Mole/index-FINISHED.html
rename to 30_whack_a_mole/index-FINISHED.html
diff --git a/30 - Whack A Mole/index-START.html b/30_whack_a_mole/index-START.html
similarity index 100%
rename from 30 - Whack A Mole/index-START.html
rename to 30_whack_a_mole/index-START.html
diff --git a/30 - Whack A Mole/mole.svg b/30_whack_a_mole/mole.svg
similarity index 100%
rename from 30 - Whack A Mole/mole.svg
rename to 30_whack_a_mole/mole.svg
diff --git a/30 - Whack A Mole/style.css b/30_whack_a_mole/style.css
similarity index 100%
rename from 30 - Whack A Mole/style.css
rename to 30_whack_a_mole/style.css
diff --git a/README.md b/README.md
new file mode 100644
index 0000000000..d4f569bb7b
--- /dev/null
+++ b/README.md
@@ -0,0 +1,6 @@
+# 30 Days of JavaScript
+
+My completed solutions for the (JavaScript 30 Day Challenge)[https://javascript30.com/].
+
+Somewhat based on the official solutions, but with a few tweaks here and there
+for optimization and for fun.
diff --git a/readme.md b/readme.md
deleted file mode 100644
index 5a1eaa18c8..0000000000
--- a/readme.md
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-# JavaScript30
-
-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!