JSCalculator/index.html at master · LyttleByte/JSCalculator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>

<html>

 <head>
  <title>JS Calculator</title>
  <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/style.css">
  <link href='http://fonts.googleapis.com/css?family=Ropa+Sans' rel='stylesheet' type='text/css'>
  <script language="javascript" src="calculator.js"></script>
 </head>

 <body>
  <div class="container clearfix">
	  <h1>JS Calculator</h1>
	  <h4>A Simple Javascript Calculator</h4>

	  <br>

	  <form name="myForm">
		<div class="grid_2">
			<input type="button" name="1" value="1" OnClick="UpdateStateMachine('1')" class="numOrOpButton">
			<input type="button" name="2" value="2" OnClick="UpdateStateMachine('2')" class="numOrOpButton">
			<input type="button" name="3" value="3" OnClick="UpdateStateMachine('3')" class="numOrOpButton">
			<input type="button" name="add" value="+" OnClick="UpdateStateMachine('+')" class="numOrOpButton">
			<input type="button" name="4" value="4" OnClick="UpdateStateMachine('4')" class="numOrOpButton">
			<input type="button" name="5" value="5" OnClick="UpdateStateMachine('5')" class="numOrOpButton">
			<input type="button" name="6" value="6" OnClick="UpdateStateMachine('6')" class="numOrOpButton">
			<input type="button" name="sub" value="-" OnClick="UpdateStateMachine('-')" class="numOrOpButton">
			<input type="button" name="7" value="7" OnClick="UpdateStateMachine('7')" class="numOrOpButton">
			<input type="button" name="8" value="8" OnClick="UpdateStateMachine('8')" class="numOrOpButton">
			<input type="button" name="9" value="9" OnClick="UpdateStateMachine('9')" class="numOrOpButton">
			<input type="button" name="mul" value="*" OnClick="UpdateStateMachine('*')" class="numOrOpButton">
			<input type="button" name="0" value="0" OnClick="UpdateStateMachine('0')" class="numOrOpButton" id="zeroButton">
			<input type="button" name="div" value="/" OnClick="UpdateStateMachine('/')" class="numOrOpButton">
            <input type="button" name="open" value="(" OnClick="UpdateStateMachine('(')" class="numOrOpButton" id="openParenButton">
            <input type="button" name="close" value=")" OnClick="UpdateStateMachine(')')" class="numOrOpButton" id="closeParenButton">
            <input type="button" name="point" value="." onclick="UpdateStateMachine('.')" clas="numOrOpButton" id="decimalPoint">
			<input type="button" name="=" value="=" OnClick="UpdateStateMachine('=')" class="numOrOpButton" id="equalsButton">
			<input type="button" name="clear" value="CLEAR" onClick="UpdateStateMachine('CLR')" class="numOrOpButton" id="clearButton">
		</div>

		<div class="grid_1">
			<p class="label">Equation</p>
			<p class="label">Answer</p>
		</div>
		<div class="grid_3">
			<input type="text" name="equation" id="equation" disabled="disabled" value="Your equation here" onClick="ChangeFocus("user_input")"> <br>
			<input type="text" name="answer" disabled="disabled" value="Answer appears here">
		</div>

		<select id="base_selector" name="base_selector" value="Base Type" onchange="ChangeBaseMode()">
		  <option>Decimal</option>
		  <option>Binary</option>
		  <option>Hexadecimal</option>
		</select>

	  </form>

	  <div class="grid_6 omega">
			<h3>Description</h3>
			<p>
				This is a simple one page site containing a calculator application written in javascript. I'm new to
				web development, so I thought that creating a calculator application would be a decent first start
				to becoming familiar with the entire process of creating a web app. I'll be using this site to experiment
				with web development and  design.
			</p>
			<p>
				I hope this calculator is pretty self explanatory to use. At this only does operations on decimal numbers.
                In the future I plan to add hexadecimal and binary operations/conversions to it as well. In the end, it
                probably won't end up doing anything that the standard windows calculator can't do, but at least it does
                something useful!
			</p>
	  </div>

	  <div class="grid_6">
			<h3>Future Features</h3>
			<p>
				<ul>
					<li>Binary math and conversion</li>
					<li>Hexadecimal math and conversion</li>
					<li>A responsive, mobile friendly version of the page</li>
				</ul>
			</p>
	  </div>

	  <div class="grid_6 omega">
			<h3>Contact Me</h3>
			<p>
				If you would like to suggest other future features or design changes feel free to contact me
				at info@JSCalculator.com.
			</p>
	  </div>

	  <div id="copyright" class="grid_12">
			<p>&copy; 2016 JSCalculator.com. All Rights Reserved</p>
	  </div>
   </div>
 </body>

</html>