-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
123 lines (123 loc) · 7.19 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
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<link rel="shortcut icon" href=""><!--removes 404 falvicon error-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.css" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body class="home" id="home">
<header>
<!--Bootstrap HTML-->
<div class="container-fluid">
<div class="col-xs-12 heading">
<img class="logo" src="assets/images/LJNlogo.png" alt="lgn-logo" />
<h1 id="main-heading" class="main-heading" >The LJN Interactive Mega Calculator</h1>
</div>
</div>
</header>
<main class="container">
<div class="row">
<!--Bootstrap HTML-->
<section class="calculator-section section-1 col-xs-12 col-sm-12 col-md-6 col-lg-6">
<!--regular HTML-->
<h4 class="sub-heading">The Mega Calculator</h4>
<!--This header is manipulated through the main javascript file-->
<h5 id="calculator-status"></h5>
<!--this div's display is toggled between block and none through main javascript file-->
<div id="enlarged-display" class="enlarged-display">
<!--This paragraph DOM element is manipulated through the main javascript file-->
<p id="displayed-entire-calc" class="displayed-entire-calc">
</p>
</div>
<!--This button's innerHTMLDOM element is manipulated through the main javascript file-->
<div id="main-calculator" class="main-calculator">
<!--main display for calculation, which only shows a set length fthrough the end of the calculation-->
<div id="display" class="display">
<!--these paragraphs are DOM element is manipulated through the main javascript file-->
<p id="displayed-calc" class="displayed-calc">Begin Calculation</p>
<p id="displayed-input" class="displayed-input">0</p>
</div>
<div id="buttons" class="buttons">
<!--this Button's innerHTML is manipulated through the main javascript file-->
<button id="switch-calculation-display" class="green-button switch-calculation-display" href="#">Show Full Calculation</button>
<button id="num1" class="num" value="1">1</button>
<button id="num2" class="num" value="2">2</button>
<button id="num3" class="num" value="3">3</button>
<button id="add" class="opp" value="+">+</button>
<button id="num4" class="num" value="4">4</button>
<button id="num5" class="num" value="5">5</button>
<button id="num6" class="num" value="6">6</button>
<button id="subtract" class="opp" value="-">-</button>
<button id="num7" class="num" value="7">7</button>
<button id="num8" class="num" value="8">8</button>
<button id="num9" class="num" value="9">9</button>
<button id="multiply" class="opp" value="x">X</button>
<button id="divide100" class="divide100">%</button>
<button id="num0" class="num" value="0">0</button>
<button id="numDec" class="num numDec" value="."><strong>.</strong></button>
<button id="divide" class="opp" value="/">/</button>
<button id="clear" class="clear">C</button>
<button id="plus-minus" class="plus-minus">±</button>
<button id="remove" class="remove"><-</button>
<button id="answer" class="opp answer" value="=">=</button>
</div>
</div>
<!--This div is hidden at smaller screen sizes from the CSS file-->
<div class="keyboard-instructions">
<h6>Keyboard Input Buttons<i>(click the main page to allow use of Keyboard buttons):
</i></h6>
<h6><i>numbers: 0 - 9; decimal: '.'; add: '+'; subtract: '-'; multiply: 'x', '*'; divide: '/'; answer: '=', 'Return'; divide number by 100: '%'; plus-minus: '±'; remove previous inputs: 'r', 'R'; clear entire calculation: 'c', 'C'; switch calculation displays: 'd', 'D'; save calculation: 's', 'S'.
</i></h6>
</div>
</section>
<!--bootstrap HTML-->
<aside id="calculation-backup-section" class="col-xs-12 col-sm-offset-1 col-sm-10 col-md-offset-0 col-md-6 col-lg-6 calculation-backup-section section-2">
<h4 class="sub-heading">Calculation Backup</h4>
<!--These headers are manipulated through the main javascript file-->
<h5 id="save-status" class="save-status"></h5>
<h5 id="warning-status"></h5>
<div class="main-calculation-backup">
<h5 class="section-description"><i>Save your current calculator progress here:</i></h5>
<div class="row">
<div id="calculation-save-form" class="calculation-save-form">
<div class="form-group">
<textarea class="text-input-background form-control" id="calculation-description-input" rows="3" placeholder="Write an OPTIONAL description of your Calculator data, prior to saving it (i.e. '40 apples x 20 baskets')"></textarea>
<button id="save-calc" class="col-xs-offset-3 col-xs-6 save-calc btn" value="1">Save Calculation</button>
</div>
</div>
<!--This List is manipulated through the main javascript file-->
<ul id="displayed-calculation-list" class="list-group col-xs-12 displayed-calculation-list">
<li class="list-group-item saved-item-background">
No calculations are saved.
</li>
</ul>
</div>
</div>
<!--regular HTML-->
<!--This div is hidden at larger screen sizes through the CSS file-->
<div class="keyboard-instructions">
<h6>Keyboard Input Buttons<i>(click the main page to allow use of Keyboard buttons):
</i></h6>
<h6><i>numbers: 0 - 9; decimal: '.'; add: '+'; subtract: '-'; multiply: 'x', '*'; divide: '/'; answer: '=', 'Return'; divide number by 100: '%'; plus-minus: '±'; remove previous inputs: 'r', 'R'; clear entire calculation: 'c', 'C'; switch calculation displays: 'd', 'D'; save calculation: 's', 'S'.
</i></h6>
</div>
</aside>
</div>
</main>
<!--regular HTML-->
<footer id="copywrite" class="copywrite">
<strong>Tommy Jackson ©</strong><br />
<strong>LJN Logo: Acclaim Entertainment ©</strong>
</footer>
<!--<script src="scripts/main.js"></script>-->
<script src="build/main.bundle.js"></script>
<script src="scripts/jQuery.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>