www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need Opinion

  1. #1
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255

    Need Opinion

    Hi folks,

    despite a fact that I'm learning JavaScript for some time (won't tell you how long ) I'm still quite new to this language. Since I'm trying to give my self some tasks to get better understanding of the language and do some coding I tryed to build a calculator with some themes.

    There are still several things to do like for example I didn't add support to start calculations with negative numbers etc... so if you try this you'll get an error... but I want to know if my coding looks like something. While I was coding at some section of my code I got feeling like it is too complicated and that it can be done much better.

    So I'm asking some more experienced user with good will and some free time if he she can take a look and give me his opinion.

    Note: I mixed up some inline styling because I didn't wanted to bother with external style sheets... and uploading files. Usually i put css and scripts in external files.

    Here's the code:

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>My web page</title>
    		<style type="text/css">
    			table {margin-bottom: 30px;}
    			h5 {margin: 10px 0;}
    			#text {margin-bottom: 10px;}
    			.radius {border-radius: 10px;}
    		</style>
    		<script type="text/javascript">
    			var numbers = [];
    			var operations = [];
    
    function onButtonPress(button)
    {
        var display = document.getElementById('display');
        var buttonPressed = button.value;
        var res;
        var i;
       
        switch (buttonPressed)
        {
            case "+":
            case "-":
            case "*":
            case "/":
                numbers[numbers.length] = display.innerHTML;
                operations[operations.length] = buttonPressed;
                display.innerHTML = "";
                break;
            case "=":
                numbers[numbers.length] = display.innerHTML;
                i = numbers.length;
                var pass = 1;
                do
                {
                    var num1 = Number(numbers[0]);
                    var oper = operations[0];
                   
                    switch (oper)
                    {
                        case "+":
                            if (pass == 1)
                                res = num1;
                            else
                                res = res + num1;
                            break;
                        case "-":
                            if (pass == 1)
                                res = num1;
                            else
                                res = res - num1;
                            break;
                        case "*":
                             if (pass == 1)
                                res = num1;
                            else
                                res = res * num1;
                            break;
                        case "/":
                             if (pass == 1)
                                res = num1;
                            else
                                res = res / num1;
                            break;
                    }
                    if (numbers.length > 1)
                        numbers = numbers.slice(1, numbers.length);
                    if ((operations.length > 1) && (pass > 1))
                        operations = operations.slice(1, operations.length);
                    i = i - 1;
                    pass = pass + 1;
                }
                while (i > 0)
                display.innerHTML = res;
                break;
            case "CLR":
                numbers = [];
                operations = [];
                display.innerHTML = "";
                break;
            default:
                display.innerHTML = display.innerHTML + buttonPressed;
                break;
        }
        return;
    }
    function addTheme()
    {
    	var elem = document.getElementById('text');
    	var selElem = document.getElementById('select');
    	var color = elem.value;
    	var index = selElem.length;
    	var option;
    	
    	if (color == "")
    		alert("Cannot add empty value!!");
    	else
    	{
    		option = new Option(color, color);
    		selElem.options[index] = option;
    		elem.value = "";
    		elem.focus();
    	}
    	return;
    }
    function changeTheme()
    {
    	var selElem = document.getElementById('select');
    	var selIndex = selElem.selectedIndex;
    	var optElem = selElem.options[selIndex];
    	var elemToChange = document.getElementsByTagName('input');
    	var pass = 1;
    	
    	for (var i = 0; i < elemToChange.length; i++)
    	{
    		if (elemToChange[i].attributes[0].name == "class")
    			if (elemToChange[i].attributes[0].value == "button")
    			{
    				if (optElem.value == "rounded")
    				{
    					elemToChange[i].setAttribute('class','radius');
    					elemToChange[i].style.backgroundColor = "white";
    				}
    				else
    					elemToChange[i].style.backgroundColor = optElem.value;
    			}
    			else
    				if (elemToChange[i].attributes[0].value == "radius")
    				{
    					elemToChange[i].setAttribute('class','button');
    					elemToChange[i].style.backgroundColor = optElem.value;
    				}
    	}
    }
    		</script>
    	</head>
    	<body>
    		<table>
    			<tr>
    				<td id="display" colspan="5" style="border: 1px solid gray; height: 15px; padding-right: 10px; text-align: right; font-size: 12px;"></td>
    			</tr>
    			<tr>
    				<td><input class="button" type="button" value="1" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="2" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="3" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="+" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="-" onclick="onButtonPress(this)" /></td>
    			</tr>
    			<tr>
    				<td><input class="button" type="button" value="4" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="5" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="6" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="*" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="/" onclick="onButtonPress(this)" /></td>
    			</tr>
    			<tr>
    				<td><input class="button" type="button" value="7" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="8" onclick="onButtonPress(this)" /></td>
    				<td><input class="button" type="button" value="9" onclick="onButtonPress(this)" /></td>
    				<td colspan="2"><input class="button" type="button" value="CLR" onclick="onButtonPress(this)" style="width: 63px;"/></td>
    			</tr>
    			<tr>
    				<td><input class="button" type="button" value="0" onclick="onButtonPress(this)" /></td>
    				<td colspan="4"><input class="button" type="button" value="=" onclick="onButtonPress(this)" style="width: 130px;" /></td>
    			</tr>
    		</table>
    		<table>
    			<tr>
    				<td>
    					<fieldset>
    					<legend style="color: red;">Choose different theme</legend>
    					<select id="select">
    						<option value="red">Red</option>
    						<option value="yellow">Yellow</option>
    						<option value="orange">Orange</option>
    						<option value="rounded">Rounded</option>
    					</select>
    					<h5>or enter hex value:</h5>
    					<input id="text" type="text" /><br />
    					<input type="button" value="Add" onclick="addTheme()" />
    					<input type="button" value="Change" onclick="changeTheme()" />
    					</fieldset>
    				</td>
    			</tr>
    		</table>
    	</body>
    </html>

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    255
    Sorry above code is wrong.

    Here's correct one:

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    		<title>My web page</title>
    		<style type="text/css">
    			.initial {width: 40px; height: 40px;}
    			.dark {width: 40px; height: 40px; background: black; color: red;}
    			.blue {width: 40px; height: 40px; background: blue; color: white;}
    			.orange {width: 40px; height: 40px; background: orange; color: purple;}
    			.rounded_classic {width: 40px; height: 40px; background: white; color: black; border-radius: 20px;}
    			.rounded_dark {width: 40px; height: 40px; background: black; color: red; border-radius: 20px;}
    			.display_initial {font-size: 24px; height: 33px; border: 1px solid gray; text-align: right; padding-right: 15px;}
    			.display_dark {font-size: 24px; height: 33px; border: 1px solid black; text-align: right; padding-right: 15px; color: red;}
    			.display_blue {font-size: 24px; height: 33px; border: 1px solid blue; text-align: right; padding-right: 15px; color: green; background: white;}
    			.display_orange {font-size: 24px; height: 33px; border: 1px solid orange; text-align: right; padding-right: 15px; color: green;}
    			.display_rounded_classic {font-size: 24px; height: 33px; border: 1px solid gray; text-align: right; padding-right: 15px; border-radius: 20px;}
    			.display_rounded_dark {font-size: 24px; height: 33px; border: 1px solid black; text-align: right; padding-right: 15px; border-radius: 20px; color: red;}
    			#table_wrapper {float: left; margin-right: 100px;}
    			#option_wrapper {float: left; width: 350px;}
    			#equal_sign {width: 128px;}
    			#clear_button {width: 84px;}
    		</style>
    	</head>
    	<body>
    		<div id="table_wrapper">
    		<table id="table">
    			<tr>
    				<td colspan="5" name="display" id="display" class="display_initial"></td>
    			</tr>
    			<tr>
    				<td><input name="button" class="initial" type="button" value="1" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="2" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="3" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="+" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="-" onclick="onButtonPress(this)" /></td>
    			</tr>
    			<tr>
    				<td><input name="button" class="initial" type="button" value="4" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="5" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="6" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="*" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="/" onclick="onButtonPress(this)" /></td>
    			</tr>
    			<tr>
    				<td><input name="button" class="initial" type="button" value="7" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="8" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="9" onclick="onButtonPress(this)" /></td>
    				<td colspan="2"><input id="clear_button" name="button" class="initial" type="button" value="CLR" onclick="onButtonPress(this)" /></td>
    			</tr>
    			<tr>
    				<td><input name="button" class="initial" type="button" value="0" onclick="onButtonPress(this)" /></td>
    				<td><input name="button" class="initial" type="button" value="." onclick="onButtonPress(this)" /></td>
    				<td colspan="3"><input id ="equal_sign" name="button" class="initial" type="button" value="=" onclick="onButtonPress(this)" /></td>
    			</tr>
    		</table>
    		</div>
    		<div id="option_wrapper">
    			<fieldset style="border-radius: 20px;">
    				<legend style="margin-left: 50px;">Choose different theme</legend>
    				<select id="select" style="margin-bottom: 10px;">
    					<option value="initial" selected="selected">Default</option>
    					<option value="dark">Dark</option>
    					<option value="blue">Blue</option>
    					<option value="orange">Orange</option>
    					<option value="rounded_classic">Ronded_classic</option>
    					<option value="rounded_dark">Rounded_dark</option>
    				</select><br />
    				<label for="text" style="color: red;">Add color (hex):</label><br />
    				<input id="text" type="text" style="margin: 10px 0;"/><br />
    				<input type="button" value="Add" onclick="addColor()" />
    				<input type="button" value="Change" onclick="changeTheme()" />
    			</fieldset>
    		</div>
    		<script type="text/javascript">
    			var numbers = [];
    			var mathOper = [];
    			var equalPressed = false;
    
    			function onButtonPress(that)
    			{
    				display(that);
    				return;	
    			}
    
    			function display(button)
    			{
    				var btnPressed = button.value;
    				var disp = document.getElementById('display');
    	
    				switch (btnPressed)
    				{
    					case "+":
    					case "-":
    					case "*":
    					case "/":
    						if (equalPressed == true)
    						{
    							numbers = [];
    							mathOper = [];
    							numbers[numbers.length] = parseFloat(disp.innerHTML);
    							mathOper[mathOper.length] = btnPressed;
    							disp.innerHTML = "";
    							equalPressed = false;
    						}
    						else
    						{
    							numbers[numbers.length] = parseFloat(disp.innerHTML);
    							mathOper[mathOper.length] = btnPressed;
    							disp.innerHTML = "";
    						}
    						break;	
    					case "=":
    						numbers[numbers.length] = parseFloat(disp.innerHTML);
    						Calculate(numbers,mathOper)
    						equalPressed = true;
    						break;
    					case "CLR":
    						numbers = [];
    						mathOper = [];
    						disp.innerHTML = "";
    						break;
    					default:
    						disp.innerHTML = disp.innerHTML + btnPressed;
    						break;
    				}
    				return;
    			}
    			
    			function Calculate(num,opr)
    			{
    				var result;
    	
    				for (var i = 0; i < opr.length; i++)
    				{
    					var x = 0;
    
    					if (i == 1)
    						num = num.slice(2, num.length);
    					if (i > 1)
    						num = num.slice(1, num.length);
    					switch (opr[i])
    					{
    						case "+":
    						if (i > 0)
    							result = result + num[x]; 
    						else
    							result = num[x] + num[x + 1];
    						break;
    						case "-":
    							if (i > 0)
    								result = result - num[x]; 
    							else
    								result = num[x] - num[x + 1];
    							break;
    						case "*":
    							if (i > 0)
    								result = result * num[x]; 
    							else
    								result = num[x] * num[x + 1];
    							break;
    						case "/":
    							if (i > 0)
    								result = result / num[x]; 
    							else
    								result = num[x] / num[x + 1];
    							break;
    						default:
    							result = "error";
    					}
    				}
    				showResult(result);
    				return;
    			}
    
    			function showResult(res)
    			{
    				var disp = document.getElementById('display');
    				var tmpRes = res.toString();
    				
    				if (tmpRes.indexOf(".") != -1)
    					disp.innerHTML = res.toFixed(2);
    				else
    					disp.innerHTML = res;
    				return;
    			}
    			
    			function changeTheme()
    			{
    				var btnElems = document.getElementsByName('button');
    				var display = document.getElementById('display');
    				var selElem = document.getElementById('select');
    				var selElemIndex = selElem.selectedIndex;
    				var color = selElem.options[selElemIndex].value;
    				var optNumber = selElem.length;
    				var defColors = ["initial", "dark", "blue", "orange", "rounded_classic", "rounded_dark"];
    				
    				if (optNumber > 6)
    				{
    					function checkValue (value, index, array)
    					{
    						return selElem.options[selElemIndex].value == value;
    					}
    					
    					if (defColors.some(checkValue) == true)
    					{
    						for (var i = 0; i < btnElems.length; i++)
    						{
    							var attr = btnElems[i].attributes;
    							
    							for (var x = 0; x < attr.length; x++)
    							{
    								if (btnElems[i].attributes[x].name == "style")
    									btnElems[i].removeAttribute('style');
    							}
    						}
    					}
    				}
    				
    				switch (color)
    				{
    					case "initial":
    						display.setAttribute('class','display_initial');
    						break;
    					case "dark":
    						display.setAttribute('class','display_dark');
    						break;
    					case "blue":
    						display.setAttribute('class','display_blue');
    						break;
    					case "orange":
    						display.setAttribute('class','display_orange');
    						break;
    					case "rounded_classic":
    						display.setAttribute('class','display_rounded_classic');
    						break;
    					case "rounded_dark":
    						display.setAttribute('class','display_rounded_dark');
    						break;
    					default:
    						display.setAttribute('class','display_initial');
    						break;
    				}
    				
    				if ((optNumber > 6) && (defColors.some(checkValue) == false))
    				{
    					for (var i = 0; i < btnElems.length; i++)
    					{
    						btnElems[i].style.backgroundColor = color;
    						btnElems[i].setAttribute('class','initial');
    						btnElems[i].style.borderStyle = "solid";
    					}
    				}
    				else
    				{
    					for (var i = 0; i < btnElems.length; i++)
    					{
    						btnElems[i].setAttribute('class', color);
    					}
    				}
    				return;
    			}
    			
    			function addColor()
    			{
    				var selElem = document.getElementById('select');
    				var index = selElem.length;
    				var txtElem = document.getElementById('text');
    				
    				if (txtElem.value == "")
    				{
    					alert("Cannot add empty value!!")
    					txtElem.focus();
    				}
    				else
    				{
    					var color = txtElem.value;
    					var option = new Option(color, color);
    					selElem.options[index] = option;
    					txtElem.value = "";
    					txtElem.focus();
    				}
    				return;
    			}
    		</script>
    	</body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles