Skip to content

Commit

Permalink
add currency converter for trip
Browse files Browse the repository at this point in the history
  • Loading branch information
jere-mie committed Nov 9, 2024
1 parent 317ba22 commit 8e2ec95
Show file tree
Hide file tree
Showing 5 changed files with 184 additions and 0 deletions.
Binary file added currency/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
97 changes: 97 additions & 0 deletions currency/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currency Converter</title>

<meta property="og:site_name" content="Currency Converter" />
<meta property="og:title" content="Currency Converter" />
<meta property="og:description" content="Easily converts Canadian Dollars to other currencies" />
<meta property="og:type" content="website" />

<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" href="icon.png">
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 1rem;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

input[type="text"] {
padding: 0.5rem;
margin: 10px;
font-size: 1.5rem;
width: 100%;
max-width: 500px;
border: none;
border-radius: 0.25rem;
background-color: #e0e0e0;
transition: background-color 0.2s ease-in-out;
}

input[type="text"]:focus {
background-color: #d0d0d0;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Currency Converter</h1>
<div style="display: flex; flex-direction: column; align-items: center;">
<div>
<label for="cad">🍁 CAD</label>
<input type="text" name="cad" id="cad" value="0.0">
</div>
<div>
<label for="usd">⭐ USD</label>
<input type="text" name="usd" id="usd" value="0.0">
</div>
<div>
<label for="dop">🏝️ DOP</label>
<input type="text" name="dop" id="dop" value="0.0">
</div>
</div>

<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js').then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
}).catch(error => {
console.error('Service Worker registration failed:', error);
});
}

const currencies = {
"cad": 1.0,
"usd": 0.72,
"dop": 43.46,
};

const cad = document.getElementById("cad");
const usd = document.getElementById("usd");
const dop = document.getElementById("dop");

cad.addEventListener("input", convert);
usd.addEventListener("input", convert);
dop.addEventListener("input", convert);

function convert(event) {
const value = event.target.value;
const fromCurrency = event.target.id;
for (const currency in currencies) {
if (currency !== fromCurrency) {
const otherCurrency = document.getElementById(currency);
const otherValue = value * currencies[currency] / currencies[fromCurrency];
otherCurrency.value = otherValue.toFixed(2);
}
}
}
</script>
</body>
</html>
21 changes: 21 additions & 0 deletions currency/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"name": "Currency Converter",
"short_name": "Currency Converter",
"start_url": "/currency/index.html",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/currency/icon.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/currency/icon.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

65 changes: 65 additions & 0 deletions currency/service-worker.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const CACHE_NAME = 'currency-converter-cache-v1';
const urlsToCache = [
'/currency/',
'/currency/index.html',
'/currency/manifest.json',
'/currency/icon.png',
// Add other resources you want to cache
];

// Install the service worker and cache the necessary resources
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});

// Fetch resources and use the cache if the network is not available
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => {
// Cache hit - return the response from the cache
if (response) {
return response;
}
// Clone the request, fetch it, cache it, and return the response
const fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
response => {
// Check if we received a valid response
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
// Clone the response, cache it, and return it
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});

// Update the service worker
self.addEventListener('activate', event => {
const cacheWhitelist = [CACHE_NAME];
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cacheName => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ <h1>Current Projects List</h1>
<li><a href="terminal/">Web Terminal Simulator</a></li>
<li><a href="accent-remover/">Accent Remover</a></li>
<li><a href="common/">Common Files (CSS libraries and templates)</a></li>
<li><a href="currency/">Currency Converter</a></li>
</ul>
</nav>
<script src="script.js"></script>
Expand Down

0 comments on commit 8e2ec95

Please sign in to comment.