-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
141 lines (115 loc) · 4.33 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 lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
<meta name="theme-color" content="#1a237e" />
<meta name="description" content="A simple PWA for converting currencies">
<link rel="shortcut icon" href="./icon.png" />
<title>💰 Converter</title>
<!-- manifest -->
<link rel="manifest" href="./manifest.json">
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link rel="stylesheet" defer href="https://use.fontawesome.com/releases/v5.1.0/css/solid.css" integrity="sha384-TbilV5Lbhlwdyc4RuIV/JhD8NR+BfMrvz4BL5QFa2we1hQu6wvREr3v6XSRfCTRp"
crossorigin="anonymous">
<link rel="stylesheet" defer href="https://use.fontawesome.com/releases/v5.1.0/css/fontawesome.css" integrity="sha384-ozJwkrqb90Oa3ZNb+yKFW2lToAWYdTiF1vt8JiH5ptTGHTGcN7qdoR1F95e0kYyG"
crossorigin="anonymous">
</head>
<body>
<nav class="indigo darken-4" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">
💰 Converter
</a>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br>
<br>
<br>
<div class="row center">
<h5 class="header col s12 light">Select Currencies To Convert </h5>
</div>
<br>
</div>
</div>
<div class="container">
<div class="section">
<div id="conversion_display" class="row center hide">
</div>
<div id="loader" class="row center hide">
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-indigo" style="border-color: indigo">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="input-field col s12 m8 offset-m2">
<select onchange="checkBtnState()" id="currency_1" class="currency_select">
<option value="" disabled selected>Select currency</option>
</select>
<label>From</label>
</div>
</div>
<div class="col s12 m12">
<div class="input-field col s12 m8 offset-m2">
<select onchange="checkBtnState()" id="currency_2" class="currency_select">
<option value="" disabled selected>Select currency</option>
</select>
<label>To</label>
</div>
</div>
</div>
<!-- -->
<div class="row">
<div class="col s12 m12">
<div class="input-field col s12 m8 offset-m2">
<input id="amount" oninput="checkBtnState()" type="number" class="validate">
<label for="amount">Amount</label>
</div>
</div>
<div id="result_box" class="col s12 m12">
<div class="input-field col s12 m8 offset-m2">
<input id="result" readonly type="number">
<label for="result">Result</label>
</div>
</div>
</div>
<div class="row center">
<button id="convert_btn" onClick="convert()" class="waves-effect waves-light btn-large indigo">
<i class="material-icons left">repeat</i>Convert</button>
</div>
</div>
<br>
<br>
</div>
<footer class="page-footer indigo darken-4">
<div class="footer-copyright center indigo darken-4 " style="padding-bottom: 10px">
<h6 class="right-center"> Made with
<i class="fas fa-heart"></i> by
<a class="white-text" target="_blank" href="https://github.com/thecodearcher">thecodearcher🏹 </a>
</h6>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/idb.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
</script>
</body>
</html>