How can I take input (page number) from the user and then look for the corresponding text that has that page number and display it for the user using this API = https://api.alquran.cloud/v1/page/${number}/quran-uthmani
If I clearly understand you, then you need this:
async function getVersesforpage(number) { //to get verses for a certain pagetry
try {
const url = `https://api.alquran.cloud/v1/page/${number}/quran-uthmani`;
const response = await fetch(url);
const data = await response.json();
const ayahs = data.data.ayahs;
const verses = ayahs.map(ayah => ayah.text);
return verses;
} catch (e) {
console.log("Error:", e.message)
}
}
const form = document.getElementById("form");
form.addEventListener("submit", async(event) => {
event.preventDefault();
const {
number
} = event.target.elements;
const value = number.value;
const verses = await getVersesforpage(value);
console.log(verses);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>بصائر</title>
<link href="css/stylesheet1.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/img/logo1.png" rel="icon">
<script type="module"></script>
</head>
<body>
<header class="header">
<form id="form">
<label for="number">رقم الصفحة</label>
<input id="number" placeholder="Search.." type="number">
<button class="fa fa-search" type="submit"></button>
</form>
</header>
<!--<script src="https://unpkg.com/localbase/dist/localbase.dev.js"></script>-->
<script src="js/main.js"></script>
</body>
</html>You can get the user value from any field by filed id using document.getElementById('idName').value. I prefered to edit you code a bit now the below code returns the result from API.
async function getVersesforpage(pageNumber) {//to get verses for a certain pagetry
try {
const url = `https://api.alquran.cloud/v1/page/${pageNumber}/quran-uthmani`;
const response = await fetch(url);
const verses = await response.json();
return verses;
}
catch (e) {
console.log("Error:", e.message)
}
}
document.getElementById("form").addEventListener("submit", async (event) => {
event.preventDefault();
const pageNumber = document.getElementById('number').value;
const verses = await getVersesforpage(pageNumber);
console.log(verses.data);
});