nums2words-bg
Version:
Converts numbers to words in Bulgarian
157 lines (147 loc) • 5.29 kB
HTML
<html>
<head>
<title>Number to Words Example</title>
<meta charset="UTF-8" />
<script type="module">
import nums2wordsBG from "./src/index.js";
window.nums2wordsBG = nums2wordsBG;
</script>
<link
href="https://fonts.googleapis.com/css?family=Didact Gothic"
rel="stylesheet"
/>
<link rel="apple-touch-icon" sizes="180x180" href="fav/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="fav/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="fav/favicon-16x16.png" />
<link rel="manifest" href="fav/site.webmanifest" />
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100vh;
margin: 0;
padding: 0;
font-family: "Didact Gothic";
}
#container {
margin-top: 5%;
width: 100%;
max-width: 400px;
text-align: center;
}
.input,
#output {
font-size: 18px;
padding: 10px;
text-align: center;
box-sizing: border-box;
margin-bottom: 20px;
}
.input {
width: 300px;
}
.input::placeholder {
text-align: right;
padding-right: 32px;
}
#output {
font-size: 24px;
text-align: center;
width: 70%;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.transition {
opacity: 0;
transition: opacity 0.5s ease-out;
}
.transition.show {
opacity: 1;
}
h3 {
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="container">
<h3>nums2words-bg 🇧🇬</h3>
<input
type="number"
placeholder="Въведете число цифром"
id="input"
class="input"
onkeyup="outputNumber('input', nums2wordsBG)"
/><br />
<input
type="number"
placeholder="Въведете сума в левове 🇧🇬"
id="input-c1"
class="input"
onkeyup="outputNumber('input-c1', nums2wordsBG.currency)"
/><br />
<input
type="number"
placeholder="Въведете биткойн сума ₿"
id="input-8"
class="input"
onkeyup="outputNumber('input-8', nums2wordsBG.currency, {currency: 'btc'})"
/><br />
<input
type="number"
placeholder="Въведете сума в юани 🇨🇳"
id="input-c4"
class="input"
onkeyup="outputNumber('input-c4', nums2wordsBG.currency, {currency: 'cny'})"
/><br />
<input
type="number"
placeholder="Въведете сума в рубли 🇷🇺"
id="input-c2"
class="input"
onkeyup="outputNumber('input-c2', nums2wordsBG.currency, {currency: 'rub'})"
/><br />
<input
type="number"
placeholder="Въведете сума в долари 🇺🇸"
id="input-c3"
class="input"
onkeyup="outputNumber('input-c3', nums2wordsBG.currency, {currency: 'usd'})"
/>
</div>
<p id="output" class="transition"></p>
<script>
let timer;
let previousNumber;
function outputNumber(input, f, options = { currency: "bgn" }) {
const inputElement = document.getElementById(input);
const outputElement = document.getElementById("output");
const number = inputElement.value;
if (number === previousNumber) return;
if (number) {
previousNumber = number;
if (timer) {
clearTimeout(timer);
}
outputElement.classList.remove("show");
timer = setTimeout(() => {
outputElement.innerHTML = f(number, options);
outputElement.classList.add("show");
}, 256);
} else {
outputElement.innerHTML = "";
}
}
window.onload = function () {
document.getElementById("input").focus();
};
</script>
</body>
</html>