-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
144 lines (135 loc) · 6.27 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
<!DOCTYPE html>
<html lang="sv">
<title>brondera.com - Bravo!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-green.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #009933;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
var phonyArray = [];
$(document).ready(function(callback) {
$.ajax({
//call APT table using ORDS API (published by readonly user):
url: "https://dx4l1ex2ewgtxe9-db202003051643.adb.eu-frankfurt-1.oraclecloudapps.com/ords/bravo/phonetic/readonly"
}).then(function(res) {
$.each(res.items, function( i, itemData ) {
//populate phonyArray with data from table API
phonyArray[i] = itemData;
});
if(callback) callback(); //check before calling it.
//check for parameters in url
const urlParams = new URLSearchParams(window.location.search);
//if there is a string parameter, process it
if (urlParams.has('userString')) {
document.getElementById("loader").style.display = "inline";
str2 = urlParams.get('userString').toUpperCase().replace(/[^a-zA-Z]/g,''); //cleanup in case of direct URL
//Statements or assignments that can be placed outside the loop will make the loop run faster.
var l = str2.length;
var i = 0;
for (i = 0; i < l; i++) {
//run every character in the string against the phonyarray
$('.telephony').append(phonyArray[phonyArray.indexOf(phonyArray.find(o => o.character === str2.charAt(i)))].telephony + " ");
$('.character').append(phonyArray[phonyArray.indexOf(phonyArray.find(o => o.character === str2.charAt(i)))].character + " ");
$('.morsecode').append(phonyArray[phonyArray.indexOf(phonyArray.find(o => o.character === str2.charAt(i)))].morsecode + " ");
$('.phonic').append(phonyArray[phonyArray.indexOf(phonyArray.find(o => o.character === str2.charAt(i)))].phonic + " ");
}
};
//clear URL string
window.history.replaceState(null, null, window.location.pathname);
document.getElementById("loader").style.display = "none";
});
});
function myClearFcn() {
//clear result element
$(".character").html("Character: ");
$(".morsecode").html("Morsecode: ");
$(".telephony").html("Telephony: ");
$(".phonic").html("Phonic: ");
//clear URL string
window.history.replaceState(null, null, window.location.pathname);
};
</script>
</head>
<body class="w3-theme-l5">
<div id="loader"></div>
<!-- Page Container -->
<div class="w3-container w3-center w3-margin-top">
<h1>Bravo!</h1>
<p>A demo page that turns Your strings into radio language.</p>
<p><a target="_blank" href="https://www.linkedin.com/pulse/bravo-how-make-our-first-web-application-using-always-bronder-/">About</a></p>
</div>
<div class="w3-white w3-text-grey w3-card-4 w3-center w3-margin">
<div class="w3-container w3-theme">
<h2>Input Form</h2>
</div>
<form class="w3-container w3-card-4">
<p>
<label for="userString">Please input a string in characters A-Z:</label><br>
<input class="w3-input w3-border" type="text" name="userString" id="userString" pattern="[a-zA-Z]+" title="Please only use characters A-Z" required></p>
<input class="w3-btn w3-theme-d4 w3-margin-bottom" type="submit" value="Submit">
</form>
</div>
<div class="w3-white w3-text-grey w3-card-4 w3-center w3-margin">
<div class="w3-container w3-theme">
<h2>Output</h2>
</div>
<div class="w3-left-align w3-margin-left"><h4 class="character">Character: </h4></div>
<div class="w3-left-align w3-margin-left"><h4 class="morsecode">Morsecode: </h4></div>
<div class="w3-left-align w3-margin-left"><h4 class="telephony">Telephony: </h4></div>
<div class="w3-left-align w3-margin-left"><h4 class="phonic">Phonic: </h4></div>
<div class="w3-container">
<button onClick="myClearFcn()" class="w3-btn w3-theme-d4 w3-margin-bottom">CLEAR</button>
</div>
</div>
<footer class="w3-container w3-theme w3-center w3-margin-top">
<p>Find me on social media:</p>
<a href="https://twitter.com/axelbronder/"><i class="fab fa-twitter w3-xxlarge w3-margin-right w3-hover-opacity"></i></a>
<a href="https://github.com/brondera/"><i class="fab fa-github w3-xxlarge w3-margin-right w3-hover-opacity"></i></a>
<a href="https://www.linkedin.com/in/brondera/"><i class="fab fa-linkedin w3-xxlarge w3-hover-opacity"></i></a>
<p>
Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>
and <a href="https://www.oracle.com/cloud/free/" target="_blank">OCI Always Free Tier</a>
</p>
<p><a href="https://www.brondera.com">Back to brondera.com</a></p>
</footer>
</body>
</html>