Search code examples
javascripthtmlcssdebuggingbackground

Annoying Square Appears as Background Image in Weather App

Hi i recently started a project in js which is called a Weather App . Im making this project to like learn fetch api and later on ill add css trsnsitions and animations anyways ive did the whole project functional and everything but the prob is look Problem As you can see my fellow programmers there is this annoying square in the like home screen thingy i want to know how to remove it

Js Code :

const apiKey = "6997e66c1b3106660cb9cef841fd76f6";
const cityInp = document.getElementById("Cityinput");
const weatherImage = document.getElementById("weatherImage");

function Search() {
  const city = cityInp.value;
  fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
  )
    .then((resp) => resp.json())
    .then((data) => {
      const Weatherinfo = document.getElementById("weatherDetails");
      let weatherCondition = "";

      if (data.weather && data.weather.length > 0) {
        weatherCondition = data.weather[0].main;
      }
      const celsiusTemperature = parseInt(data.main.temp) - 273.15;
      const details = `<h2>${data.name}</h2>
            <p>${weatherCondition}</p>
            <p>Temperature: ${celsiusTemperature.toFixed(2)}°C</p>`;
      Weatherinfo.innerHTML = details;

      switch (weatherCondition) {
        case "Clear":
          weatherImage.src = "images/clear.png";
          break;
        case "Clouds":
          weatherImage.src = "images/cloud.png";
          break;
        case "Rain":
          weatherImage.src = "images/rain.png";
          break;
        case "Snow":
          weatherImage.src = "images/snow.png";
          break;
        case "Haze":
          weatherImage.src = "images/mist.png";
          break;
        default:
          weatherImage.src = "images/def.png";
      }
    });
}

Html Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
    <link rel="stylesheet" href="style.css">
    <title>Weather App</title>
</head>
<body>
    <div class="Entry">
        <input type="text" id="Cityinput" placeholder="Enter a location">
        <button onclick="Search()"><span class="material-symbols-outlined">
            search
            </span></button>
        </div>
    <div id="weatherDetails">
    </div>
    <img src="" alt="" id="weatherImage">

    
</body>
<script src="Fetch.js"></script>
</html>

Ive been trying to remove the square , i tried, changing background of the switch case default image at the end to a similar image of the background nothing happened and please if you answer try to also explain while answering im a quiite begiiner

Solution

  • That "annoying square" is the <img> element:

    <img src="" alt="" id="weatherImage">

    It's not displaying an image because, well, what image do you expect it to display? The src attribute specifies the source of the image. And "" doesn't specify anything. So it's successfully displaying the (lack of) image specified. (The icon within the square is the browser's default indication that the page is trying and failing to show an image.)

    One approach would be to display a default image of some kind. Something like:

    <img src="" alt="images/def.png" id="weatherImage">

    (Or whatever default image value you'd want to display.)

    Another option is to style the element to be hidden. For example, you can add a CSS class to hide something:

    .hidden {
  display: none;
}

    And include that class in the element by default:

    <img src="" alt="" id="weatherImage" class="hidden">

    Then in your JavaScript code, remove that class when displaying an image:

    weatherImage.classList.remove("hidden");

    If at any point you want to re-hide the element, just add the class again:

    weatherImage.classList.add("hidden");