-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·73 lines (67 loc) · 3.46 KB
/
index.html
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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>calculateTwoNumbers()</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="js/inputFocus.js"></script>
<script type="text/javascript" src="js/calculateTwoNumbers.js"></script>
<script type="text/javascript" src="js/backgroundChanger.js"></script>
</head>
<body>
<div id="wrapper">
<div id ="header">
<div id="logo"><h1>calculateTwoNumbers()</h1></div>
<div id="background-changer">
<span>Background styles</span>
<div id="backgroundImageButtons">
<img class="bg1" src="images/bg1_thumbnail.jpg" alt="Change to this background" />
<img class="bg2" src="images/bg2_thumbnail.jpg" alt="Change to this background" />
<img class="bg3" src="images/bg3_thumbnail.jpg" alt="Change to this background" />
<img class="bg4" src="images/bg4_thumbnail.jpg" alt="Change to this background" />
<img class="bg5" src="images/bg5_thumbnail.jpg" alt="Change to this background" />
</div>
</div>
</div><!-- eo header -->
<div id="container">
<div id="content">
<h2><span>Instructions</span></h2><hr />
<form name="form" action="#">
<fieldset id="number_container">
<legend><span>1. Enter two numbers</span></legend>
<input id="number1" class="number" name="number1" type="text" tabindex="1" maxlength="5" />
<input id="number2" class="number" name="number2" type="text" tabindex="2" maxlength="5" />
<span id="digit_limit">(max 5 digits/number)</span>
</fieldset>
<fieldset id="operator_container">
<legend><span>2. Select an operator</span></legend>
<input id="addition" class="operator" type="button" value="+" onclick="add();" tabindex="3" />
<input id="subtraction" class="operator" type="button" value="-" onclick="subtract();" tabindex="4" />
<input id="multiplication" class="operator" type="button" value="*" onclick="multiply();" tabindex="5" />
<input id="division" class="operator" type="button" value="/" onclick="divide();" tabindex="6" />
</fieldset>
<fieldset id="result_container">
<legend><span>Result</span></legend>
<div id="calculation">
<span id="calculation_number1"></span>
<span id="calculation_operator"></span>
<span id="calculation_number2"></span>
<span id="equals"></span>
<span id="result">No calculation yet</span>
</div>
<div class="clear"></div>
</fieldset>
</form>
</div><!-- eo content -->
</div><!-- eo container -->
<div id="footer">
<span>calculateTwoNumbers() - XHTML/CSS3/JavaScript excercise</span><div class="clear"></div>
<span>Made in 2011 by <a href="http://www.jnsnlssn.se">Jonas Nilsson</a></span>
</div><!-- eo footer -->
</div><!-- eo wrapper -->
</body>
</html>