-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (137 loc) · 5.64 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1" />
<title>Random Number Generator</title>
<style>
html {
background-color: seagreen;
}
#infoText, #descText {font-weight: 100;}
#descText {font-style: italic;}
#infoArea {
width: 50%;
height: 100%;
background-color: darkblue;
color: white;
font-family: sans-serif;
text-align: center;
position: absolute;
text-align: center;
left:25%;
}
#generatorArea {
border: 2px solid white;
width: 50%;
height: 75%;
position: absolute;
left: 25%;
}
#fancyButton {
background-color: grey;
color: white;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script>
function clearNumbers() {
if (document.getElementById("numberOutput1").value == "") {
alert("The numbers are already cleared.");
}
else if (document.getElementById("numberOutput2").value == "") {
alert("The numbers are already cleared.");
} else {
document.getElementById("answer").value = "";
document.getElementById("numberOutput1").value = "";
document.getElementById("numberOutput2").value = "";
console.log("Cleared numbers successfully.");
}
}
var randInt;
function generateInt() { // Generate integer function.
document.getElementById("answer").value = null;
randInt = Math.round(Math.random() * 10000) + 1;
console.log("Random number 1 successfully found: " + randInt);
document.getElementById("numberOutput1").value = randInt;
randInt = Math.round(Math.random() * 10000) + 1;
console.log("Random number 2 successfully found: " + randInt);
document.getElementById("numberOutput2").value = randInt;
console.log("----- Finished generating numbers successfully. -----");
}
function addInt() { // Addition function.
if (document.getElementById("numberOutput1").value == "") {
alert("Press generate numbers first, them you can add them.");
}
else if (document.getElementById("numberOutput2").value == "") {
alert("Press generate numbers first, them you can add them.");
} else {
document.getElementById("answer").value = parseInt(document.getElementById("numberOutput1").value) + parseInt(document.getElementById("numberOutput2").value);
console.log("Added numbers successfully, answer is " + document.getElementById("answer").value);
}
}
function subInt() { // Subtraction function.
if (document.getElementById("numberOutput1").value == "") {
alert("Press generate numbers first, them you can subtract them.");
}
else if (document.getElementById("numberOutput2").value == "") {
alert("Press generate numbers first, them you can subtract them.");
} else {
document.getElementById("answer").value = parseInt(document.getElementById("numberOutput1").value) - parseInt(document.getElementById("numberOutput2").value);
console.log("Subtracted numbers successfully, answer is " + document.getElementById("answer").value);
}
}
function multInt() { // Multiplacation function.
if (document.getElementById("numberOutput1").value == "") {
alert("Press generate numbers first, them you can multiply them.");
}
else if (document.getElementById("numberOutput2").value == "") {
alert("Press generate numbers first, them you can multiply them.");
} else {
document.getElementById("answer").value = parseInt(document.getElementById("numberOutput1").value) * parseInt(document.getElementById("numberOutput2").value);
console.log("Multiplied numbers successfully, answer is " + document.getElementById("answer").value);
}
}
function divInt() { // Division function.
if (document.getElementById("numberOutput1").value == "") {
alert("Press generate numbers first, them you can divide them.");
}
else if (document.getElementById("numberOutput2").value == "") {
alert("Press generate numbers first, them you can divide them.");
} else {
document.getElementById("answer").value = parseInt(document.getElementById("numberOutput1").value) / parseInt(document.getElementById("numberOutput2").value);
console.log("Divided numbers successfully, answer is " + document.getElementById("answer").value);
}
}
</script>
</head>
<body>
<div id="infoArea">
<h1 id="infoText">Random Number Calculator</h1>
<p id="descText">Use this site to generate two random numbers, and perform multiple operations on them.</p>
<div id="generatorArea">
<br />
<br />
<br />
<br />
<input readonly id="numberOutput1" placeholder="Number 1" />
<input readonly id="numberOutput2" placeholder="Number 2" />
<br />
<br />
<br />
<br />
<button id="fancyButton" onclick="generateInt()">Generate Numbers</button><br />
<button id="fancyButton" onclick="addInt()">Add The Numbers</button>
<button id="fancyButton" onclick="subInt()">Subtract The Numbers</button>
<button id="fancyButton" onclick="multInt()">Multiply The Numbers</button>
<button id="fancyButton" onclick="divInt()">Divide The Numbers</button>
<hr />
<br />
<br />
<input style="height: 50px;" readonly id="answer" placeholder="Answer" /><br />
<button id="fancyButton" onclick="clearNumbers()">Clear The Numbers</button>
</div>
</div>
</body>
</html>