Skip to content

Commit c656e3a

Browse files
MattCSmithMattCSmith
authored
Merge pull request zero-to-mastery#38 from Almopt/AlmoptChallenge-44
added my Code-Challenge-44
2 parents dda51c9 + 2bd23fc commit c656e3a

File tree

2 files changed

+370
-0
lines changed

2 files changed

+370
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ Now, once you've forked this repo and got a local version up on your computer, f
5050
- [Digital Clock](./submissions/Mariano-JR.html) - By: [Mariano-JR](https://github.com/Mariano-JR)
5151
- [Pricing Page](/submissions/mohakgupt.html) - By: [Mohak](https://github.com/mohakgupt)
5252
- [Typewriter Effect](/submissions/alexwindy0.html) - By: [Alex](https://github.com/Alexwindy0)
53+
- [Satoshi's Converter](/submissions/Almopt.html) - By: [Almopt](https://github.com/Almopt)
5354
- [Tic tac toe](./submissions/sherawat-Lokesh.html) -By: [sherawat-Lokesh](https://github.com/sherawat-Lokesh)
5455
- [House Garbage Management website](/submissions/Fly0w.html) - By: [Fly0w](https://github.com/Fly0w)
5556

‎submissions/Almopt.html‎

Lines changed: 369 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,369 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Satoshis Converter</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap" rel="stylesheet">
11+
<style>
12+
body {
13+
font-family: 'Maven Pro', sans-serif;
14+
}
15+
16+
header {
17+
text-align: center;
18+
}
19+
20+
h1 {
21+
font-family: 'Itim', cursive;
22+
color: #f79412;
23+
}
24+
25+
.container {
26+
max-width: 35rem;
27+
min-height: 30rem;
28+
margin: auto;
29+
}
30+
31+
.main-border {
32+
min-height: 30rem;
33+
background-color: rgb(250, 248, 248);
34+
border: solid 1.5px #f79412;
35+
border-radius: 5px;
36+
padding: 1rem 0;
37+
display: flex;
38+
flex-direction: column;
39+
}
40+
41+
.convert-title {
42+
font-size: 1.3rem;
43+
text-align: center;
44+
}
45+
46+
.currencies-inputs {
47+
gap: 20px;
48+
display: flex;
49+
flex-direction: column;
50+
align-items: center;
51+
}
52+
53+
.currency-borders {
54+
border: solid 1.5px gainsboro;
55+
background-color: aliceblue;
56+
border-radius: 8px;
57+
min-width: 20rem;
58+
display: flex;
59+
flex-direction: column;
60+
gap: 6px;
61+
padding: 5px 2px;
62+
}
63+
64+
.currency-header {
65+
margin: 5px 10px;
66+
opacity: 0.6;
67+
display: flex;
68+
justify-content: space-between;
69+
}
70+
71+
p {
72+
margin: 0;
73+
}
74+
75+
.currency-main-container {
76+
margin: 2px 10px;
77+
display: flex;
78+
justify-content: space-between;
79+
}
80+
81+
.currency-logo-symbol {
82+
display: flex;
83+
gap: 10px;
84+
max-width: 60px;
85+
}
86+
87+
.currency-symbol {
88+
opacity: 0.6;
89+
}
90+
91+
.currency-symbol-name {
92+
display: flex;
93+
flex-direction: column;
94+
gap: 5px;
95+
}
96+
97+
.currency-amount {
98+
align-self: center;
99+
font-size: 24px;
100+
}
101+
102+
.sats-amount {
103+
align-self: center;
104+
font-size: 24px;
105+
}
106+
107+
.currency-logo {
108+
align-self: center;
109+
}
110+
111+
.buttons-container {
112+
margin-top: 30px;
113+
text-align: center;
114+
}
115+
116+
.icon-swap-currency-button {
117+
font-size: 1.5em;
118+
align-self: center;
119+
border: none;
120+
background: none;
121+
cursor: pointer;
122+
}
123+
124+
.icon-swap-currency-button:hover {
125+
color: #f79412;
126+
}
127+
128+
.button {
129+
font-family: 'Itim', cursive;
130+
font-size: 20px;
131+
font-weight: 500;
132+
display: inline-flex;
133+
height: 50px;
134+
padding: 0;
135+
background: #f79412;
136+
border: none;
137+
outline: none;
138+
border-radius: 5px;
139+
overflow: hidden;
140+
cursor: pointer;
141+
}
142+
143+
.button:hover {
144+
background: #ee8e0f;
145+
}
146+
147+
.button:active {
148+
background: #ab6203;
149+
}
150+
151+
.button-text,
152+
.button-icon {
153+
display: inline-flex;
154+
align-items: center;
155+
padding: 0 24px;
156+
color: white;
157+
height: 100%;
158+
}
159+
160+
.button-icon {
161+
font-size: 1.5em;
162+
background-color: rgba(0, 0, 0, 0.08);
163+
}
164+
165+
.currency-input {
166+
border: none;
167+
background: none;
168+
font-size: 24px;
169+
border: none transparent;
170+
outline: none;
171+
text-align: right;
172+
max-width: 180px;
173+
}
174+
175+
footer {
176+
text-align: center;
177+
}
178+
179+
.disclaimer {
180+
margin-top: 25px;
181+
display: flex;
182+
justify-content: center;
183+
gap: 8px;
184+
}
185+
186+
.disclaimer p {
187+
font-size: 10px;
188+
}
189+
190+
</style>
191+
</head>
192+
<body>
193+
194+
<header>
195+
<h1>Satoshi's Converter</h1>
196+
</header>
197+
198+
<main>
199+
<div class="container">
200+
<div class="main-border">
201+
202+
<h2 class="convert-title">Convert EUR/USD into BTC and Satoshis</h2>
203+
204+
<div class="currencies-inputs">
205+
206+
<div class="currency-borders">
207+
208+
<div class="currency-header">
209+
<p>Currency</p>
210+
<p>Amount</p>
211+
</div>
212+
213+
<div class="currency-main-container">
214+
215+
<div class="currency-logo-symbol">
216+
<div class="currency-logo">
217+
<img src="https://cdn-icons-png.flaticon.com/512/126/126252.png?w=826&t=st=1675967593~exp=1675968193~hmac=505745616d456816c7063dfa588892bfb33f9fd7d0053167fcbe57c0ea977bd6" id="fiat-logo" width="30" height="30">
218+
</div>
219+
<div class="currency-symbol-name">
220+
<p id="currency-name">Euro</p>
221+
<p class="currency-symbol" id="fiat-currency-symbol">EUR</p>
222+
</div>
223+
<button class="icon-swap-currency-button" id="swap-button">
224+
<ion-icon name="swap-vertical-outline"></ion-icon>
225+
</button>
226+
</div>
227+
228+
<div class="currency-amount">
229+
<input class="currency-input" type="text" value="20000" maxlength='10'>
230+
</div>
231+
</div>
232+
</div>
233+
234+
<div class="currency-borders">
235+
<div class="currency-header">
236+
<p>Currency</p>
237+
<p>Amount</p>
238+
</div>
239+
240+
<div class="currency-main-container">
241+
242+
<div class="currency-logo-symbol">
243+
<div class="currency-logo">
244+
<img src="https://upload.wikimedia.org/wikipedia/commons/4/46/Bitcoin.svg" width="30" height="30">
245+
</div>
246+
<div class="currency-symbol-name">
247+
<div>
248+
Bitcoin
249+
</div>
250+
<div class="currency-symbol">
251+
BTC
252+
</div>
253+
</div>
254+
</div>
255+
256+
<div class="currency-amount" id="btc-amount">
257+
1
258+
</div>
259+
</div>
260+
</div>
261+
262+
<div class="currency-borders">
263+
<div class="currency-header">
264+
<p>Currency</p>
265+
<p>Amount</p>
266+
</div>
267+
268+
<div class="currency-main-container">
269+
270+
<div class="currency-logo-symbol">
271+
<div class="currency-logo">
272+
<img src="https://upload.wikimedia.org/wikipedia/commons/4/46/Bitcoin.svg" width="30" height="30">
273+
</div>
274+
<div class="currency-symbol-name">
275+
<div>
276+
Satoshis
277+
</div>
278+
<div class="currency-symbol">
279+
SATS
280+
</div>
281+
</div>
282+
</div>
283+
284+
<div class="sats-amount" id="sat-amount">
285+
100000000
286+
</div>
287+
</div>
288+
</div>
289+
290+
</div>
291+
292+
<div class="buttons-container">
293+
<button type="button" class="button">
294+
<span class="button-text">Convert</span>
295+
<span class="button-icon">
296+
<ion-icon name="sync-outline"></ion-icon>
297+
</span>
298+
</button>
299+
</div>
300+
301+
<div class="disclaimer">
302+
<ion-icon name="alert-circle-outline"></ion-icon>
303+
<p>
304+
BTC values for EUR and USD currencies <br>are not up to date. This project has one <br>purpose only and that is to practice.
305+
</p>
306+
</div>
307+
308+
</div>
309+
</div>
310+
</main>
311+
312+
<footer>
313+
<h4>Made by Almopt</h4>
314+
</footer>
315+
316+
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
317+
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
318+
<script>
319+
320+
const btcPriceEUR = 20000;
321+
const btcPriceUSD = 23000;
322+
const oneBtcInSats = 100000000;
323+
const EURImg = "https://cdn-icons-png.flaticon.com/512/126/126252.png?w=826&t=st=1675967593~exp=1675968193~hmac=505745616d456816c7063dfa588892bfb33f9fd7d0053167fcbe57c0ea977bd6";
324+
const USDImg = "https://cdn-icons-png.flaticon.com/512/117/117626.png?w=826&t=st=1675967862~exp=1675968462~hmac=8075584ec0c311d1304ca9c3ca8578dc359ff9675d74a3710ff8303d522824b0";
325+
const euroSymbol = "EUR";
326+
const dollarSymbol = "USD";
327+
const euroName = "Euro";
328+
const dollarName = "Dollar";
329+
330+
let swapButton = document.getElementById("swap-button");
331+
let amountInput = document.querySelector(".currency-input");
332+
let btcAmount = document.getElementById("btc-amount");
333+
let satAmount = document.getElementById("sat-amount");
334+
let convertButton = document.querySelector(".button");
335+
let currencyLogo = document.getElementById("fiat-logo");
336+
let currencyName = document.getElementById("currency-name");
337+
let currencySymbol = document.getElementById("fiat-currency-symbol");
338+
let swapCurrencyButton = document.getElementById("swap-button");
339+
340+
const convertFiatToBTC = (event, currencySymbol) => {
341+
342+
let btcPriceInFiat = (currencySymbol.textContent === euroSymbol) ? btcPriceEUR : btcPriceUSD;
343+
344+
btcAmount.innerText = (Number(amountInput.value) / btcPriceInFiat).toFixed(5);
345+
satAmount.innerText = (btcAmount.innerText * oneBtcInSats).toFixed(3);
346+
347+
if (satAmount.innerText > 1000000000) {
348+
satAmount.style.fontSize = '17px';
349+
}
350+
}
351+
352+
const swapFiatCurrency = () => {
353+
if (currencySymbol.textContent === euroSymbol) {
354+
currencyName.textContent = dollarName;
355+
currencySymbol.textContent = dollarSymbol;
356+
currencyLogo.src = USDImg;
357+
}else {
358+
currencyName.textContent = euroName;
359+
currencySymbol.textContent = euroSymbol;
360+
currencyLogo.src = EURImg;
361+
}
362+
}
363+
364+
swapButton.addEventListener("click", swapFiatCurrency);
365+
convertButton.addEventListener("click", () => convertFiatToBTC(event, currencySymbol));
366+
367+
</script>
368+
</body>
369+
</html>

0 commit comments

Comments
 (0)