I will make a fetch get request and this is entrire html js code however it does not work

JavaScript
1 
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>openworldweather</title>
    <link rel="stylesheet" href="./style.css"/>   
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <nav class="navbar bg-light navbar-expand-lg">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">
          <img src="./assets/Untitled design-modified.png" alt="Logo" width="80" height="65" class="d-inline-block align-text-top">
          OpenWorldWeather
        </a>
      </div>
        <a class="nav-link" href="#" style="margin: 6px; border-radius: 5px; background: linear-gradient(-45deg,aqua,lightgreen,white); font-size: 14px; ">Home</a>
        <a class="nav-link" href="#" style="margin: 10px; font-size: 14px; background: linear-gradient(-45deg,aqua,lightgreen,white); border-radius: 5px; border: 1px; border-style: outset; border-color: black;">Weather</a>
        <a class="nav-link" href="#" style="margin: 6px; font-size: 12px; background: linear-gradient(-45deg,aqua,lightgreen,white); border-radius: 10px;">Who Developed OpenWorldWeather?</a>
      
    </nav>
    <form class="d-flex" role="search">
      <input style="font-size: 16px;" class="form-control me-2" type="text" id="searchbarquery" placeholder="Search a Capital City Weather e.g. Istanbul" aria-label="Search">
      <button onclick="getWeather();"  class="btn btn-dark btn-outline-light" id="searchbuttonsc"type="submit"><span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
      </svg></span></button>
    </form>
    <div class="container">
      <div class="card">
        <div class="imgBx">
          <img src="">
        </div>
        <div class="contentBx weather">
          <h2>Nike Shoes</h2>
          <div class="size">
            <h3>Size :</h3>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
          </div>
          <div class="color">
            <h3>Color :</h3>
            <span></span>
            <span></span>
            <span></span>
          </div>
          <a href="#">Buy Now</a>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <script>
   
      let takenInput = document.getElementById("searchbarquery").value; 
      takenInput = takenInput.toString(); 
      takenInput = takenInput.toLowerCase();
      let urlQuery = `https://triall.ali-ereneren12.repl.co/api/${takenInput}`;
      
      const getWeather = () => {
        const sendGetWeather = async () => {
          try{
            const response = await axios.get(urlQuery); 
            console.log(response);
          }catch (err) {
              console.log(err); 
          }
        };
        sendGetWeather();
      }

    </script>
  </body>
</html>

I want to get input from search bar convert to full non capital small then make a fetch get request to get data and after will display data in div boxes.

Here image of the input box i am talking about

openworldweather
openworldweather1912×86 14.9 KB

this is input box and a search button next to it onclick i want to get data with fetch and display in div boxes.

Thanks For Any Help From now on .

2

I can’t try it right now but you have to add a listener to the search bar, maybe an onChange event. Also you can take the input value in the getWeather method. Other way you are getting the value when the page load but you aren’t refreshing that value when the user writes on the input.
I think that the better soluttion is moving

 let takenInput = document.getElementById("searchbarquery").value; 
      takenInput = takenInput.toString(); 
      takenInput = takenInput.toLowerCase();

inside to the getWeather method.

Next, after checked that you can load the data you can use the same way to insert the data into the divs, you can “grab” the divs by its id but you also can have one div, grab that dive then use appendChild to iterate your data and create the divs with the content

4

Thank you this solved my problem you are a legend.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.