Today our quickie is on sticky sidebars. Its a pretty sloppy one this time around because I didn’t have the time I’d normally take to write this one, so I’ll update it in a part 2 post. Until that time comes, enjoy!

The Premise

So as I first began my trials with OOJS, really OOP in general, I came up with an idea that it would be much easier to learn if my learning would involve automating a task for myself. While I was having this eureka moment with my coding experience I was doing a little project management  work for client work I was doing at the time. If you add these two things together, then what do you get? You get a developer who writes the bare functionality of an app that can manage the time and budget of my projects for me.

Amazing right!

The Code

function Project(projName,endingAmount,totalHours,days,rate){
	this.projName = projName;
	this.endingAmount = endingAmount;
	this.totalHours = totalHours;
	this.days = days;
	this.rate = rate;
	this.hoursUsed = function(hours){
		var hoursToday = this.hoursToday;
		hoursToday += hours;
		var hoursLeft = this.totalHours - hoursToday;
		console.log("You've worked " + hours + "today");
		console.log("You've worked " + hoursToday + " total.");
		console.log("You have " + hoursleft + " remaining.");
	}
	this.hoursRemain = function(hours){
		console.log(this.totalHours);
	}
	this.amountLeft = function(){
		this.amountLeft = this.endingAmount - (this.hoursUsed * rate);
		if(this.amountLeft > 0){
			console.log(this.amountLeft);
		}
		else{
			console.log("You workd overtime for the amount of " + Math.abs(this.amountLeft));
		}
	}
}

If you want to play around with it yourself, just pop it in your favorite browser debug tool’s console and have fun! Of course its broken by the way

The Breakdown

Now that all the cordial introductions are over, lets get to the breakdown!

Constructor Class

function Project(){

}

The Project function acts as a object constructor class. A constructor class is a function that is used to create new instances of an Project object. See below for examples.

var AT&T = new Project();
var MIEN = new Project();
var Apple = new Project();

Object Attributes

this.projName = projName;
this.endingAmount = endingAmount;
this.totalHours = totalHours;
this.days = days;
this.rate = rate;

The Project class takes in 5 parameters when trying to create a object, and these parameters are taken to be used as attributes of an instance of a project. These instance attributes are declared by setting a parameter to an instance of this.{attribute}.

Object Methods

this.hoursUsed = function(hours){
		var hoursToday = this.hoursToday;
		hoursToday += hours;
		var hoursLeft = this.totalHours - hoursToday;
		console.log("You've worked " + hours + "today");
		console.log("You've worked " + hoursToday + " total.");
		console.log("You have " + hoursleft + " remaining.");
	}
	this.hoursRemain = function(hours){
		console.log(this.totalHours);
	}
	this.amountLeft = function(){
		this.amountLeft = this.endingAmount - (this.hoursUsed * rate);
		if(this.amountLeft > 0){
			console.log(this.amountLeft);
		}
		else{
			console.log("You workd overtime for the amount of " + Math.abs(this.amountLeft));
		}
	}

The Project class has three methods for its object instances(hoursUsed, hoursRemain, and amountLeft). These methods are nothing more than object specific functions that can be called on an object created with the Project constructor. In theory the object methods used here do the following:

• the hoursUsed function takes in the amount of hours you used and reports it to you with your total and how much you have left
• the hoursRemain function tells you how many hours you have left, and
• the amountLeft function lets you know how much is left on the projects budget.

What’s Next

Next up in the article that will be a lot sooner than this one is from the series starter post, we will go over why this Project constructor isn’t working and how to fix it.

The quote of the week is,”Challenge and difficulties are what make a journey memorable.” – Jamal Jackson

The song of the week is Again&Again by Holly Brook(Skyler Grey)

Creating tutorials is great even outside passive income because it gives you a chance to grow your name, showcase your talents to potential clients, and gets you active in the community. This is enough talking about doing, lets get to it!

Continue reading this article on 1stwebdesigner

The quote of the week is “Individuality is an overcoming of pain derived being uninfluenced and full acceptance.” – Jamal Jackson

Now instead of a song, I’m going to put a short film up. Its a great piece by the people over at WingSpan Pictures out of Burbank, CA. It’s a great piece, and I hope you enjoy viewing it as well.

That is why in this post we will do a quick crash into JS cookies. Sounds delicious right? Let’s go!!!!!!

What Are Cookies?

Cookies are delicious baked goods that are great when oatmeal rasion! Okay seriously cookies are a tracking method used to give off a temporary trail of where a user of a website has been. For an example think of when you login to a site, it can be anything from Amazon to your favorite online shop. After you’ve logged in go ahead and delete all your cookies. Now when you go back to that site you’ll likely be logged out, don’t worry if your not because we’ll be covering that later.

What you just did was when you removed your cookies is delete the temporary data that they hold. Now don’t cookies sound fun? Let’s get to making some.

Creating Cookies

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  createCookie(name,"",-1);
}

Well that looks pretty fun and easy right? Thanks to the people at Quirksmode.com. Okay let’s take some time and go over what is happening with all these JS functions.

createCookie

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

What this function here is doing should be pretty obvious from its name, but lets take a minute to break down how this is happening. It takes in three values for the cookie: name, value, and days. What this does is set what you’ll name the cookie, what value the cookie should store, and how long it should last. So everything here should be pretty straightforward, except for what is going on with the days value. So let’s break that down a little further.

Okay so when you want to first get minutes. As we all know there are 60 seconds in a minute, but in development we count with milliseconds and there are 1000 milliseconds in a second. So that explains the 60*1000. Moving on to the 60 next to it, that is used to get the number of milliseconds in an hour. The 24 after that is used to get the number of milliseconds in a day, and the days value you passed into the function is the number of days you want this cookie to last.

readCookie

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

What readCookie is doing here is taking the name of the cookie your trying to find the value of of, it then uses that to search through all cookies that are set in your browser by first storing them into an array and searching through that array. If nothing is able to be found, this function will return null.

eraseCookie

function eraseCookie(name) {
  createCookie(name,"",-1);
}

The eraseCookie function is a great example of DRY(Don’t Repeat Yourself) programming. It is using the already defined function createCookie to delete cookies by passing in the name of the cookie, setting its value to an empty string, and giving it the amount of days for it to last to a negative number so it will be expired.