Tanisha Singh
Created January 31, 2015

Convert This!

A simple temperature converter app that allows you to convert between Fahrenheit, Celsius, and Kelvin with ease!

Full instructions provided35
Convert This!

Story

Read more

Code

file_10697.js

JavaScript
Source Code
var THEME = require('themes/flat/theme');
var BUTTONS = require('controls/buttons');
var CONTROL = require('mobile/control');
var KEYBOARD = require('mobile/keyboard');

var whiteSkin = new Skin( { fill:"white" } );
var labelStyle = new Style( { font: "bold 30px", color:"#87CEEB", width: 100 } );
var conStyle = new Style( { font: "bold 40px", color:"#87CEEB", width: 100 } );
var fieldStyle = new Style( { font: "bold 25px", color:"white" } );

var input = "none";
var toConvert = ""
var conversion = "";
var outputString = "";
var mainContain = 0;
var touched = false;


var nameInputSkin = new Skin({ borders: { left:2, right:2, top:2, bottom:2 }, stroke: 'gray',});
var fieldStyle = new Style({ color: 'black', font: 'bold 24px', horizontal: 'left', vertical: 'middle', left: 5, right: 5, top: 5, bottom: 5, });
var fieldHintStyle = new Style({ color: '#aaa', font: '24px', horizontal: 'left', vertical: 'middle', left: 5, right: 5, top: 5, bottom: 5, });
var whiteS = new Skin({fill:"white"});
							
var myField = Container.template(function($) { return { 
	width: 200, top: 70, height: 36, skin: nameInputSkin, contents: [
		Scroller($, { 
			left: 4, right: 4, top: 4, bottom: 4, active: true, 
			behavior: Object.create(CONTROL.FieldScrollerBehavior.prototype), clip: false, contents: [
				Label($, { 
					left: 0, top: 0, skin: THEME.fieldLabelSkin, style: fieldStyle, anchor: 'NAME',
					editable: true, string: $.name,
				 	behavior: Object.create( CONTROL.FieldLabelBehavior.prototype, {
				 		onEdited: { value: function(label){
				 			var data = this.data;
							data.name = label.string;
							input = data.name;
							trace(input + "\n");
							label.container.hint.visible = ( data.name.length == 0 );	
							
				 		}}
				 	}),
				 }),
				 Label($, {
	 			 	left:4, right:4, top:4,  style:fieldHintStyle, string:"", name:"hint"
				 })
			]
		})
	]
}});



var myRadioGroup = BUTTONS.RadioGroup.template(function($){ return{
	top:125, bottom:50, left:20, right:50,
	behavior: Object.create(BUTTONS.RadioGroupBehavior.prototype, {
		onRadioButtonSelected: { value: function(buttonName){
			if (buttonName == " Fahrenheit") {
				toConvert = "F";
				trace("1");
			}
			if (buttonName == " Celsius") {
				toConvert = "C";
				trace("2");
			}
			if (buttonName == " Kelvin") {
				toConvert = "K";
				trace("3");
			}
			if (touched) {
				if (input == "") {
					var warn = "Please input value.";
					mainContain.converted.string = warn;
					trace(warn);
					return
				}					
					if (toConvert == "F") {
						trace(convertF(conversion, input));
						mainContain.converted.string = convertF(conversion, input);
			
					}
					if (toConvert == "C") {
						trace(convertC(conversion, input));
						mainContain.converted.string = convertC(conversion, input);
			
					}
					if (toConvert == "K") {
						trace(convertK(conversion, input));
						mainContain.converted.string = convertK(conversion, input);
			
					}
			
			}
			trace("Radio button with name " + buttonName + " was selected.\n");
	}}})
}});

var myRadioGroup2 = BUTTONS.RadioGroup.template(function($){ return{
	top:125, bottom:50, left:175, right:20,
	behavior: Object.create(BUTTONS.RadioGroupBehavior.prototype, {
		onRadioButtonSelected: { value: function(buttonName){
			touched = true;
			trace(buttonName);
			if (buttonName == " Fahrenheit") {
				conversion = "F";
				trace("1");
			}
			if (buttonName == " Celsius") {
				conversion = "C";
				trace("2");
			}
			if (buttonName == " Kelvin") {
				conversion = "K";
				trace("3");
			}
			if (input == "") {
				var warn = "Please input value.";
				mainContain.converted.string = warn;
				trace(warn);
				return
			}
		if (toConvert == "F") {
			trace(convertF(conversion, input));
			mainContain.converted.string = convertF(conversion, input);
			
		}
		if (toConvert == "C") {
			trace(convertC(conversion, input));
			mainContain.converted.string = convertC(conversion, input);
			
		}
		if (toConvert == "K") {
			trace(convertK(conversion, input));
			mainContain.converted.string = convertK(conversion, input);
			
		}
			trace("Radio button with name " + buttonName + " was selected.\n");
		
	}}})
}});

var whiteS = new Skin({fill:"white"});
var bigText = new Style({font:"bold 55px", color:"#333333"});


var convertF = function(final, value) {
	if (final == "K") {
		var num = ((value - 32) * (5/9)) + 273.15;
		trace( "F to K\n" + num.toFixed(2) + " K");
		return  num.toFixed(2) + " K";
	} else if  (final == "C") {
		var num = (value - 32) * 5/9;
		trace ("F to C\n" + num.toFixed(2));
		return num.toFixed(2) + " \xB0C";
	} else {
		return "nothing to convert!";
	}
}

var convertK = function(final, value) {
	if (final == "K") {
		return "nothing to convert!";
	} else if  (final == "C") {
		
		var num = value - 273.15;
		trace("K to C\n" + num.toFixed(2));
		return num.toFixed(2) + " \xB0C";
	} else {
		var num = ((value - 273.15) * 9/5 ) + 32;
		trace("K to F\n" + num.toFixed(2));
		return num.toFixed(2) + " \xB0F";
	}
}

var convertC = function(final, value) {
	if (final == "K") {
		trace(value);
		var num = Number(value) + 273.15;
		trace("C to K\n" + num.toFixed(2) + " K");
		return num.toFixed(2) + " K";
	} else if  (final == "C") {
		return "nothing to convert!";
	} else {
		var num = (value * 9/5) + 32;
		trace("C to F\n" + num.toFixed(2));
		return num.toFixed(2) + " \xB0F";
	}
}


var mainCon = Container.template(function($) { return {
	left:0, right:0, top:0, bottom:0,
	skin: whiteSkin,
	contents:[
		new Label({left:50, right:50, top: 20, string: "CONVERT THIS!", style: labelStyle}),
		new Label({left:50, right:50, top: 180,  string: "", style: fieldStyle}),
		new myRadioGroup({ buttonNames: " Fahrenheit, Celsius, Kelvin"}),
		new myRadioGroup2({ buttonNames: " Fahrenheit, Celsius, Kelvin"}),
	],
	behavior: Object.create(Container.prototype, {
		onTouchEnded: { value: function(content){
			KEYBOARD.hide();
			content.focus();
		}}
	})
	
		
}});


var field = new myField({ name: "" });
var convertedNum = new Label({left:0, right:0, top: 250, string: "0", style: conStyle, name:"converted"});
var main = new mainCon();
mainContain = main;

application.add(main);
main.add(field);
main.add(convertedNum);

Credits

Tanisha Singh
5 projects • 4 followers

Comments