Code Breakdown: Object Oriented JS Pt. 2

What seems like a long time ago I posted this article which featured one of my early attempts at OOJS. Of course in the article I mentioned that we would be going over every detail of it, and be improving on it afterwards. Well, my schedule got busy and I forgot all about this one. Luckily though I remember now, and I’m in a really good JS mood. So without anymore waiting, lets get to this code!

 

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.