Javascript – Sales Tax Program

function tax (price, percent) {
		return parseFloat((price*percent/100).toFixed(2));
	}
	var randomItem = 9.85;
	var salesTax = 7.5;
	var total = randomItem + tax(randomItem, salesTax);
	console.log(total);

 

This is a program on how to calculate sales tax with javascript, because handling floats is a bit weird with javascript.

How to Benchmark Your Javascript?

This is a quick tutorial on how to benchmark your javascript with console.time(“arg”) and console.timeEnd(“arg”)
You would use developer tools to see how fast your script runs.
javascript_benchmark

Example Code:

Array.prototype.proto1 = function(){};
Array.prototype.proto2 = function(){};
Array.prototype.proto3 = function(){};
Array.prototype.proto4 = function(){};
Array.prototype.proto5 = function(){};

var objectLateral = {
  arrayBank: ['Some random string', 'Other String', 'More Stringy Spaghetti']
};

function runThisCode(){
  var things = objectLateral.arrayBank,
      list = "";
	console.time("time");  

  for(var i = 0, ff = things.length; i < ff; i++){
    list += (things[i] + " ");
  }

  console.timeEnd("time");
  return list.trim();
}

runThisCode();

Returning Functions and Immediate Invocation

// ride and wait time
var parkRides = [["birch bumpers", 40], ["dank bumpers", 36], ["trap bumpers", 41], ["wtf bumpers", 43],];
// fast pass for faster line
var fastPassQueue = ["birch bumpers", "dank bumpers", "trap bumpers", "wtf bumpers"];
// allRides arg - this parameter will be the array of the rides and their wait time
// passrides arg - this will be the array of the nxt available fast pass rides
// pick arg - this will be the actual ride for which our customer would like a ticket!
function buildTicket(allRides, passRides, pick) {
	if(passRides[0] == pick){
		var pass = passRides.shift();
		return function() {alert("Quick! You've got a fast pass to " + pass +"!"); 
	};
	} else {
		for(var i =0; i<allRides.length;i++){
			if(allRides[i][0]==pick){
				return function () {alert("A ticket is print for " + pick +"!\n" + "Your wait time is about " + allRides[i][1] + " minutes.");
				};
			}
		}
	}
}
var wantsRide = "birch bumpers";
// self invoking function when you add () at the end off the function
buildTicket(parkRides, fastPassQueue, wantsRide)();

 

This is hypothetical fast pass system created with functions, arrays, conditional, and for loop statement. All written javascript.

Reserved Characters in URLs – PHP

These are list of following of reserved characters for links:

! # $ % & ( ) * + , / : ; = ? @ [ ]

These characters need to be encoded so it doesn’t interfere with the function of the URL.

These characters will turn into %21 hexadecimal characters.

A fix for this is

<?php
	urlencode($string);

?>

 

URLencode

  • Letters, numbers, underscores, and dash are unchanged
  • Reserved characters become % + 2 digit hexadecimal
  • Spaces become “+”
  • Use this for query string after that ?

rawurlencode

  • rawurlencode should only be used for file path
  • path is the part before “?”
  • spaces must be %20
  • it’s newer

Javascript – Magic 8 Ball Script

This is a magic 8 ball program written in html and javascript. So it’s very lean fast and quick. You are free to use this script because it’s open source I made this solely for fun. So fork it. This is basically a random answer generator which uses random number and switch statement to be written. Have fun. 😉

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Magic 8 ball</title>
</head>
<body>
	<input type="text" placeholder="Ask your question?">
	<button onclick="myFunction()">Answer</button>
	<p id="demo"></p>

	<script>
function myFunction() {
	function getRandomArbitrary(min, max) {
	return Math.floor(Math.random() * (max - min) + min);
	}
	var num = getRandomArbitrary(1,6);

	switch(num) {
	    case 1:
	        answer = "Yes";
	        break;
	    case 2:
	        answer = "No";
	        break;
	    case 3:
	        answer = "Try Again";
	        break;
	    case 4:
	        answer = "Outlook not so good";
	        break;
	    case 5:
	        answer = "Most definitely!";
	        break;
	}
	document.getElementById("demo").innerHTML = answer;
}
	</script>
</body>
</html>

 

Magic 8 Ball Demo

jQuery – $.each vs $.map jquery

We are going to go over what are the difference between $.each and $.map in jquery. Both are like foreach loops, but utilized differently.

The each method is meant to be an immutable iterator, where as the map method can be used as an iterator, but is really meant to manipulate the supplied array and return a new array.

Another important thing to note is that the each function returns the original array while the mapfunction returns a new array. If you overuse the return value of the map function you can potentially waste a lot of memory.

<script>
    var cities = ['Paris', 'London', 'Orlando'];
    
    $.each(cities, function(index, city){
        var result = city + " " + index;
        console.log(result);
    });
    // paris 0
    // london 1
    // orlando 2

    $.map(cities, function(city, index){
        var result = city + " " + index;
        console.log(result);
        return result;
    });
    // paris 0
    // london 1
    // orlando 2

</script>

I made my first Game With TeamTreehouse and Unity Engine

I made my first game with the Teamtreehouse course. It’s basically a game based on C# and coding. He goes over how to write a game in the Unity Engine step by step. I added my own functionality to game such as quitting the game with esc. In addition, starting the game with up, and return key. Nick doesn’t go over that.

The course goes over programming, mixing, audio, and building the game. The only thing the class doesn’t go over is how to create 3D graphics, you would probably need a 3D artist to do that. The assets are provided such as the frog, bird, flies, map, and audio. This game is basically a pick up the coins kind of game, but there is an enemy the bird. The bird can eat you and you lose.

unityAudio

My setup for this course is two dual monitors and i7 computer. I would not be able to follow these courses as fast if I didn’t have dual monitors. Basically, I would have one side with the videos and one side with me following along and working.

So do I recommend this course and Teamtreehouse for programming? Yes, I’m fan. But don’t be afraid to supplement your learning with youtube, books, and other online courses. Learning never stops in the programming world. I can’t recommend enough to learn the core languages php, mysql, ruby, python, css, html, and javascript. Libraries and frameworks come and go.

Since, dabbled in other programming languages figuring out object orient programming was kind of tricky. I didn’t understand what was happening under the hood, but I used the scripts anyway and made it work. The text editor in Unity Engine is great. I didn’t have to debug much. Intellisense rocks.

Anyways. If you found this review awesome. Please use my referral link below to learn code first 2 weeks free:
http://referrals.trhou.se/jasonchan2

FrogGame
You can try out my game below:
Windows Build
Mac Build

Why Sass is Awesome?

Why is sass awesome?

It makes css work way easier and faster. You have to have ruby on rails installed and the sass gem installed.

First install sass with this command (you only need to do it once)
gem install sass

Type in CLI first navigate to correct director with cd

sass --watch .

to compile .scss into .css

Below is to install the bourbon library for css
gem install bourbon

bourbon library

scss advanced code

@mixin box($size, $color, $display: block) {
	width: $size;
	height: $size;
	background: $color;
	display: $display;
}

a {
	@include box($size: 10px, $color: blue);
}

// for the list don't forget ... example below members... for a list /w out is static
@mixin band($name, $members...) {
	@each $member in $members {
		.#{$name}.#{$member} {
			background: url("images/#{$name}/#{$member}.jpg");
		}
	}
}

div {

	margin: 0px 0 0 10px;
}

@include band(radiohead,thom, jonny, colin, phil);
@include band(nin, cuties);

It compiles into .css:

a {
  width: 10px;
  height: 10px;
  background: blue;
  display: block; }

div {
  margin: 0px 0 0 10px; }

.radiohead.thom {
  background: url("images/radiohead/thom.jpg"); }

.radiohead.jonny {
  background: url("images/radiohead/jonny.jpg"); }

.radiohead.colin {
  background: url("images/radiohead/colin.jpg"); }

.radiohead.phil {
  background: url("images/radiohead/phil.jpg"); }

.nin.cuties {
  background: url("images/nin/cuties.jpg"); }

Hello World in React Js

This is hello word app created with react.js This is my first simple script. Yes, I know it’s easier to do this in html. But I wanted to do this in JSX to make thing more complicated.

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jsx</title>
</head>
<body>
	
	<!-- container node -->
	<div id="jsx">
		
	</div>
	<!-- container node -->
	<div id="dom">
		
	</div>
	<script src="https://fb.me/react-0.11.1.js"></script>
	<script src="https://fb.me/JSXTransformer-0.11.1.js"></script>
	<script type="text/jsx">
	/** @jsx React.DOM */

	var MessageBox = React.createClass({

		render: function(){
			return (
				<div className="container">
				<h1>Hi</h1>
				<SubMessage />
				</div>

				);
		}
	});

	var SubMessage = React.createClass({
		render: function(){
			return (
			<small>Sub message</small>
			);
		}
	});

	var reactComponentJSX = React.renderComponent(
		<MessageBox />,
		document.getElementById('jsx')
		);
	</script>
</body>
</html>