nums2words-bg
Version:
Converts numbers to words in Bulgarian
207 lines (196 loc) • 6.79 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-8"
class="input"
onkeyup="outputNumber('input-8', nums2wordsBG.currency, {currency: 'btc'})"
/><br />
<input
type="number"
placeholder="Въведете сума в левове 🇧🇬"
id="input-c1"
class="input"
onkeyup="outputNumber('input-c1', nums2wordsBG.currency)"
/><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'})"
/>
<input
type="number"
placeholder="Въведете сума в евро 🇪🇺"
id="input-c10"
class="input"
onkeyup="outputNumber('input-c10', nums2wordsBG.currency, {currency: 'eur'})"
/>
</div>
<p id="output" class="transition"></p>
<script>
let timer;
let previousNumber;
// const euro = function () {
// return {
// euro: {
// labelBig: "евро",
// labelSmall: "цента",
// singular: { lv: "евро", st: "цент" },
// decimals: 100,
// def: { lv: "n", st: "m" },
// gender: {
// 1: { n: "едно", m: "един" },
// 2: { n: "двe", m: "два" },
// },
// },
// };
// };
function outputNumber(
input,
f,
options = { currency: "bgn" },
struct = null
) {
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(() => {
if (struct) {
outputElement.innerHTML = f(
number,
options,
struct
);
} else {
outputElement.innerHTML = f(number, options);
}
outputElement.classList.add("show");
}, 256);
} else {
outputElement.innerHTML = "";
}
}
window.onload = function () {
document.getElementById("input").focus();
};
</script>
</body>
</html>