Day 197: FCC, Completed the "Wikipedia Viewer" Project!

All right, so today is day 7 of my 7 day, 12 hours a day challenge.  I went 6 out of 7 so far, with one day only studying 10.5 hours, but I made up for that with several other days over 12, including one at 14.5.  So all in all, it was a great week.

Now, I would really like to top off this week with the completion of the wikipedia viewer project from FCC.  I was stuck on that project for quite a while before taking a break on it to delve into other areas of the front end on Team Treehouse, and it would be a nice cherry on top to finish off the week.  One of the courses I took at Team Treehouse this week was on Ajax, and it covered jsonp and how we use it to get around the errors I kept running into while working on my wikipedia viewer project.

So, I'm going to use what I learned over there and give this project another go today!

All right, so first, this screenshot:

That's a good start.  

Okay, that took me several hours, but I SOLVED IT!  

Woohoo!  

Here's a screenshot, with bare bones CSS:

So awesome, my hard work this week paid off!  Yes!  

The main issue that was causing me difficulties was wrapping the request in JSONP, which can also be done by appending callback=? to the end of the request.

Also, I used an app called postman, which was a great help for this challenge, I highly recommend you install it, if you, my one reader (most likely zero) reader, is reading this, haha!

Over the past week, I've become much more comfortable with documentation, I've learned how to navigate it better, and how to quickly find what I'm looking for...it's great!

All right, so now I want to make the wikipedia project look nice, so I'm going to go take a course on flat design...or, I could start working on the next project, the twitch.tv API project...

All right, I went over the twitch.tv API and explored the documentation and the twitch site a bit, but I'm calling it a day.  It's been a long week, and I'm closing it out feeling very accomplished.

Clocking out at 8 hours today, for a total of about 83 hours.  

I'm going to treat myself to a movie, at home, in the comfort of my room, I don't feel liike going out right now, I feel like resting and kicking butt again tomorrow morning once I'm refreshed!

Tomorrow I'll come up with a study plan for the rest of the days before school.  I'm thinking if I put in 8 hours a day, minimum, that leaves me a lot of time to go out for walks and for a swim in the forest, which I love doing, while still allowing me to make solid gains, and I can always study more than the minimum any day I'm so inclined.  

8 hours a day, 7 days a week, would put me at 56 hours a week, but that's a minimum, so I'll end up doing more most weeks, with the exceptions of the one week a month when I spend two or three days down in South Texas visiting my mom and dad, but that's okay, priorities are priorities.  

Also, I may be able to actually get more done in less time, as with only an 8 hour requirement, my mind will always be fresh when I code.

We'll test this strategy out for a week and then reassess depending on the results.

I'm looking forward to tomorrow and a good walk in the forest and a swim at Barton Springs!

SUMMARY OF CODING SKILLS 

Books:                                                                                               Status
"Head First HTML and CSS," by E. Robson & E. Freeman                      Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web DevTrack Complete):                     Status

How to Make a Website                                                                     Complete

HTML                                                                                                Complete

HTML Forms                                                                                      Complete

HTML Tables                                                                                     Complete

HTML Video and Audio                                                                       Complete

CSS Foundations                                                                                Complete

CSS Basics                                                                                         Complete

CSS Layout Techniques                                                                      Complete

CSS Layout Basics                                                                              Complete

CSS Selectors                                                                                     Complete

Responsive Layouts                                                                            Complete

CSS Flexbox Layout                                                                            Complete

Git Basics                                                                                          Complete

Console Foundations                                                                          Complete

Introduction to Programming                                                              Complete

JavaScript Basics                                                                               Complete

JavaScript Loops, Arrays, & Objects                                                   Complete

AJAX Basics                                                                                       Complete

JQuery Basics                                                                                    Complete

Interactive Web pages with JavaScript                                               Complete

Object-Oriented JavaScript                                                                Complete 

Accessibility                                                                                      Complete

Website Optimization                                                                        Complete

Front End Performance Optimization                                                  Complete

Aesthetic Foundations                                                                        Complete                 

Design Foundations                                                                            Complete  

Adobe Photoshop Foundations                                                            Complete

Adobe Illustrator Foundations                                                      66% Complete

Other Courses:                                                                                     Status

HTML and CSS (Codecademy)                                                               Complete

Introduction to Web Dev (The Odin Project)                                         Complete

Web Dev 101 (The Odin Project)                                                    33% Complete

Free Code Camp (FCC)                                                                           Status

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 Front End Development Projects                                              Complete
7. Basic JavaScript                                                                                Complete
8. Object Oriented and Functional Programming                                    Complete
9. Basic Algorithm Scripting                                                                   Complete
10. JSON API's and Ajax                                                                         Complete
11. Intermediate Front End Development Projects                                  Complete

12. Intermediate Algorithm Scripting                                                     Complete

13. Advanced Front End Development Projects                                       On 4 of 6

14. Claim Your Front End Development Certificate

15. Automated Testing and Debugging
16. Node.js and Express.js
17. Git
18. MongoDB
19. API Projects

20. Dynamic Web Application Projects

21. Claim Your Back End Development Certificate

The Coding Boot Camp at UT Austin                                               Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) 

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel) 

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen: http://codepen.io/Adancode/

GitHub: https://github.com/Adancode

LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 8

Total Hours Coding: 1,022

Day 196: Treehouse, JavaScript Objects Course, Constructor Functions, Prototypes, Prototype Chains, Inheritance, and Making a Plan

It's Sunday morning, and as usual for most days in Austin, TX, the weather is great.  Today I'm continuing with the Treehouse course on JavaScript objects.

I'm advancing quite a bit in my studies this week, and with my 7 days, 12 hour plus challenge, I'm on track to hit 88 to 90 hours of studying this week, all tracked on RescueTime, which would make it my most productive week ever.  So I'm thinking the next step is to really solidify my skills by completing the Free Code Camp front end projects, or at least most of them, and also by completing several more projects based on the things I've learned on Team Treehouse.  Then, I can transfer those projects to be viewable on GitHub.  Once I've done that, I need to design and deploy my actual portfolio site, in which I plan on using flat design.  The next step would be to switch the settings on both my Team Treehouse and GitHub account to show that I am looking for work as a Front End Developer, and then simply focusing on leveling up my skill-set.  My main focus right now is learning and applying my learning to projects, and if a taking a position as a front end dev can help me with that focus, and I believe it can, then that's fantastic.

The caveat to all of this is that I'll be enrolling at The Coding Boot Camp at UT Austin on April 19th, and I plan on excelling in it.  That means that even if I take a front end position now, which I may very well decide not to pursue depending on the totality of any potential offers, I still plan to be a full stack developer by the time I graduate from the boot camp in October.  I also in no way plan on the boot camp being my only source for back end learning, as my other learning sources, among them Free Code Camp, Team Treehouse, and Udemy, also have have coursework in that area of study, which I intend to make full use of.  

As I consider various offers that come in, I have to keep in mind all these variables, so as to plot out a career path that is a great fit.  At the moment, I'm thinking I want to be a full stack dev with a focus on the front end, but as I start learning the back end, this may change if I become enamored with it for one reason or another.  In sum, the future is wide open and bursting with opportunities for personal and professional growth.

I feel like things are coming together, and I'm really proud of myself for staying focused on this path, although to be honest, the fact that I enjoy both the theory and the practice of web development has made the whole journey exponentially more rewarding than it would be otherwise.  

I love this.

All right, let's get on with today's activities.  I'm going over constructor functions now.  Here's an example:

function Contact(name, email) {

  this.name = name;
  this.email = email;

}

I went over these in Mark Myers' book, "A Smarter Way to Learn JavaScript."  Here's how we create a new contact instance (an instance is a specific realization of a particular type or object):

var contact = new Contact("Andrew", "andrew@teamtreehouse.com");

var contact = new Contact("Jane", "jane@teamtreehouse.com");

Note the use of the keyword "new" and the capitalization of the constructor function's name.

Note that constructor functions are like other functions in that their lines end with semicolons, as opposed to objects, where lines end in commas.  Also note that we use equals signs instead of colons, like in a function as opposed to an object.  Check out my dice constructor function!

function Dice(sides) {
  this.sides = sides; 
  this.roll = function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);
var dice20 = new Dice(20);

dice6.roll();
dice10.roll();

dice20.roll();

The last three are how you can call the various dice.  This is a better way to do that:

function diceRoll() {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

function Dice(sides) {
  this.sides = sides; 
  this.roll = diceRoll;
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);
var dice20 = new Dice(20);


dice6.roll();

The reason is because the other way, every time we call the dice6.roll(), a new function is created in the this.roll property, whereas if we do it the second way, the this.roll property calls a function already created outside of it, saving memory. 

The issue with doing things the second way, then is that we have a function floating around not connected (not literally typed within, although it is connected) to the constructor function, and it's then hard to keep track of which external function works with what method call.  JavaScript provides a way to organize our code with constructor functions, and that's with a special property called prototype.  The prototype on a constructor function is an object like an object literal, and it can be added to, like this (using the previous example):

Dice.prototype.roll

And we can assign a function to it, like so:


function Dice(sides) {
  this.sides;
}

Dice.prototype.roll = function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

var dice6 = new Dice(6);
var dice10 = new Dice(10);

Now, when we do:

console.log(dice6.roll === dice10.roll);

We get true, where as before, the output would be false!  Haha!   Fantastic!  Here's the old example if you want to see the false output:

function Dice(sides) {
  this.sides = sides; 
  this.roll = function diceRoll() {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);
var dice20 = new Dice(20);


dice6.roll();

console.log(dice6.roll === dice10.roll);

And then here's the in between example, which yields true, but is difficult to keep track of:

function diceRoll() {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

function Dice(sides) {
  this.sides = sides; 
  this.roll = diceRoll;
}

var dice6 = new Dice(6);
var dice10 = new Dice(10);

var dice20 = new Dice(20);

console.log(dice6.roll === dice10.roll);

Very, very cool stuff!  In the "Object-Oriented JavaScript" course, I'm going over and over one video, which is in the second section of the course, "Constructor Functions and Prototypes."  The video's title is "Methods with Prototypes," and I just thought I'd note the title in case I ever want to go back to it.  The instructor, Mr. Chalkley, is really growing on me, he's able to focus intensely and really convey what needs to be conveyed, it's great seeing him in action.  Here's how the prototype example works, from Treehouse:

"JavaScript is known as a prototypal programming language.  Meaning, you can use prototypes as templates for objects.  For values and behavior to be shared between instances of objects.  So instead of the roll method being defined for every instance, when we construct one, it is shared between all instances through the template or prototype.  So what happens when we call dice.row now?  Well there's where the JavaScript interpreter tries to call it on the object itself.  If it's not there, it will check its prototype.  If the roll is there, it will call the method in the context of that instance." 

Here's the version referred to in the paragraph above, the ideal version, so we can follow the code along with the text:

function Dice(sides) {
  this.sides;
}

Dice.prototype.roll = function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

var dice6 = new Dice(6);
var dice10 = new Dice(10);

console.log(dice6.roll === dice10.roll);  // That logs true!  

That's great.

Here's another example, the original object:

function Monster(name) {
  this.name = name;
  this.health = 100;
  this.takeDamage = function (){
    this.health--;
  }

}

And the new and improved version setting the method via the use of a prototype:

function Monster(name) {
  this.name = name;
  this.health = 100;
}

Monster.prototype.takeDamage = function (){
    this.health--;

}

So far so good.  In this code:

function Animal(breed, noise) {
    this.breed = breed;
    this.noise = noise;
}

 Animal.prototype.makeNoise = function() {
        console.log(this.noise + ", " + this.noise);
}

var chicken = new Animal("Old English Pheasant fowl", "Cluck");

You would make the chicken go "Cluck" by using this code:chicken.makeNoise();Remember that we put the function in a prototype to prevent performance issues, and then once we want to call it, according to the question, we simply call it like we normally would.

Note that when attaching JavaScript scripts at the bottom of the page, attach them in the order you want the scripts to run, but preferably, all your JavaScript is in one file.  

I'm learning about prototype chain and inheritance now.  If we have this Person object:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.fullName = function() {
 return this.firstName + " " + this.lastName; 

};

And this Teacher object:

function Teacher(firstName, lastName, roomNumber) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.room = roomNumber;

}

And we want to modify the Teacher object to inherit from the Person object, we would, in the Teacher constructor function, call the Person constructor, using the call method, and pass in the common attributes, like so:

function Teacher(firstName, lastName, roomNumber) {
  this.room = roomNumber;
  Person.call(this, firstName, lastName)

}

Now to set up the prototype chain for the Teacher prototype to inherit from the Person prototype, we do this:

function Teacher(firstName, lastName, roomNumber) {
  this.room = roomNumber;
  Person.call(this, firstName, lastName)
}


Teacher.prototype = Object.create(Person.prototype);

I'm still a little hazy on all of this, but so far so good.    

I'm working on a quiz project using objects, and I'm going to work on it and on other object-oriented javaScript projects, over and over until I nail this area down.  I see how this kind of programming can make for some very useful code, and I want to take full advantage of it.  That will take a lot of focused effort, and that sounds great to me.

I was a bit tired today and I only studied 10.5 hours.  That said, I completed the Front End Web Development Track on Team Treehouse!

Great day!

SUMMARY OF CODING SKILLS 

Total Treehouse Points: 12,051 (miscellaneous not included) 

HTML:                             2,009 

CSS:                                3,378 

Design:                            1,193 

Development Tools:         1,344

JavaScript:                      3,264

Treehouse (and other) Courses Completed:
How to Make a Website
HTML
HTML Forms
HTML Tables
HTML Video and Audio
CSS Foundations
CSS Basics
CSS Layout Techniques
CSS Layout Basics
CSS Selectors
Responsive Layouts
CSS Flexbox Layout
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
AJAX Basics
JQuery Basics
HTML and CSS (Codecademy) 
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)

Books Read or in Progress:                                                                     Status
"Head First HTML and CSS," by E. Robson & E. Freeman                           Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                               Complete

"HTML and CSS," by Jon Duckett                                                             Complete

"JavaScript and JQuery," by Jon Duckett                                                 Complete

Free Code Camp (FCC)                                                                            Status

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                                                Complete

10. JSON API's and Ajax                                                                          Complete
11. Intermediate Algorithm Scripting                                                      Complete

12. Intermediate Front End Development Projects                                   On 3 of 6

13. Claim Your Front End Development Certificate

14. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects

20. Dynamic Web Application Projects

21. Claim Your Back End Development Certificate

The Coding Boot Camp at UT Austin                                             Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) 

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel) 

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen: http://codepen.io/Adancode/

GitHub: https://github.com/Adancode

LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 10.5

Total Hours Coding: 1014

Day 195: Treehouse, Aiming for Completing the Front End Track and Crossing the 1000 Hours of Coding Mark Today!

All right, I got a really great night's sleep, I feel completely refreshed and ready to take on the day!  Today is the 5th day of my 12 hours a day for 7 days code study challenge, and so far I've completed my study goal every day!  

I'm on track to:

1.  Complete the 5th day of my 12 hours a day, seven day study challenge.
2.  Complete the Front End Web Development Track on Team Treehouse, 
3.  Cross the 1,000 hours of coding mark.
4.  Earn 1st place on both the badge AND points leaderboard on Team Treehouse

That's a fair amount of positive accomplishments I can achieve today IF I put in the work, and IF my competitors on the leaderboard don't out-study me today, haha.

All right, let's get to it!  #embraceTheStruggle  :)

Ooooh, Justan Human earned several badges, he/she's in 1st place again!  Let's get to it, then!

So, I started the day working with the <canvas> element, which is new to HTML5.  I'm working on a drawing app!

Wow.  We're working on some really cool stuff now, jQuery is amazing.  We used .toggle(), which is like a blend of .show() and .hide(), which triggers one or the other depending on if the item is hidden or shown.  We used the .on() jQuery method to allow us to target elements that are not even in existence yet.  Here's the example:

//When clicking on control list items
$(".controls").on("click", "li", function(){
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");

});

Note that we did not target ".controls li" initially, we actually targeted ".controls" initially, then specified the "li" elements as the second parameter for .on(), and "click" as the first parameter.

This:

document.getElementByTagName("canvas")[0]

Is equivalent to:

$("canvas")[0]

The code above (either) gets the first element in the array of canvas elements.  The reason we would do that is because that method has a special method that we can call on it.  We do this:

var context = $("canvas")[0].getContext("")("2d");

Here's part of the code we used to draw a square on the canvas:

//On mouse events on the canvas
  //Draw lines
  context.beginPath();
  context.moveTo(10, 10);
  context.lineTo(20, 10);
  context.lineTo(20, 20);
  context.lineTo(10, 20);
  context.closePath();

  context.stroke();

See, my little square is in the upper left:

That's great!

Note that you can view global objects in the console by simply entering their name into it.  This was an interesting part of the code:

//On mouse events on the canvas
$canvas.mousedown(function(e) {
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e) {
  //Draw lines
  if(mouseDown) {
  context.beginPath();
  context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
  context.lineTo(e.offsetX, e.offsetY);
  context.strokeStyle = color;
  context.stroke();
  lastEvent = e;
  }
}).mouseup(function(){
  mouseDown = false;

});

The .mousedown() method came in handy.  We added the last few lines of code to fix a bug caused when a user left the canvas while still clicking on the mouse and re-entered the canvas:

//On mouse events on the canvas
$canvas.mousedown(function(e) {
  lastEvent = e;
  mouseDown = true;
}).mousemove(function(e) {
  //Draw lines
  if(mouseDown) {
  context.beginPath();
  context.moveTo(lastEvent.offsetX, lastEvent.offsetY);
  context.lineTo(e.offsetX, e.offsetY);
  context.strokeStyle = color;
  context.stroke();
  lastEvent = e;
  }
}).mouseup(function(){
  mouseDown = false;
}).mouseleave(function(){
  $canvas.mouseup(); 

});

This is an excellent project. 

The next project is a To Do list.  We discussed the window object.  This selects the second span item:

var lastName = document.getElementsByTagName("span")[1];

That's useful for traversing the DOM.  Here's something interesting, if we do this:

var addTask = function() {
  console.log("Add task...")
  //When the button is pressed
  //Create a new list item with the text from #new-task:
    //input (checkbox)
    //label
    //input (text)
    //button.edit
    //button.delete
    //Each elements, needs modified and appended

}

//Set the click handler to the addTask

addButton.onclick = addTask();

The addTask() function will run immediately, whereas if we do this:

var addTask = function() {
  console.log("Add task...")
  //When the button is pressed
  //Create a new list item with the text from #new-task:
    //input (checkbox)
    //label
    //input (text)
    //button.edit
    //button.delete
    //Each elements, needs modified and appended

}

//Set the click handler to the addTask

addButton.onclick = addTask;

The addTask function will only run after the click.  So in these cases, we want to omit the parentheses.  Also, .onclick is different from .click().  The we used .children, which targets the children of an element.  We used the .querySelector, which returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors:

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
  //select taskListItem's children
    var checkBox = taskListItem.querySelector("input[type=checkbox]");
    var editButton = taskListItem.querySelector("button.edit");
    var deleteButton = taskListItem.querySelector("button.delete");
    //bind editTask to edit button
    editButton.onclick = editTask;
  
    //bind deleteTask to delete button
    deleteButton.onclick= deleteTask;
    //bind checkBoxEventHandler to the checkbox
  checkBox.onChange = checkBoxEventHandler;

}

We used the code below to create elements:

var newDiv = document.createElement("div");

var newSpan = document.createElement("span");

I'm really liking jQuery.  So I went to the Treehouse Leaderboards to check my ranking, and it looks like Treehouse resets the leaderboards sometime on midday on Saturdays, like at 6 p.m. or so.  I'm not sure what the logic is behind that, as the traditional week in the U.S. ends on Sundays, but nonetheless, there it is, so I won't know how I ranked.  That's cool, though, my main focus today will be completing the front end web dev track then, and completing my 12 hours of study (two more days left in my 7 day challenge).

We use this:

var anchor = document.querySelector("a");

//Add the class to the classList "selected"

  anchor.classList.add("selected");


//Toggle the class "live"

To add a class of "selected" to the anchor element.

Now I'm going over HTML Video and Audio!  Here's code for video:

 <video src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4" controls></video>

The controls attribute is  boolean value, so it doesn't need to be set to anything.  You could remove controls and have autoplay and then the video will play automatically, or you could include both, and then videos would play automatically but also have controls.  Some browsers need .ogg files to function, so we would add a version of that by adding an ogg file and changing the typ to ogg.

 <h2>Video Example</h2>
      <video controls>
      <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
       <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg">
      </video>

I've gone over this before, in Jon Duckett's book, but I have to complete this course in order to get my front end web development track on Treehouse, and it's a nice refresher.  I do feel like everything is starting to come together.  Here's an audio file:

<h2>Audio Example</h2>
      <audio controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">

      </audio>

All right.  Basic stuff.  I think at this point, my favorite area of study is jQuery and JavaScript DOM manipulation, I just find it really interesting what those technologies allow us to create.

VLC (or Adobe Media Encoder) is software we can use to convert a video file to a format that we need.  This software also allows you to make certain selections during the file conversion process that allow you to decrease the size of the file.

I learned how to caption video, it was pretty simple.  I learned that because HTML video is still new, we use software like MediaElement.js to provide a skin for our video, and more importantly, to smooth out cross-browser inconsistencies.

All right, I'm on the final course required for completion of the front end track on Treehouse!  So, this course is titled "Object-Oriented JavaScript," and that's great, because I really enjoy working with objects.

Note that object properties are always strings, whether you put quotes around them or not.  If you don't, the JavaScript interpreter will interpret them as strings anyways.  Even though we can create object properties with names like "the car" which has a space in the middle, as long as we wrap it in quotes, we are strongly discouraged to do so to avoid issues (for example, you would have to use bracket notation for "the car" as dot notation would not allow the space).

Here's a dice roll function:

function diceRoll() {
  var sides = 6;
  var randomNumber = Math.floor(Math.random() * sides) + 1;
  console.log(randomNumber);

}

And here's an object we worked with, from the code above:

var dice = {
  roll: function diceRoll() {
  var sides = 6;
  var randomNumber = Math.floor(Math.random() * sides) + 1;
  console.log(randomNumber);
  }

}

To get a printout of that function on the console, we could enter:

dice.roll

BUT if we wanted to get a printout of the result of that function, in that case, we could enter:

dice.roll()

The output would be a number from 1 to 6.  Normally, you would see the same code like this, with an anonymous function:

var dice = {
  roll: function () {
  var sides = 6;
  var randomNumber = Math.floor(Math.random() * sides) + 1;
  console.log(randomNumber);
  }
}

If we do this:

var dice = {
  sides: 6,
  roll: function () {
  var randomNumber = Math.floor(Math.random() * dice.sides) + 1;
  console.log(randomNumber);
  }
}

And then set dice.sides to 20, for example, and then call the method above like so:

dice.roll();

The result will be a number between 1 and 20.  We can also use this (that's so meta, no pun intended):

var dice6 = {
  sides: 6,
  roll: function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  console.log(randomNumber);
  }

}

The this keyword refers to the object where the method is called, in this case dice6.  So:

dice6.roll()

Would generate a number from 1 to 6.

This is great (pun intended this time), hahaha!  We used this code to make a diceroller:

function printNumber(number) {
  var placeholder = document.getElementById("placeholder");
  placeholder.innerHTML = number;
}

var button = document.getElementById("button");

button.onclick = function() {
  var result = dice10.roll();
  printNumber(result);
};

var dice10 = {
  sides: 10,
  roll: function () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return randomNumber;
  }

}

Sweeeeeet!  Check out this code, for a calculator object:

var calculator = {
  sum: 0,
  add: function(value) {
    this.sum += value;
  },
  subtract: function(value) {
     this.sum -= value;
  },
  multiply: function(value) {
     this.sum *= value;
  },
  divide: function(value) {
     this.sum /= value;
  },
  clear: function() {
    this.sum = 0;
  }, 
  equals: function() {
    return this.sum;
  }

}

It's a good bare bones structure to start with if you want to create a calculator.  All right, it's midnight, and it's been a long day, but I met my 12 hour goal and I almost finished the front end track, I'm thinking tomorrow morning, and I'll be done with it.

I'm calling it a day, today was awesome!  :)

SUMMARY OF CODING SKILLS 

Total Treehouse Points: 11,479 (miscellaneous not included) 

HTML:                             2,009

CSS:                                3,378 

Design:                            1,193 

Development Tools:         1,344

JavaScript:                      3,071

Treehouse (and other) Courses Completed:
How to Make a Website
HTML
HTML Forms
HTML Tables
CSS Foundations
CSS Basics
CSS Layout Techniques
CSS Layout Basics
CSS Selectors
Responsive Layouts
CSS Flexbox Layout
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% done, switched focus from design to web dev)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
AJAX Basics
JQuery Basics
HTML and CSS (Codecademy) 
Introduction to Web Dev (The Odin Project)
Web Dev 101 (The Odin Project, 33% done, switched to FCC for larger community)

Books Read or in Progress:                                                                     Status
"Head First HTML and CSS," by E. Robson & E. Freeman                           Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                               Complete

"HTML and CSS," by Jon Duckett                                                             Complete

"JavaScript and JQuery," by Jon Duckett                                                 Complete

Free Code Camp (FCC)                                                                            Status

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                                                Complete

10. JSON API's and Ajax                                                                          Complete
11. Intermediate Algorithm Scripting                                                      Complete

12. Intermediate Front End Development Projects                                   On 3 of 6

13. Claim Your Front End Development Certificate

14. Advanced Algorithm Scripting
15. Automated Testing and Debugging
16. Git
17. Node.js and Express.js
18. MongoDB
19. API Projects

20. Dynamic Web Application Projects

21. Claim Your Back End Development Certificate

The Coding Boot Camp at UT Austin                                             Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery) 

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)

Week 11-14: Server Side (Node.js, MySQL, MongoDB)

Week 15-18: PHP (WordPress, CodeIgniter, Laravel) 

Week 18-21: Full Stack Coding
Week 22-24: Final Project

CodePen: http://codepen.io/Adancode/

GitHub: https://github.com/Adancode

LinkedIn: https://www.linkedin.com/in/adamcamacho1
Team Treehouse: https://teamtreehouse.com/adamcamacho
Free Code Camp: http://www.freecodecamp.com/adancode

Hours Spent Coding Today: 12

Total Hours Coding: 1003.5