+
+
A
- clap
+ clap
-
+
S
- hihat
+ hihat
-
+
D
- kick
+ kick
-
+
F
- openhat
+ openhat
-
+
G
- boom
+ boom
-
+
H
- ride
+ ride
-
+
J
- snare
+ snare
-
+ JS + CSS Clock
-
K
- tom
+ tom
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html
index 2712384201..8d1b2f037f 100644
--- a/02 - JS + CSS Clock/index-START.html
+++ b/02 - JS + CSS Clock/index-START.html
@@ -1,17 +1,17 @@
-
+
-
+
L
- tink
+ tink
-
-
-
-
+ Scoped CSS Variables and JS
+
@@ -61,12 +61,42 @@
background:black;
position: absolute;
top:50%;
+ transform-origin: 100%; /* Allows rotation of hands to be in the middle */
+ transform: rotate(90deg); /* Allows hands to start at 12 o'clock */
+ transition: all 0.05s;
+ transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
+ /* Adds a tick like feature when hands move */
}
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..3e2d5d3209 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03 - CSS Variables/index-START.html
@@ -1,27 +1,43 @@
-
+
-
+
+
+
+
Update CSS Variables with JS
-
-
-
+ 
+
diff --git a/03 - CSS Variables/readme.md b/03 - CSS Variables/readme.md
new file mode 100644
index 0000000000..f0b9537ebe
--- /dev/null
+++ b/03 - CSS Variables/readme.md
@@ -0,0 +1,6 @@
+### CSS variables
+Using Javascript to play around with CSS variables to change an image
+
+##### Notes
+- **:root** will always select the document's top-most element in the document tree
+- **dataset** is an object with the various date attributes and their value
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..5308967ac2 100644
--- a/04 - Array Cardio Day 1/index-START.html
+++ b/04 - Array Cardio Day 1/index-START.html
@@ -33,29 +33,90 @@
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
+ const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
+ console.table(fifteen);
+ /***
+ SAME AS:
+ const fifteen = inventors.filter(function(inventor) {
+ if(inventor.year >= 1500 && inventor.year < 1600) {
+ return true;
+ }
+ });
+ ***/
// Array.prototype.map()
// 2. Give us an array of the inventors' first and last names
+ const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+ console.log(fullNames);
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
+ const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+ //ternary statement, if condition is true return 1 else return -1
+ console.table(ordered);
+ /***
+ SAME AS:
+ const ordered = inventors.sort(function(a, b) {
+ if(a.year > b.year) {
+ return 1;
+ } else {
+ return -1;
+ }
+ });
+ ***/
// Array.prototype.reduce()
// 4. How many years did all the inventors live?
+ const totalYears = inventors.reduce((total, inventor) => {
+ return total + (inventor.passed - inventor.year);
+ }, 0);
+ console.log(totalYears);
// 5. Sort the inventors by years lived
+ const oldest = inventors.sort((a, b) => {
+ const lastGuy = a.passed - a.year;
+ const nextGuy = b.passed - b.year;
+ return lastGuy > nextGuy ? 1 : -1;
+ });
+ console.table(oldest);
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
-
+ /**
+ // 1) Find DOM element and find what contains Boulevards
+ const category = document.querySelector('.mw-category');
+ // 2) Find links inside previous element and convert nodelist into an array
+ const links = Array.from(category.querySelectorAll('a'));
+ // OR ES6 const links = [...(category.querySelectorAll('a')];
+ // 3) Get the names of all the Boulevards with de
+ const de = links
+ .map(link => link.textContent)
+ .filter(streetName => streetName.includes('de'));
+ **/
// 7. sort Exercise
// Sort the people alphabetically by last name
+ const alpha = people.sort((lastOne, nextOne) => {
+ const [aLast, aFirst] = lastOne.split(', ');
+ const [bLast, bFirst] = nextOne.split(', ');
+ return aLast > bLast ? 1 : -1;
+ });
+ console.log(alpha);
// 8. Reduce Exercise
// Sum up the instances of each of these
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+ const transportation = data.reduce((obj, item) => {
+ //first check if item exists, if not, create it in obj, set it to 0, and then increment
+ if(!obj[item]) {
+ obj[item] = 0;
+ }
+ obj[item]++
+ return obj;
+ }, {});
+ console.log(transportation);
+
diff --git a/04 - Array Cardio Day 1/readme.md b/04 - Array Cardio Day 1/readme.md
new file mode 100644
index 0000000000..ef61acac61
--- /dev/null
+++ b/04 - Array Cardio Day 1/readme.md
@@ -0,0 +1,2 @@
+### Array Cardio Day 1
+Practicing array methods
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..ee91e6e44a 100644
--- a/05 - Flex Panel Gallery/index-START.html
+++ b/05 - Flex Panel Gallery/index-START.html
@@ -1,7 +1,7 @@
-
+
-
+
Flex Panels 💪
@@ -24,6 +24,7 @@
.panels {
min-height:100vh;
overflow: hidden;
+ display: flex;
}
.panel {
@@ -41,6 +42,11 @@
font-size: 20px;
background-size:cover;
background-position:center;
+ flex: 1; /* means to distribute extra space evenly among each panel*/
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
}
@@ -50,10 +56,31 @@
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
+ /* Flex Items (the words) */
.panel > * {
margin:0;
width: 100%;
transition:transform 0.5s;
+ flex: 1 0 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ /* The first word in each column */
+ .panel > *:first-child {
+ transform: translateY(-100%);
+ }
+ .panel.open-active > *:first-child {
+ transform: translateY(0);
+ }
+
+ /* The first word in each column */
+ .panel > *:last-child {
+ transform: translateY(100%);
+ }
+ .panel.open-active > *:last-child {
+ transform: translateY(0);
}
.panel p {
@@ -67,6 +94,7 @@
}
.panel.open {
+ flex: 5; /* Takes up 5 times more space than other panels */
font-size:40px;
}
@@ -78,28 +106,28 @@
-
+
+
-
-
+
+
-
-
+
+
-
+
diff --git a/03 - CSS Variables/readme.md b/03 - CSS Variables/readme.md
new file mode 100644
index 0000000000..f0b9537ebe
--- /dev/null
+++ b/03 - CSS Variables/readme.md
@@ -0,0 +1,6 @@
+### CSS variables
+Using Javascript to play around with CSS variables to change an image
+
+##### Notes
+- **:root** will always select the document's top-most element in the document tree
+- **dataset** is an object with the various date attributes and their value
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..5308967ac2 100644
--- a/04 - Array Cardio Day 1/index-START.html
+++ b/04 - Array Cardio Day 1/index-START.html
@@ -33,29 +33,90 @@
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
+ const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600));
+ console.table(fifteen);
+ /***
+ SAME AS:
+ const fifteen = inventors.filter(function(inventor) {
+ if(inventor.year >= 1500 && inventor.year < 1600) {
+ return true;
+ }
+ });
+ ***/
// Array.prototype.map()
// 2. Give us an array of the inventors' first and last names
+ const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
+ console.log(fullNames);
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
+ const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
+ //ternary statement, if condition is true return 1 else return -1
+ console.table(ordered);
+ /***
+ SAME AS:
+ const ordered = inventors.sort(function(a, b) {
+ if(a.year > b.year) {
+ return 1;
+ } else {
+ return -1;
+ }
+ });
+ ***/
// Array.prototype.reduce()
// 4. How many years did all the inventors live?
+ const totalYears = inventors.reduce((total, inventor) => {
+ return total + (inventor.passed - inventor.year);
+ }, 0);
+ console.log(totalYears);
// 5. Sort the inventors by years lived
+ const oldest = inventors.sort((a, b) => {
+ const lastGuy = a.passed - a.year;
+ const nextGuy = b.passed - b.year;
+ return lastGuy > nextGuy ? 1 : -1;
+ });
+ console.table(oldest);
// 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
// https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
-
+ /**
+ // 1) Find DOM element and find what contains Boulevards
+ const category = document.querySelector('.mw-category');
+ // 2) Find links inside previous element and convert nodelist into an array
+ const links = Array.from(category.querySelectorAll('a'));
+ // OR ES6 const links = [...(category.querySelectorAll('a')];
+ // 3) Get the names of all the Boulevards with de
+ const de = links
+ .map(link => link.textContent)
+ .filter(streetName => streetName.includes('de'));
+ **/
// 7. sort Exercise
// Sort the people alphabetically by last name
+ const alpha = people.sort((lastOne, nextOne) => {
+ const [aLast, aFirst] = lastOne.split(', ');
+ const [bLast, bFirst] = nextOne.split(', ');
+ return aLast > bLast ? 1 : -1;
+ });
+ console.log(alpha);
// 8. Reduce Exercise
// Sum up the instances of each of these
const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
+ const transportation = data.reduce((obj, item) => {
+ //first check if item exists, if not, create it in obj, set it to 0, and then increment
+ if(!obj[item]) {
+ obj[item] = 0;
+ }
+ obj[item]++
+ return obj;
+ }, {});
+ console.log(transportation);
+
diff --git a/04 - Array Cardio Day 1/readme.md b/04 - Array Cardio Day 1/readme.md
new file mode 100644
index 0000000000..ef61acac61
--- /dev/null
+++ b/04 - Array Cardio Day 1/readme.md
@@ -0,0 +1,2 @@
+### Array Cardio Day 1
+Practicing array methods
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..ee91e6e44a 100644
--- a/05 - Flex Panel Gallery/index-START.html
+++ b/05 - Flex Panel Gallery/index-START.html
@@ -1,7 +1,7 @@
-
+
-
+
-
+
+
-
Hey
Let's
Dance
+
-
Give
Take
Receive
+
-
Experience
It
Today
+
-
Give
All
You can
+
Type Ahead 👀
-
+
-
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..bef1ae287a 100644
--- a/07 - Array Cardio Day 2/index-START.html
+++ b/07 - Array Cardio Day 2/index-START.html
@@ -1,7 +1,7 @@
-
+
-
+
Array Cardio 💪💪
@@ -24,17 +24,52 @@
{ text: 'Nice Nice Nice!', id: 542328 }
];
- // Some and Every Checks
+ // SOME AND EVERY CHECKS
// Array.prototype.some() // is at least one person 19?
+ /*
+ const isAdult = people.some(function(person) {
+ const currentYear = (new Date()).getFullYear();
+ if(currentYear - person.year >= 19) {
+ return true;
+ }
+ });
+ */
+ const isAdult = people.some(person => {
+ const currentYear = (new Date()).getFullYear();
+ return currentYear - person.year >= 19;
+ });
+
+ console.log({isAdult});
+
// Array.prototype.every() // is everyone 19?
+ const allAdults = people.every(person =>
+ ((new Date()).getFullYear()) - person.year >= 19);
+ console.log({allAdults});
// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
// find the comment with the ID of 823423
-
+ /*
+ const comment = comments.find(function(comment) {
+ if(comment.id === 823423) {
+ return true;
+ }
+ });
+ */
+ const comment = comments.find(comment => comment.id === 823423);
+ console.log(comment);
// Array.prototype.findIndex()
// Find the comment with this ID
+ const index = comments.findIndex(comment => comment.id === 823423);
+ console.log(index);
// delete the comment with the ID of 823423
+ // comments.splice(index, 1); OR
+ const newComments = [
+ ...comments.slice(0, index),
+ ...comments.slice(index + 1)
+ ]
+ console.table(comments);
+ console.table(newComments);
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..680d69dc97 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html
+++ b/08 - Fun with HTML5 Canvas/index-START.html
@@ -1,19 +1,79 @@
-
+
-
+
HTML5 Canvas
-
-
-
-
+
+
+
+
+
+
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..38a24f0179 100644
--- a/09 - Dev Tools Domination/index-START.html
+++ b/09 - Dev Tools Domination/index-START.html
@@ -1,12 +1,12 @@
-
+
-
+
Console Tricks!
- Document
@@ -36,7 +36,7 @@
text-decoration: line-through;
}
- input[type="checkbox"] {
+ input[type='checkbox'] {
margin:20px;
}
@@ -61,49 +61,76 @@
-
Life
In
Motion
@@ -108,6 +136,21 @@ diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html index 1436886918..5dbb2a261b 100644 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -1,21 +1,77 @@ - + - +×BREAK×DOWN×
+×BREAK×DOWN×
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html index eb7ed310bb..d44f80dff9 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -1,7 +1,7 @@ - + - +
-
-
+
+
+
- This is an inbox layout.
-
+
+
- Check one item
-
+
+
- Hold down your Shift key
-
+
+
- Check a lower item
-
+
+
- Everything inbetween should also be set to checked
-
+
+
- Try do it with out any libraries
-
+
+
- Just regular JavaScript
-
+
+
- Good Luck!
-
+
-
+
diff --git a/readme.md b/readme.md
index 5a1eaa18c8..6255077cc2 100644
--- a/readme.md
+++ b/readme.md
@@ -1,8 +1,10 @@
+***My work for the Javascript 30 Day Vanilla JS Code Challenge***
+
# 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)
@@ -10,8 +12,8 @@ Text-based guides (unofficial) for the challenges can be found here - [Text Guid
## 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.
+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.
+The starter files + solutions will be updated if/when the videos are updated.
Thanks!
+
Don't forget to tweet your result!