Day 153: FCC, Intermediate Algorithm Scripting

Okay, today I'm starting up with problem 14 of Intermediate Algorithm Scripting.  Here's a function that tells me if a number is a prime number or not, it returns true if it is, and false if it's not:

function prime(a) {
  var b = a - 1;
  var isPrime = true;
  while (b !== 1) {
    if (a % b === 0) {
 isPrime = false;
}
b = b - 1;
  }
  if (isPrime === true) {
    return true;
  }
  else {
    return false;
  }
}

So now I've got to make a loop that runs the number given, and every number below that, though the formula above, and then adds all the numbers that result in true.  I've got a plan, and that's how all these things start.

Side note, this iterates through an array to find the max value:

var maxValue = null;
for (var i = 0; i < myArray.length; i++) {
  if (maxValue === null || maxValue < myArray[i]) {
    maxValue = myArray[i];
  }
}

That code may be useful later.

I solved it!

 function prime(a) {
  var b = a - 1;
  var isPrime = true;
  while (b !== 1) {
    if (a % b === 0) {
    isPrime = false;
  }
  b = b - 1;
  }
  if (isPrime === true) {
    return true;
  }
  else {
    return false;
  }
}

function sumPrimes(num) {
  var arrayOfPrimes = [];
  for (var j = 2; j <= num; j++) {
    if(prime(j) === true) {
      arrayOfPrimes.push(j);
    } 
  }
  var primesTotalled = 0;
  for (var k = 0; k < arrayOfPrimes.length; k++) {
    primesTotalled = primesTotalled + arrayOfPrimes[k];
  }
  return primesTotalled;
}


sumPrimes(10);

I feel great, it looks like the problem I was having was that I was over complicating things, it was more simple than I thought.

On a side note, FCC added a section, which is now section 11 (the other sections moved up a number), titled "JSON API's and Ajax," so I've made that adjustment below.  It also added some new content to section 6, "Basic JavaScript," so I went back to that section and completed the additions, which were fairly minor.

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. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                 Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                           Complete
5. jQuery                                                                                              Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                   Complete
9. Basic Front End Development Projects                                                 On 4 of 5
10. Intermediate Algorithm Scripting                 On 4 of 21 (#13 and #14 also done)
11. JSON API's and Ajax
12. Intermediate Front End Development Projects
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate

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: 5

Total Hours Coding: 712

Day 152: FCC, Intermediate Algorithm Scripts

All right, I just finished a great meal, starting the day on the roman numeral problem.  O.k., I'm going to use recursion to solve the problem...  

That worked, here's my code:

function convert(num) {
  var decNum = [1, 4, 5, 9, 10, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900];
  var romNum = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'];
  if (num >= decNum[19]) { return romNum[19] + convert(num - 900);}
  if (num >= decNum[18]) { return romNum[18] + convert(num - 800);}
  if (num >= decNum[17]) { return romNum[17] + convert(num - 700);}
  if (num >= decNum[16]) { return romNum[16] + convert(num - 600);}
  if (num >= decNum[15]) { return romNum[15] + convert(num - 500);}
  if (num >= decNum[14]) { return romNum[14] + convert(num - 400);}
  if (num >= decNum[13]) { return romNum[13] + convert(num - 300);}
  if (num >= decNum[12]) { return romNum[12] + convert(num - 200);}
  if (num >= decNum[11]) { return romNum[11] + convert(num - 100);}
  if (num >= decNum[10]) { return romNum[10] + convert(num - 90);}
  if (num >= decNum[9]) { return romNum[9] + convert(num - 80);}
  if (num >= decNum[8]) { return romNum[8] + convert(num - 70);}
  if (num >= decNum[7]) { return romNum[7] + convert(num - 60);}
  if (num >= decNum[6]) { return romNum[6] + convert(num - 50);}
  if (num >= decNum[5]) { return romNum[5] + convert(num - 40);}
  if (num >= decNum[4]) { return romNum[4] + convert(num - 10);}
  if (num >= decNum[3]) { return romNum[3] + convert(num - 9);}
  if (num >= decNum[2]) { return romNum[2] + convert(num - 5);}
  if (num >= decNum[1]) { return romNum[1] + convert(num - 4);}
  if (num >= decNum[0]) { return romNum[0] + convert(num - 1);}
  if (num === 0) {return "";}

}

It goes through the numerals, returning a numeral, then subtracting the value of the numeral from the European digit, then running the remainder through the function again, until there is no remainder, then it adds and empty space.  The total result ends up being a Roman Numeral, and it works up to 900.

Neat, huh?  I'm messing with CodePen to see if I can incorporate this into a pen, but the problem I'm having is I need to get the return data into an innerHTML somehow.  Maybe I need to place the output into a variable before returning it, in order to access it.  O.k., I'm able to retrieve the data returned from the function, because it's not going into a variable.  

I finally got it to show up on the HTML!!!  It took me all day basically, but I've got the JavaScript code hooked up to the HTML now, and it works!

O.k., first, here's my code, I've got to save it here, it was quite a bit of work to figure this out, I don't have any mentors, it's just me, Google (thanks Google), and Stack Exchange(thanks, contributors).

Okay, here's the HTML:

<h1 class='text-primary'>The Great European Digits to Roman Numerals Converter!</h1>
<h4>Enter European Digits Below!</h4>
<form>
  <input type="number" name="a" id="a"><br>
  <input type="button" value="Convert" style="font-size: 14px;" onclick="var romanResult = convert(document.getElementById('a').value); insertRoman(romanResult);">
  </input>
</form>
<div>
<h4 id="convertedNumber"></h4>
</div>

Things to note:

1.  The input type is "button," because when I had the input type as "submit," the output from onclick would appear only for a split second and then vanish.  Apparently, this is because submit causes the page to refresh, wiping out the content.

2.  I chained functions together in the onclick, you can do that by simply entering a semicolon in between the functions.

3.  I was able to use the convert function by entering document.getElementById('a').value as a parameter and assigning 'a' to the name and id fields for the number input type.

4.  The problem I spend most of the day trying to solve is how to get the result of the function to equal the .innerHTML.  What I finally realized I could do is create a variable, 'romanResult', to hold the value of the output from convert(), THEN I could create another function which used that value and assigned it to .innerHTML, after which I could insert that second function into the onclick event.  

I love coding.  I ordered two highly rated books today, one on html and css, and one on JavaScript and JQuery.  I'm really enjoying front end web development, and at this point, I want to become a front end web dev expert.  I could go for learning the full stack instead, but I've got a hunch that if I do that, I'll end up, at least in the short term, knowing not a smattering of many technologies.  On the other hand, if I focus 100% on HTML5, CSS3, JavaScript, JQuery, BootStrap, and perhaps AngularJS and/or some other JavaScript framework(s), the material is related enough, and digestible enough, that I could reach a level of knowledge that would allow me to monetize my skills via employment within a few months.  Following that, with the infusion of capital that will result in, I'll be able to hire a back end developer and start launching my own sites in partnership with my brother.

All right, then here's the JavaScript:

function convert(num) {
  var decNum = [1, 4, 5, 9, 10, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900];
  var romNum = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'];
  if (num >= decNum[19]) { return romNum[19] + convert(num - 900);}
  if (num >= decNum[18]) { return romNum[18] + convert(num - 800);}
  if (num >= decNum[17]) { return romNum[17] + convert(num - 700);}
  if (num >= decNum[16]) { return romNum[16] + convert(num - 600);}
  if (num >= decNum[15]) { return romNum[15] + convert(num - 500);}
  if (num >= decNum[14]) { return romNum[14] + convert(num - 400);}
  if (num >= decNum[13]) { return romNum[13] + convert(num - 300);}
  if (num >= decNum[12]) { return romNum[12] + convert(num - 200);}
  if (num >= decNum[11]) { return romNum[11] + convert(num - 100);}
  if (num >= decNum[10]) { return romNum[10] + convert(num - 90);}
  if (num >= decNum[9]) { return romNum[9] + convert(num - 80);}
  if (num >= decNum[8]) { return romNum[8] + convert(num - 70);}
  if (num >= decNum[7]) { return romNum[7] + convert(num - 60);}
  if (num >= decNum[6]) { return romNum[6] + convert(num - 50);}
  if (num >= decNum[5]) { return romNum[5] + convert(num - 40);}
  if (num >= decNum[4]) { return romNum[4] + convert(num - 10);}
  if (num >= decNum[3]) { return romNum[3] + convert(num - 9);}
  if (num >= decNum[2]) { return romNum[2] + convert(num - 5);}
  if (num >= decNum[1]) { return romNum[1] + convert(num - 4);}
  if (num >= decNum[0]) { return romNum[0] + convert(num - 1);}
  if (num === 0) {return "";}
}

function insertRoman(romanResult) {
  document.getElementById("convertedNumber").innerHTML = romanResult;

}

So, now that I've got the JavaScript side of things done, I'm going to turn the code above into a nice web page (on CodePen) to keep practicing my HTML and CSS skills.

For future reference, this code gives my text a white outline (black text with a white outline is readable over any color, so it's great when we have an image as the background:

.strokeme
{
    color: black;
    text-shadow:
    -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
    1px 1px 0 #FFF;  

}

Here's how to use a background image or set a background color:

body {
    background-image: url("");
    background-color: #cccccc;

}

Just enter the url in the quotes.

Note that HTML elements should each only have one ID.  An element can have multiple classes, but it can only have one id.  

Check out my Roman Numerals webpage!

I jumped ahead and completed Bonfire 13 of 21 (it had a Fibonacci Sequence problem, so I simply modified my solution Euler Problem 2, which I had solved previously, and input that, which worked).  Here's my solution, which sums all odd numbers in the Fibonacci sequence up to and including the passed number:

function sumFibs(num) {
  var fibArray = [1,2];
  var total = 2;
  for (var i = 0; i < fibArray.length; i += 1) {
  var fib = fibArray[fibArray.length - 1] + fibArray[fibArray.length - 2];
  if (fib < 4000001) {
  fibArray.push(fib);
  }     
  if (fib % 2 !== 0 && fib <= num) {
    total = total + fib;
  } 
} 
  return total;
}

sumFibs(4);

The next Bonfire, Bonfire 14 of 21, requires us to sum all prime numbers up to the number given, as well as the number given, whether it's a prime or not.  My solution to Euler Problem 3, which I still have saved on GitHub, will probably come in handy.  I looked back at my blog/notes, and I retrieved an old screenshot of the code for finding the prime factors of a number, and that will also help.

Okay, it's late, I've been at this 10 hours today, I'm calling it a day, but this is exactly the kind of pace I need to become an expert at web development.

I learned so much today, this is great!  Good night.

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. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                            Complete
5. jQuery                                                                                               Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                    Complete
9. Basic Front End Development Projects                                                 On 4 of 5
10. Intermediate Algorithm Scripting                      On 4 of 21 (completed #13 also)
11. Intermediate Front End Development Projects
12. Claim Your Front End Development Certificate
13. Upper Intermediate Algorithm Scripting
14. Automated Testing and Debugging
15. Advanced Algorithm Scripting
16. AngularJS
17. Git
18. Node.js and Express.js
19. MongoDB
20. Full Stack JavaScript Projects
21. Claim Your Full Stack Development Certificate

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: 10

Total Hours Coding: 707

Day 151: FCC, Basic Front End Web Dev Projects, Pomodoro Clock

All right, so my macbook is no longer functioning, and I can't get it repaired until I get back to America in about two weeks.  Also, my internet speed has been very slow over here in Asia, and it was causing me difficulties with working on front end development, because CodePen was not updating correctly.

So, I bought a PC over here in Asia to use for the next two weeks, because I'm being very productive, and I don't want to waste the next 10 days.  Since the new PC isn't as high performance as the macbook is (when it's working), I'm stopping work on the front end web dev projects (I was working on the pomodoro clock) and I'm going to spend the next two weeks of my time in Asia working on the next section, which is the Intermediate Algorithm Scripting.  If I finish the Intermediate Algorithm Scripting section in the next 10 days, while I'm still in Asia, then perhaps I'll try doing the front end projects with this PC, and if the computer or the wifi are too slow to work on those projects, perhaps I'll just jump to the Upper Intermediate Algorithm Scripting.

Here's my solution for the second problem in that problem set, which required us to take two arrays and return a third array with any items not found in both of the original arrays:

function diff(arr1, arr2) {
  var newArr = [];
  for (var i = 0; i< arr1.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
      if  (arr1[i] === arr2[j]) {
        arr1.splice(i, 1);
        arr2.splice(j, 1);
        i--;
        console.log(arr1) 
      }
    }
  }
  
  for (var i = 0; i< arr2.length; i++) {
    for (var j = 0; j < arr1.length; j++) {
      if  (arr2[i] === arr1[j]) {
        arr2.splice(i, 1);
        arr1.splice(j, 1);
        i--;      
      }
    }
  }
  
  newArr = arr1.concat(arr2);
  /*newArr.filter();*/
  return newArr;
}



diff([1, 2, 3, 5], [1, 2, 3, 4, 5]);

The i-- was the key part of that code, the problem was that whenever I spliced out an item, the item in front of it would then move back in index numbers (taking the place of the item removed), and so the code would skip any item after a match on the condition.  By adding i--, the code would adjust the i value down one every time the condition was matched, to compensate for the change in index values in the array caused by the removal of one item.  That's neat!

But then...I realized I didn't need the second part of the code, the first part was good enough to catch every duplicate (I thought the second part might be needed if the second array was bigger than the first, but I was wrong).

So, the final code came out to:

function diff(arr1, arr2) {
  var newArr = [];
  for (var i = 0; i< arr1.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
      if  (arr1[i] === arr2[j]) {
        arr1.splice(i, 1);
        arr2.splice(j, 1);
        i--;
        console.log(arr1) 
      }
    }
  }
    
  newArr = arr1.concat(arr2);
  return newArr;
}


diff([1, 2, 3, 5], [1, 2, 3, 4, 5]);

Now I'm moving on to the third problem.  There are a total of 21 problems to complete in the Intermediate Algorithm Scripting section.

WHOA!  The next problem requires us to write code that converts a number to a Roman Numeral!  I'm excited, what a fantastic problem to work on!  So sweet!  All right, time to work my brain...

So, I'm thinking the way to begin my approach to the problem is to make a converter that works for the number 0 through 9, and then work my way up from there.  Let's try that.

O.k., that approach is far too tedious, let me read the actual RULES of Roman Numerals, and start devising a system of some sort...

This problem is quite a challenge.  At this point, I've seen several solutions for it, but I've yet to devise my own.  I'm tired, it's late and it's time for bed, so I'll wake up tomorrow, have a good breakfast, hydrate, and start hacking away at this problem with a fresh mind.  Today was a good day. 

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. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                            Complete
5. jQuery                                                                                               Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                    Complete
9. Basic Front End Development Projects                                                 On 4 of 5
10. Intermediate Algorithm Scripting                                                     On 3 of 21
11. Intermediate Front End Development Projects
12. Claim Your Front End Development Certificate
13. Upper Intermediate Algorithm Scripting
14. Automated Testing and Debugging
15. Advanced Algorithm Scripting
16. AngularJS
17. Git
18. Node.js and Express.js
19. MongoDB
20. Full Stack JavaScript Projects
21. Claim Your Full Stack Development Certificate

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: 6

Total Hours Coding: 697

Day 150: FCC, Basic Front End Web Dev Projects, Pomodoro Clock

All right, today I'm working on the 4th of the 5 projects in the "Basic Front End Web Development" section, which is to make a Pomodoro Clock web app.  O.k., so I downloaded some JQuery code called Time Circles, and after doing some research, I managed to get it to work on my browser (not online, the files are on my computer).  Here's a screenshot:

The code that makes that appear on the page is this:

$(document).ready(function(){
         $(".demo").TimeCircles(); /*insert the code within, "demo" is the div class name*/

    }); /*Place all of this at the top of the javascript(TimeCircles.js) file.*/

It should be inserted at the top of the TimeCircles.js file, which contains the file that makes all of that actually work.  Now I need to figure out how to make the time circles do what I need them to do, which is to count down 25 minute intervals with the click of a start button, and have a timer go off upon the expiration of the 25 minutes.  That's the main user story anyhow, there are also some bonus user stories.

So I'm exploring this TimeCircles code, and I made this for my girl:

Neat, huh?  The only thing is, I can center everything else, but Im having trouble centering the circles and numbers, because that part came with some pre-made CSS, and it's fixed to the left side of the page.  I'll have to go in there and figure it all out though, because I have to position my pomodoro clock for the zipline.

I've been making some headway here today!

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. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                            Complete
5. jQuery                                                                                               Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                    Complete
9. Basic Front End Development Projects                                                 On 4 of 5
10. Intermediate Algorithm Scripting
11. Intermediate Front End Development Projects
12. Claim Your Front End Development Certificate
13. Upper Intermediate Algorithm Scripting
14. Automated Testing and Debugging
15. Advanced Algorithm Scripting
16. AngularJS
17. Git
18. Node.js and Express.js
19. MongoDB
20. Full Stack JavaScript Projects
21. Claim Your Full Stack Development Certificate

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: 6

Total Hours Coding: 691

Day 149: FCC, Basic Front End Web Dev Projects, Random Quote Generator

So, the next project, which is the 3rd section of the "Basic Front End Web Dev Projects Section," is to build a random quote machine.

Also, I updated the FCC overview at the bottom of my blog posts to reflect the updates that FCC made.

So, if you want to insert an apostrophe inside of a quote in some code, you can do this:

'It\'s not time yet.'

The \ will prevent the apostrophe from closing the quote.  This project was much easier than I thought it would be.  I'm basically done, I need a few more quotes, here's a screenshot:

Neat, huh?  It's interesting how much I'm really learning just from applying the knowledge I've gone over.

I'm done.  Here's the HTML:

<body>
  <div id="centralDiv" class="text-center center-block">
    <h1>Random Quote Generator</h1>
    <h4>These are some of my favorite self improvement quotes.  I hope you enjoy them!</h4>
    <br>
    <button type="button" class="btn btn-default" id="buttonStyling" onClick="quoteFunction();">Generate New Quote</button>
    <br>
    <div><h3 id="randomQuote"></h3></div>
  </div>

</body>

And here's the CSS:

#centralDiv {
  color: white;
  display: block;
  border: 2px solid black;
  width: 80%;
  margin-top: 40px;
  height: 460px;
  border-radius: 10px;
  background: #62A9FF;
  font-family: Monospace, Arial;
}

#buttonStyling {
  border: 2px solid black;
  color: #2966B8;

}

#buttonStyling:hover {
  background: #2966B8;
  color: white;
}

#randomQuote {
  font-family: Monospace, Arial;

}

And here's the JavaScript:


function quoteFunction() {
  var newQuote;
  num = Math.floor((Math.random() * 10) + 1);
  if (num === 1) {
    newQuote = "'Continuous effort - not strength or intelligence - is the key to unlocking our potential.' -- Winston Churchill";
  }
  if (num === 2) {
    newQuote = "'Success is nothing more than a few simple disciplines, practiced every day.' -- Jim Rohn";
  }
  if (num === 3) {
    newQuote = "'Failure is not a single, cataclysmic event. You do not fail overnight. Instead, failure is a few errors in judgment, repeated every day.' -- Jim Rohn";
  }
  if (num === 4) {
    newQuote = "'It\'s not the big things that add up in the end; it\'s the hundreds, thousands, or millions of little things that separate the ordinary from the extraordinary.' -- Darren Hardy";
  }
    if (num === 5) {
    newQuote = "'Earning success is hard. The process is laborious, tedious, sometimes even boring. Becoming wealthy, influential, and world-class in your field is slow and arduous.' -- Darren Hardy";
  }
  if (num === 6) {
    newQuote = "'A daily routine built on good habits and disciplines separates the most successful among us from everyone else. A routine is exceptionally powerful.' -- Darren Hardy";
  }
  if (num === 7) {
    newQuote = "'Take care of your body. It is the only place you have to live.' -- Jim Rohn";
  }
  if (num === 8) {
    newQuote = "'The great danger of the media is that it gives us a very perverted view of the world. Because the focus and the repetition of messaging is on the negative, that\’s what our minds start believing. This warped and narrow view of what\’s not working has a severe influence on your creative potential. It can be crippling.' -- Darren Hardy";
  }
  if (num === 9) {
    newQuote = "'And as long as you\’re making choices unconsciously, you can\’t consciously choose to change that ineffective behavior and turn it into productive habits.' -- Darren Hardy";
  }
  if (num === 10) {
    newQuote = "'If we want to succeed, we need to recover our grandparents\’ work ethic.' -- Darren Hardy";
  }   
  document.getElementById("randomQuote").innerHTML = newQuote;

}

Well, I changed the quote a little, I made the div larger and added some padding as well.  So, there's actually one more thing I'm supposed to add, and that's a button that will allow me to tweet out the quote...

Well, I got a tweet button added, and I know how to get the tweet to say something (we add data-text="what I want it to say" to the script code), but I wasn't able to get it to insert the actual quote into the twit.  Here's the updated screenshot:

And here's the updated HTML:

<body>
  <div id="centralDiv" class="text-center center-block">
    <h1>Random Quote Generator</h1>
    <h4>These are some of my favorite self improvement quotes.  I hope you enjoy them!</h4>
    <br>
    <button type="button" class="btn btn-default" id="buttonStyling" onClick="quoteFunction();">Generate New Quote</button>
    <br>
    <div><h3 id="randomQuote"></h3></div>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Adancode" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    
  </div> 
  

</body>

And the CSS:

#centralDiv {
  color: white;
  display: block;
  border: 2px solid black;
  width: 90%;
  padding-right: 3%;
  padding-left: 3%;
  margin-top: 40px;
  height: 500px;
  border-radius: 10px;
  background: #62A9FF;
  font-family: Monospace, Arial;
}

#buttonStyling {
  border: 2px solid black;
  color: #2966B8;

}

#buttonStyling:hover {
  background: #2966B8;
  color: white;
}

#randomQuote {
  font-family: Monospace, Arial;

}

And the JavaScript:


function quoteFunction() {
  var newQuote;
  num = Math.floor((Math.random() * 10) + 1);
  if (num === 1) {
    newQuote = "'Continuous effort - not strength or intelligence - is the key to unlocking our potential.' -- Winston Churchill";
  }
  if (num === 2) {
    newQuote = "'Success is nothing more than a few simple disciplines, practiced every day.' -- Jim Rohn";
  }
  if (num === 3) {
    newQuote = "'Failure is not a single, cataclysmic event. You do not fail overnight. Instead, failure is a few errors in judgment, repeated every day.' -- Jim Rohn";
  }
  if (num === 4) {
    newQuote = "'It\'s not the big things that add up in the end; it\'s the hundreds, thousands, or millions of little things that separate the ordinary from the extraordinary.' -- Darren Hardy";
  }
    if (num === 5) {
    newQuote = "'Earning success is hard. The process is laborious, tedious, sometimes even boring. Becoming wealthy, influential, and world-class in your field is slow and arduous.' -- Darren Hardy";
  }
  if (num === 6) {
    newQuote = "'A daily routine built on good habits and disciplines separates the most successful among us from everyone else. A routine is exceptionally powerful.' -- Darren Hardy";
  }
  if (num === 7) {
    newQuote = "'Take care of your body. It is the only place you have to live.' -- Jim Rohn";
  }
  if (num === 8) {
    newQuote = "'The great danger of the media is that it gives us a very perverted view of the world. Because the focus and the repetition of messaging is on the negative, that\’s what our minds start believing. This warped and narrow view of what\’s not working has a severe influence on your creative potential. It can be crippling.' -- Darren Hardy";
  }
  if (num === 9) {
    newQuote = "'And as long as you\’re making choices unconsciously, you can\’t consciously choose to change that ineffective behavior and turn it into productive habits.' -- Darren Hardy";
  }
  if (num === 10) {
    newQuote = "'If we want to succeed, we need to recover our grandparents\’ work ethic.' -- Darren Hardy";
  }   
  document.getElementById("randomQuote").innerHTML = newQuote;

}

All right, moving on to the next project, and I'll come back to this later when I come across the info I need to get that quote inserted into the tweet!  Also, It's 5:22 a.m., I couldn't sleep, I was so focused on this project and the last project that I basically pulled an all-nighter.  Time to get some sleep.

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. Get Started with Free Code Camp                                                      Complete
2. HTML5 and CSS                                                                                  Complete
3. Responsive Design with Bootstrap                                                       Complete
4. Gear up for Success                                                                            Complete
5. jQuery                                                                                               Complete
6. Basic JavaScript                                                                                 Complete
7. Object Oriented and Functional Programming                                     Complete
8. Basic Algorithm Scripting                                                                    Complete
9. Basic Front End Development Projects                                                 On 4 of 5
10. Intermediate Algorithm Scripting
11. Intermediate Front End Development Projects
12. Claim Your Front End Development Certificate
13. Upper Intermediate Algorithm Scripting
14. Automated Testing and Debugging
15. Advanced Algorithm Scripting
16. AngularJS
17. Git
18. Node.js and Express.js
19. MongoDB
20. Full Stack JavaScript Projects
21. Claim Your Full Stack Development Certificate

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: 4

Total Hours Coding: 685