Saturday, November 14, 2015

Day 156: Treehouse Objects Course and Duckett Books

All right, I'm having a great day, I've got a bit of a cough, but that's o.k., I'm powering through it.  :)  

Today I'm continuing with the Treehouse objects course.

Here's a function to print JavaScript output to HTML:

function print(message) {
  var div = document.getElementById('output');
  div.innerHTML = message;

}

I'll be using that for the project I'm working on.  O.k., I didn't enjoy the treehouse course, I took most of it, but it didn't go as deep as I need it to go on objects.

Okay, I still need a lot of work on objects.  I'm going to try the Jon Duckett books now and see if those prepare me better for completing FCC.  

I'm on page 101 of "HTML and CSS" by Jon Duckett.  I'll complete this book, then continue with "JavaScript and JQuery" by Jon Duckett, and then attempt the FCC object task and the pomodoro clock task again.

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,503

Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
JavaScript:                      1,239

Treehouse Ranking (%): "You have more total points than 93% of all students."

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)
Console Foundations
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
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers 
In Progress: "HTML and CSS," by Jon Duckett (On pg 101 of 490)
In Progress: "JavaScript and JQuery," by Jon Duckett (on pg 0 of 622)

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 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.


Hours Spent Coding Today: 4
Total Hours Coding: 724

Wednesday, November 11, 2015

Day 155: Treehouse Objects Course

Today I'm continuing with the Treehouse course on Objects.  I need to understand Objects well in order to solve the next FCC problem.  Afterwards, I have a choice of delving more into Treehouse or working on the Duckett books.  I'm leaning towards the Duckett books, because of how much I learned from the Myers book, but it's all open.  The main thing is to keep learning and continuously apply that knowledge by creating various projects, projects which will serve as my portfolio.

By the time I'm applying for a job, I want to be HIGHLY qualified.  I have the time to invest in myself, and there's no reason to not take advantage of that.  This is great!

O.k., say we have this object:

var brazil = {
  hemisphere: 'southern',
  holidays: ['carnival', 'turkey day', 'beach day'],
  age: 143 
}

Then, this below: 

brazil.holidays.length

Would let us know how many holidays brazil has, and this below:

brazil.age += 1

Would add 1 to the age of brazil.  

Then this below would access the property 'turkey day'.

brazil.holidays[1];

Would access the property 'turkey day'.  A JavaScript object literal is like a series of named variables, each with their own value, packaged into a single item (the object).  When making objects, be sure to denote strings with quotes, and anything not in quotes should be a variable, or a number, or a boolean, for example.

When using a for in loop, only bracket notation will work, do not use dot notation with a for in loop.  Here's out object literal again:

var brazil = {
  hemisphere: 'southern',
  holidays: ['carnival', 'turkey day', 'beach day'],
  age: 143 
}

And here's a for in loop that iterates through it, outputting the property values:

for (var prop in brazil) {
  console.log(brazil[prop])
}

The output would be: 

southern
["carnival", "turkey day", "beach day"]

143

Neat.  On the other hand, if you just want to access the properties, this would do it:

for (prop in brazil) {
  console.log(prop);
}

The output would be:

hemisphere
holidays
age

If you want to output every property and property value, this would do it:

for (prop in brazil) {
  console.log(prop, ' : ', brazil[prop]);
}

The output would be:

hemisphere  :  southern
holidays  :  ["carnival", "turkey day", "beach day"]

age  :  143

This does the same thing:

var shanghai = {
  population: 14.35e6,
  longitude: '31.2000 N',
  latitude: '121.5000 E',
  country: 'CHN'
};

for (var key in shanghai) {
  console.log(key, ': ', shanghai[key]);

}

Think of key like the i in for loops.

O.k., I spent a few days down in South Texas with my family, and now it's the 11th of November, time for the first Free Code Camp Austin Meetup!  I'm heading out in a bit to have the first study session for my meetup group, which I'll be hosting!  :)

Great stuff!

My class on JavaScript objects today mentioned JSON for the first time, which stands for JavaScript Object Notation.  JSON is commonly used with a technology called AJAX to exchange information with a web server.  Information sent in JSON format can easily be converted to a JavaScript format, and be displayed on a webpage.  I downloaded a Chrome extension called JSON view, which makes viewing JSON data easier.  JSON is a string formatted to look like a JavaScript object, which allows it to be easily converted to a JavaScript object.

The meetup was great, I just got home and posted a recap of the meeting on the FCC group Facebook page.  Time to get some sleep!

SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,449

Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
JavaScript:                      1,184

Treehouse Ranking (%): "You have more total points than 93% of all students."

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)
Console Foundations
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
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers 

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 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.


Hours Spent Coding Today: 4
Total Hours Coding: 720

Saturday, November 7, 2015

Day 154: FCC, Intermediate Algorithm Scripting

O.k., today I'm continuing with the Intermediate Algorithm Scripting.  I've been making steady progress, there's 21 code challenges in this section, and I've completed 5 of them so far.

I'm on problem 4, which deals with objects.  So, first I'm going to review the chapters on objects in Mark Myers' book, and then, I'll see how to use a for loop to iterate through an object.  Working on that now.

I'm back in Austin, TX and I need to review some JavaScript material, especially material on Objects, so that I can answer problem 4.  So, I'm going to Treehouse and reviewing some of the JavaScript videos.

Also, I ordered two books while I was still in Asia, "HTML and CSS," and "JavaScript and JQuery," both by Jon Duckett, and they've arrived already.  They're pretty amazing, graphically speaking, and they've got great reviews, so I'm really looking forward to going through them.

Also, I launched the Austin meetup group for Free Code Camp, and I've set up meetups that alternate Wednesdays at 7 p.m. between Buzzmill Coffee and Cherrywood Coffeehouse.

My current plan is to finish the Treehouse Front End Web Development course, then attempt the Free Code Camp projects and algorithms again, armed with new knowledge.  If I still have difficulty, then I'll go through both of Jon Duckett's books and try again.  Reading "A Smarter Way to Learn JavaScript" really improved my JavaScript skills, so much so that some of the challenges were very easy for me.  So based on that experience, I'm going to immerse myself in front end development via Treehouse and books (Jon Duckett's), with the goal being to reach a level of skill at which I can complete the FCC algorithm problems, projects, and other challenges in a confident and expeditious manner.  I aim to achieve a very high level of skill at front end development (and possibly back-end also once I'm at a solid level with front end), and I'm going to put in the time required to do so.

This code generates a random number:

function randomNumber(upper) {
  return Math.floor(Math.random() * upper) + 1;
}

I've used that several times in the past, but it came up again, so I thought I'd note it.

clear() will clear the JavaScript console.

We went over shift(), unshift(), push(), and pop().  Here's a quick way to make an array with a bunch of numbers in it:

var myArray = []

for (var i = 0; i < 10; i++) { myArray.push(i);};

myArray becomes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Neat, huh?  This creates an HTML list, it's really cool:

var playList = [
  'I Did It My Way',
  'Respect',
  'Imagine',
  'Born to Run',
  'Louie Louie',
  'Maybellene'
];

function print(message) {
  document.write(message);
}

function printList( list ) {
  var listHTML = "<ol>";
  for ( var i = 0; i < list.length; i += 1) {
    listHTML += "<li>" + list[i] + "</li>"; 
  }
  listHTML += "</ol>";
  print(listHTML);
  
}


printList(playList);

It's code from Treehouse.  I'm realizing that I have to continuously be learning both HTML and CSS, AND JavaScript and JQuery.  If I don't then my skills in one area get rusty as I focus solely on the other area.  To prevent this, I'm thinking of keeping this in mind every day and structuring my day to do work on all four technologies, every single day, so that my skills never get rusty in any particular technology, and also, so that I can keep leveling up all four skills in order to create beautiful things.  Knowing how to solve algorithms doesn't help me create beautiful web pages, in and of itself.  Knowing how to make wonderful site layouts doesn't help me make a website interactive, which I need to be able to do.  The point is, the four technologies are extremely limited when used independently, even if someone is an expert at one particular technology.  These technologies shine when they are used in combination with one another.

So, that's what I've got to do to reach the next level.  I need to invest daily into my skills in each technology.  Duckett's books, as well as Treehouse and FCC, combined with each other, will forge me into a great front end developer, I just have to structure my days to utilize all these sources in an efficient manner.


We went over .join() and .concat(), which I've gone over before, join joins items in an array into a string divided by whatever you place in the parentheses (in quotes), while concat creates a new array combining the two arrays called.

I watched a video by Quincy Larson, the founder of Code Camp.  One of the interesting things is that FCC will soon have an 

To access an item in an inner array, the code is like so:

theArray[0][1]

The 0 is the index in the outer array, while the 1 is the index in the inner array.  O.k., now I'm watching a video on JavaScript objects.  I might be able to solve the bonfire after completing this course on objects on Treehouse.

Objects are made up of key and property pairs.  To create an object, we assign an object literal to a variable.  We do so with curly braces, like so:

myObject = {};

So, it's just like an array, except with curly braces instead of brackets.  Here's an example:

myObject {
  name: "Jack",
  grades: [80, 85, 90, 95]
};

Notice the comma after the string, and also notice there is no comma after the last property, the array.  We should place each key and property pair on its own line, and indent the key on each line.  We went over how to access properties in an object.  Objects use keys to access their properties.

myObject['name'] and myObject.name would both access "Jack"

The code below would change name to "Paola":

myObject.name = "Paola";

The code below would add a new key and property pair:

myObject.height = "5 feet 2 inches";

This function prints the message entered as a parameter to the HTMl document:

function print(message) {
  var div = document.getElementById('output');
  div.innerHTML = message;
}

You would just store the string inside a variable called message, for example.


SUMMARY OF CODING SKILLS

Total Treehouse Points: 5,449

Treehouse Points by Subject Matter (Miscellaneous not included): 
HTML:                                663 
CSS:                                1,599 
Design:                            1,193 
Development Tools:            747 
JavaScript:                      1,184

Treehouse Ranking (%): "You have more total points than 93% of all students."

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)
Console Foundations
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
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers 

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 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.


Hours Spent Coding Today: 4
Total Hours Coding: 716

Tuesday, October 27, 2015

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

Sunday, October 25, 2015

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