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