<label class="flex flex-col border p-4">
Ayah id to surah/ayah
<input type="number" bind:value={ayah_id_input} placeholder="1-6236" class="border p-2"/>
<output class="mt-4">surah/ayah: {get_surah_ayah(ayah_id_input || 1)}</output>
</label>
<br />
<label class="flex flex-col border p-4">
surah + ayah to ayah id:
<div class="flex">
<input type="number" bind:value={surah_input} placeholder="1-114" class="border p-2" />
<input type="number" bind:value={ayah_input} placeholder="1-286" class="border p-2" />
</div>
<output class="mt-4">ayah_id: {abs_ayahs[(surah_input || 1) - 1] + (ayah_input || 1)}</output>
</label>
<script>
import {suwar, abs_ayahs} from './data.js'
import { onMount } from 'svelte'
function get_surah_ayah(ayah_id) {
for (var i = 0; ayah_id > suwar[i][0]; ayah_id -= suwar[i++][0]);
return [i + 1, ayah_id];
}
let ayah_id_input = ''
let surah_input = ''
let ayah_input = ''
onMount(() => {
document.body.insertAdjacentHTML('beforeend', '<div class="" hidden></div>') // tailwind
})
</script>
<style>
/* input[type=number] {