How do i take input from user and search api?-CodePudding

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

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 verses = await response.json();
        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.data);
});

<!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 >

      <form id="form">
        <label for="number">رقم الصفحة</label>
        <input id="number" placeholder="Search.." type="number">
        <button  type="submit"></button>
      </form>
    </ul>
</header>

<!--<script src="https://unpkg.com/localbase/dist/localbase.dev.js"></script>-->
<script src="js/main.js"></script>
</body>
</html>

CodePudding user response：

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 >
    <form id="form">
      <label for="number">رقم الصفحة</label>
      <input id="number" placeholder="Search.." type="number">
      <button  type="submit"></button>
    </form>
  </header>

  <!--<script src="https://unpkg.com/localbase/dist/localbase.dev.js"></script>-->
  <script src="js/main.js"></script>
</body>

</html>

CodePudding user response：

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);
});