-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
162 lines (144 loc) · 7.04 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GPA Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="https://www.psdr3.org/images/logos/psd.png" rel="shortcut icon" type="text/css">
<body class="lightModebg" onload="getCookies()">
<!-- Side Navigation -->
<nav class="w3-sidebar w3-bar-block w3-card w3-animate-left w3-center" style="display:none" id="mySidebar">
<button class="smallbutton w3-text-theme w3-padding-16" onclick="w3_close()">Close <i class="fa fa-remove"></i></button>
<p></p>
<button class="smallbutton w3-button w3-theme" onclick="document.getElementById('id01').style.display='block'">Select Grade Level</button>
<p></p>
<button id="darkModeButton" onclick="darkMode()" class="smallbutton w3-button w3-theme">Dark Mode</button>
<p></p>
<button class="clearDataButton smallbutton w3-button w3-theme" onclick="clearAll()">Clear All Site Data</button>
<p></p>
<div id="google_translate_element"></div>
<script type="text/javascript">// <![CDATA[
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
// ]]></script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
</nav>
<!-- Header -->
<header class="w3-container w3-theme w3-padding-16" id="myHeader">
<i onclick="w3_open()" class="fa fa-bars w3-xlarge w3-button w3-theme"></i>
<div class="w3-center">
<h4 class="lgreen w3-xlarge w3-animate-top">PATTONVILLE</h4>
<h5 id="gradeLvl" class="w3-large w3-animate-top"></h5>
<h1 class="w3-xxxlarge w3-animate-left">GPA Calculator</h1>
</div>
<a class="w3-text-white" href="#myFooter"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-down"></i></span></a>
</header>
<div class="w3-row">
<div id="c2" class="lightMode w3-half w3-container w3-padding-16">
<h5 class="w3-xlarge w3-animate-right" >How to use!</h5>
<p class="w3-animate-right" id="Directions">Input number of classes you are taking and press "Submit", then input your grades under "Grades:" and press "Calculate GPA and Save" to calculate your gpa.</p>
<p class="w3-animate-right" id="Directions2">Your class data will then be saved as a cookie to your device. This is so if you refresh, your data is saved!</p>
<button class="w3-green" onclick="help()">Need Help?</button>
<p class="w3-animate-right" id="saved"></p>
<input class="w3-animate-right txtbox" type="number" placeholder="Number of Classes" id="numOfClasses" >
<button onclick="classAmount()" class="button w3-animate-right w3-button w3-theme">Submit</button>
<p></p>
</div>
<div id="c" class="lightMode w3-half w3-container w3-padding-16">
<h5 class="w3-xlarge w3-animate-right" >Grades:</h5>
<p></p>
<div class="selectionbox w3-small w3-animate-right" id="temp1"></div>
<h2 class="gpa float w3-animate-right" id="gpa">No Data</h2>
<button id="gpaButton" onclick="loadgpa()" class="float2 button w3-animate-right w3-button w3-theme">Calculate GPA and Save</button>
<p></p><button id="clearDataButton" onclick="clearData()" class="float button w3-animate-right w3-button w3-theme">Clear Grade Data</button>
<p class="mini w3-animate-right">Note: This action refreshes the page.</p>
</div>
</div>
<div id="id01" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content w3-card-4">
<header class="w3-container w3-green">
<h3>Choose Your Grade Level</h3>
</header>
<div class="w3-container">
<h4 id="modalClass">Middle School</h4>
<label class="switch">
<input onclick="hsmsSwap()" type="checkbox" id="hsmsInput" checked>
<span class="slider round"></span>
</label>
<p></p>
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-large w3-green">Ok</span>
<p></p>
</div>
<footer class="w3-container w3-green">
<p>This can be changed later inside the menu.</p>
</footer>
</div>
</div>
<!-- Easter Egg -->
<div id="id02" class="w3-modal w3-animate-opacity">
<div class="w3-modal-content w3-card-4">
<header class="w3-container w3-green">
<h3>Choose Your Theme</h3>
</header>
<p></p>
<button onclick="rTH()" class="redModebg">Red</button>
<button onclick="oTH()" class="orangeModebg">Orange</button>
<button onclick="yTH()" class="yellowModebg">Yellow</button>
<button onclick="lTH()" class="limeModebg">Green</button>
<button onclick="cTH()" class="cyanModebg">Cyan</button>
<button onclick="bTH()" class="blueModebg">Blue</button>
<button onclick="pTH()" class="purpleModebg">Purple</button>
<button onclick="piTH()" class="pinkModebg">Pink</button>
<button onclick="prTH()" class="pinkredModebg">Pink/Red</button>
<p></p>
<span onclick="document.getElementById('id02').style.display='none'"
class="w3-button w3-large w3-green">Ok</span>
<footer class="w3-container w3-black">
<p>You Found It!</p>
</footer>
</div>
</div>
</body>
<!-- Footer -->
<footer class="footer w3-container w3-theme-dark w3-padding-16" id="myFooter">
<a class="w3-text-white" href="#myHeader"><span class="w3-xlarge">
<i class="fa fa-chevron-circle-up"></i></span></a>
<h3>About</h3>
<!-- Easter egg -->
<p class="float2 black">.... . .-.. .-.. --- / - .... . .-. . -.-.--</p>
<!-- Info -->
<p>Created by Parker Hasenkamp for the <a href="https://psdr3.org" target="_blank">Pattonville School District</a></p>
<p>My submission for the 2021 <a href="https://www.congressionalappchallenge.us/" target="_blank">Congressional App Challenge!</a></p>
</footer>
<!--Smooth Scroll Buttons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</html>