'How do i take input from user and search api?

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

javascripthtml


Solution 1:[1]

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>

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 EzioMercer
Solution 2 Mehrwarz

Related Questions