Demo wasm build. First ever PWA app.
This commit is contained in:
parent
97c52de2cf
commit
17050ed4d6
|
|
@ -0,0 +1,38 @@
|
|||
html {
|
||||
background: rgb(243, 243, 243);
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#converter {
|
||||
width: 15rem;
|
||||
padding: 2rem;
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 0 2rem 0 #0001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#converter input, #converter select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin-block-end: 1rem;
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
#converter #output-temp {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
const inputField = document.getElementById('input-temp');
|
||||
const fromUnitField = document.getElementById('input-unit');
|
||||
const toUnitField = document.getElementById('output-unit');
|
||||
const outputField = document.getElementById('output-temp');
|
||||
const form = document.getElementById('converter');
|
||||
|
||||
function convertTemp(value, fromUnit, toUnit) {
|
||||
if (fromUnit === 'c') {
|
||||
if (toUnit === 'f') {
|
||||
return value * 9 / 5 + 32;
|
||||
} else if (toUnit === 'k') {
|
||||
return value + 273.15;
|
||||
}
|
||||
return value
|
||||
}
|
||||
if (fromUnit === 'f') {
|
||||
if (toUnit === 'c') {
|
||||
return (value - 32) * 5 / 9;
|
||||
} else if (toUnit === 'k') {
|
||||
return (value + 459.67) * 5 / 9;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
if (fromUnit === 'k') {
|
||||
if (toUnit === 'c') {
|
||||
return value - 273.15;
|
||||
} else if (toUnit === 'f') {
|
||||
return value * 9 / 5 - 459.67;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
throw new Error('Invalid unit');
|
||||
}
|
||||
|
||||
form.addEventListener('input', () => {
|
||||
const inputTemp = parseFloat(inputField.value);
|
||||
const fromUnit = fromUnitField.value;
|
||||
const toUnit = toUnitField.value;
|
||||
|
||||
const outputTemp = convertTemp(inputTemp, fromUnit, toUnit);
|
||||
outputField.value = (Math.round(outputTemp * 100) / 100) + ' ' + toUnit.toUpperCase();
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="stylesheet" href="converter.css">
|
||||
<title>Temperature converter</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1> Temperature Converter </h1>
|
||||
<form id="converter">
|
||||
<label for="input-temp">temperature</label>
|
||||
<input type="text" id="input-temp" name="input-temp" value="20" />
|
||||
<label for="input-unit">from</label>
|
||||
<select id="input-unit" name="input-unit">
|
||||
<option value="c" selected>Celsius</option>
|
||||
<option value="f">Fahrenheit</option>
|
||||
<option value="k">Kelvin</option>
|
||||
</select>
|
||||
<label for="output-unit">to</label>
|
||||
<select id="output-unit" name="output-unit">
|
||||
<option value="c">Celsius</option>
|
||||
<option value="f" selected>Fahrenheit</option>
|
||||
<option value="k">Kelvin</option>
|
||||
</select>
|
||||
<output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
|
||||
</form>
|
||||
<script src="converter.js"></script>
|
||||
<script>
|
||||
if('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js', { scope: '/' });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"lang": "en-us",
|
||||
"name": "Temperature converter app",
|
||||
"short_name": "Temperature converter",
|
||||
"description": "A basic temperature converter application",
|
||||
"start_url": "/",
|
||||
"background_color": "#2f3d58",
|
||||
"theme_color": "#2f3d58",
|
||||
"orientation": "any",
|
||||
"display": "standalone",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon512.png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
const CACHE_NAME = 'temperature-converter-v1';
|
||||
|
||||
self.addEventListener('install', event => {
|
||||
event.waitUntil((async () => {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
cache.addAll([
|
||||
'/',
|
||||
'/converter.js',
|
||||
'/converter.css',
|
||||
]);
|
||||
})());
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', event => {
|
||||
event.respondWith((async () => {
|
||||
const cache = await caches.open(CACHE_NAME);
|
||||
const cachedResponse = await cache.match(event.request);
|
||||
if (cachedResponse) {
|
||||
return cachedResponse;
|
||||
} else {
|
||||
try {
|
||||
const fetchResponse = await fetch(event.request);
|
||||
cache.put(event.request, fetchResponse.clone());
|
||||
return fetchResponse;
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
})());
|
||||
});
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
[package]
|
||||
name = "kifu-wasm"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[lib]
|
||||
crate-type = ["cdylib"]
|
||||
|
||||
[dependencies]
|
||||
wasm-bindgen = "0.2"
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
pub fn add(left: usize, right: usize) -> usize {
|
||||
left + right
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn it_works() {
|
||||
let result = add(2, 2);
|
||||
assert_eq!(result, 4);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue