All right, today I'm starting on problem 11 of 16. I started by working on this code, which breaks an array into sections as large as the second variable, "size" and outputs the new array:
function chunk(arr, size) {
var outputArray = [];
for (i = 0; i < arr.length; i = i + size){
outputArray.push(arr.slice(i, i + size));
}
return outputArray;
}
chunk(["a", "b", "c", "d"], 2, "");
I had to look up the answer for this problem, the .push() is a command I'm still reviewing. Note that when using .slice(), the original array is not changed, and it slices out the first item in the parentheses, but not the second item (the second item is where it stops slicing). I'm copying this section straight from the answer because it's really interesting how this for loop behaves:
We can combine the Array.slice() method with the Array.push() method inside thefor loop like this:
for (var i = 0; i < arr.length; i += size) {
newArray.push(arr.slice(i, i + size));
}
arr.slice() will start at element 0 and stop at element 2. Here's the fun part: once thefor loop, loops again then the value of i becomes 2 while the i in the arr.slice()will also have a value of 2. The new arr.slice() becomes:
Now arr.slice() starts at the element 2 and stops at element 4 and in the next loop,arr.slice() will start at element 4 and stop at element 6. newArray.push() will push all the elements out into chunks of smaller arrays with the length of size.
I think that will be useful for future reference. This is another possible answer for that problem, also copied from the answer section:
function chunk(arr, size) {
var temp = [];
var result = [];
for (var a = 0; a < arr.length; a++) {
if (a % size !== size - 1)
temp.push(arr[a]);
else {
temp.push(arr[a]);
result.push(temp);
temp = [];
}
}
if (temp.length !== 0)
result.push(temp);
return result;
}
It's more complicated, using if else to get the answers. Okay, now I'm working on Bonfire 12 of 16. In this one, our instructions are to return the remaining elements of an array after chopping off n elements from the head. The n element is the second parameter of the function, while the target array is the first parameter.
Woohoo! I'm back on track! I figured this one out pretty quickly, didn't look at the answer! I didn't like that I looked at the answer on the last problem, I try to solve these problems by myself. So at first I started off with making a for loop, just because I've been making a bunch of for loops, but then I realized that there was no need for iterations and this is more of a simple cut and paste. So, here's my answer:
function slasher(arr, howMany) {
newArray = arr.slice(howMany, arr.length);
return newArray;
}
slasher([1, 2, 3], 2, "");
And that worked. :) So then I went to look at the answer, to see how others had solved the problem, and this is what that answer looked like:
function slasher(arr, howMany) {
// remove the head
arr.splice(0,howMany);
//return the remaining or the tail \__/(**)-<
return arr;
}
slasher([1, 2, 3], 2);
They used .splice() instead of .slice(). The difference here is that .splice changes the original array. So what they did is they chopped off the beginning of the array and then return the leftovers, which is really what the question was asking for. What I did is I basically made a copy of the last items in the array, placed those in a new array, and returned that. The result is the same, except that in my scenario, the original array is unchanged. This was a good problem to learn about .slice() (does not change the original array, so it can be used to make a copy) and .splice() (does change the original array, so it can be used to chop something out).
For the next problem, we had to check to see if every letter in the second string of an array was present in the first string of the array. My first solution did not work whenever letters were repeated, so I started from scratch, but here it is anyways:
function mutation(arr) {
var outLoopCounter = 0;
var innerLoopCounter = 0;
var truthCounter = 0;
var extraLettersCatcher = [];
wordOne = arr[0].toLowerCase().split('');
wordTwo = arr[1].toLowerCase().split('');
for(var i = 0; i < wordTwo.length; i++){
outLoopCounter = outLoopCounter + 1;
for(var j = 0; j < wordOne.length; j++) {
innerLoopCounter = innerLoopCounter + 1;
if (wordTwo[i] === wordOne[j]) {
truthCounter = truthCounter + 1;
extraLettersCatcher.push(wordTwo[i]);
}
}
}
/*if (truthCounter > wordTwo.length) {
truthCounter = truthCounter - 1;
}
*/
if (truthCounter === wordTwo.length) {
console.log(truthCounter, wordTwo.length, wordOne.length, outLoopCounter, innerLoopCounter, extraLettersCatcher);
return true;
}
else {
console.log(truthCounter, wordTwo.length, wordOne.length, outLoopCounter, innerLoopCounter, extraLettersCatcher);
return false;
}
}
mutation(["floor", "for"], "");
I thought that was pretty neat, but the problem did hint that we should use the .indexOf() method, so let's attack the problem from that angle. That method returns a -1 if the item is not found...so I think if I just loop through the array looking for matches, if a -1 is returned a single time, then that means there's no match. I think that's the key to this problem. Let me work on it from that angle, then. That was it, here's the solution, no counters involved, the key part was the .indexOf():
function mutation(arr) {
var outLoopCounter = 0;
var innerLoopCounter = 0;
wordOne = arr[0].toLowerCase().split('');
wordTwo = arr[1].toLowerCase().split('');
for(var i = 0; i < wordTwo.length; i++){
outLoopCounter = outLoopCounter + 1;
for(var j = 0; j < wordOne.length; j++) {
innerLoopCounter = innerLoopCounter + 1;
if (wordOne.indexOf(wordTwo[i]) === -1) {
console.log(wordTwo.length, wordOne.length, outLoopCounter, innerLoopCounter);
return false;
}
}
}
return true;
}
mutation(["hello", "neo"], "");
Neat, huh? But then, I realized I had gone astray with my code. The inner loop wasn't necessary, because the .indexOf() method goes through the entire array automatically. So, this code is actually way better. That was a huge oversight on my part, but now I understand how .indexOf() works:
function mutation(arr) {
wordOne = arr[0].toLowerCase().split('');
wordTwo = arr[1].toLowerCase().split('');
for(var i = 0; i < wordTwo.length; i++) {
if (wordOne.indexOf(wordTwo[i]) === -1) {
return false;
}
}
return true;
}
mutation(["hello", "hey"], "");
It was much easier than it seemed. The key was to REALLY understand what .indexOf() was actually doing. I'm glad I spent a bit of time on this problem. All right, the next problem asks us to remove all falsy values from an array. Falsy values are false, null, 0, "", undefined, and NaN. The problem suggests using the .filter() method to solve the problem. Looking that up right now.
If you do this:
Boolean(NaN) or Boolean(0)
JavaScript will return false. So...we need to put the array values into parentheses. I made my own little function using the .filter() method:
var arr = [7, "ate", "", false, 9];
function bouncer(val) {
if (val > 2) {
return true;
}
}
arr = arr.filter(bouncer);
console.log(arr);
And this one returns the numbers in an array:
var arr = [7, "ate", "", false, 9];
function bouncer(val) {
if (typeof val === "number") {
return true;
}
}
arr = arr.filter(bouncer);
console.log(arr);
Neat, huh?
This one returns the strings:
var arr = [7, "ate", "", false, 9];
function bouncer(val) {
if (typeof val === "string") {
return true;
}
}
arr = arr.filter(bouncer);
console.log(arr);
Hmmm...let me return Booleans...
var arr = [7, "ate", "", false, 9];
function bouncer(val) {
if (typeof val === "boolean") {
return true;
}
}
arr = arr.filter(bouncer);
console.log(arr);
The output for that is false, because false, the boolean value, is a part of the array. So, at first, i tried doing something like this:
function bouncer(arr) {
function myFunc(val) {
if (val !== false) {
return true;
}
}
function myFunc1(val) {
if (val !== 0) {
return true;
}
}
function myFunc2(val) {
if (val !== null) {
return true;
}
}
function myFunc3(val) {
if (val !== "") {
return true;
}
}
function myFunc4(val) {
if (val !== undefined) {
return true;
}
}
function myFunc5(val) {
if (val !== NaN) {
return true;
}
}
arr = arr.filter(myFunc).filter(myFunc1).filter(myFunc2).filter(myFunc3).filter(myFunc4).filter(myFunc5);
return arr;
}
bouncer([7, "ate", "", false, 9], "");
But the NaN is not being removed. Everything else works, but not NaN. So, I had to check on the answer, and this is what the answer was:
function bouncer(arr) {
function trueStuff(value) {
return Boolean(value);
}
var newArray = arr.filter(trueStuff);
return newArray;
}
bouncer([7, "ate", "", false, 9], "");
That was complicated...even after getting what filter did, filter does not filter NaN. Then, Boolean(value) is used in the function, but I'm not sure where I was supposed to read how to use Boolean like that.
So, .filter() is strange, it will return the true values that are the result of the function that you insert into the parentheses.
Okay, I'm on Bonfire number 15 of 16. This problem requires us to take a function with two or more parameters (the first parameter is an array, the second and following parameters are numbers) and remove any matches in parameters 2, 3, 4, and so forth from parameter 1 (the array). Key to solving this problem was this code, which turns arguments into an array:
var args = Array.prototype.slice.call(arguments)
That code should be inserted inside the function. Then, I used this code:
var argsMinusFirst = args.splice(1, args.length);
To create a new array without the first parameter (because the first parameter is the array, and I need the numbers following that to begin solving the problem).
.filter() creates a new array with all the elements that pass the test given by the function in the filter parentheses. This is the code I worked on:
function destroyer(arr) {
var args = Array.prototype.slice.call(arguments);
args.splice(0, 1);
console.log(args);
function removeMatches(val) {
return args.indexOf(val) === -1;
}
return arr.filter(removeMatches);
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3, "");
But this is the actual answer:
function destroyer(arr) {
var args = Array.prototype.slice.call(arguments);
args.splice(0, 1);
return arr.filter(function(element) {
return args.indexOf(element) === -1;
});
}
They both work. .indexOf() and .filter() are something I need to work with more to get the hang of it. I'm repeating the exercise in my mind right now. The output for both of those is:
[1, 1]
However, if we wanted to keep the arguments, and remove anything else, we could just make it backwards, like this:
function destroyer(arr) {
var args = Array.prototype.slice.call(arguments);
args.splice(0, 1);
console.log(args);
function removeMatches(val) {
return args.indexOf(val) !== -1;
}
return arr.filter(removeMatches);
}
destroyer([1, 2, 3, 1, 2, 3], 2, 3, "");
That's neat. The output would then be [2, 3, 2, 3]. Okay, the final Bonfire in this section asks us to give the lowest index number where the number in the second parameter of the function should be inserted into the array which is the first function, if the array is sorted from lowest to highest number. I didn't take too long on this one, I used something called a compare function, inserted that into the parentheses for .sort(), and then built the rest of the code from there. Here's my code:
function where(arr, num) {
arr.push(num);
arr.sort(function(a, b){return a-b});
console.log(arr);
return arr.indexOf(num);
}
where([40, 60], 50, "");
That's cool, it turns out my solution is exactly the same as the second solution for that problem. Here's the first/alternative solution:
function where(arr, num) {
arr.sort(function(a, b) {
return a - b;
});
for (var a = 0; a < arr.length; a++) {
if (arr[a] >= num)
return parseInt(a);
}
return arr.length;
}
I'm pretty proud of completing that one quickly, my progress has been a bit slow today, even though I'm on my 8th hour of studying.
All right, I'm done with the first set of Bonfires! The nest section is section 7, Basic Front End Development Projects. It looks like we'll be using CodePen to host these projects, so I went and logged into my CodePen account. I added BootStrap to the CSS using the little gear and Quick-add. Then I used this code:
<h1 class='text-primary'>Hello CodePen!</h1>
To verify that BootStrap was working (the Hello CodePen text was blue, which means BootStrap is working).
Next, I added JQuery AND BootStrap to the JavaScript window by using the Quick-add select box.
All right, now I made 4 forks of this pen, so that I have 5 identical pens which will hold the 5 zipline projects (that's what some of the projects are called in FCC) that comprise this section of FCC. Tomorrow I'll start work on the first "zipline" project, which is to build a personal portfolio site.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,385
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,120
Treehouse Ranking (%): "You have more total points than 94% of all students."
Treehouse Badge(s) Earned Today:
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (768 pgs.)
In Progress: "Head First JavaScript," by Eric Freeman and Elisabeth Robson (on pg. 56)
Completed:
"A Smarter Way to Learn JavaScript," by Mark Myers (293 pgs., 89
chapters with 20 questions/problems per chapter, for a total of 1,780
coding questions/problems answered)
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. HTML5 and CSS Complete
2. Responsive Design with Bootstrap Complete
3. jQuery Complete
4. Basic JavaScript Complete
5. Object Oriented and Functional Programming Complete
6. Basic Algorithm Scripting Complete
7. Basic Front End Development Projects On 2 of 5
8. Intermediate Algorithm Scripting
9. Upper Intermediate Algorithm Scripting
10. Automated Testing and Debugging
11. Advanced Algorithm Scripting
12. AngularJS
13. Intermediate Front End Development Projects
14. Git
15. Node.js and Express.js
16. MongoDB
17. Full Stack JavaScript Projects
After the FCC work above (estimated to take 800 hours),
there are 800 more hours of coding projects on behalf of non-profits,
which, in addition to contributing to the common good, provide us an
opportunity to expand our networks and build a robust portfolio.
Hours Spent Coding Today: 9
Total Hours Coding: 650
