<div class="container">
  <form id="input">
    <input type="text" id="city" placeholder="Enter City Name">
    <input type="submit" value="Get Updates">
  </form>
  <div id="weatherContainer">
    <marquee id="cityName">Patna</marquee>
    <span id="temp">33°C</span>
    <span id="main">Cloudy</span>
    <marquee id="discription">few clouds</marquee>
    <img id="image" src="https://openweathermap.org/img/wn/02n@2x.png">
  </div>
</div>
body{
    background: #afaffc;
  margin-top:20px;
}
form{
    background:#ff8080;
    padding: 5px;
    width: fit-content;
    margin: 0 auto;
    border-radius: 10px;
}
input[type="text"]{
    font-size: 1em;
    border:0;
    padding:10px;
    border-radius: 10px 0 0 10px;
    outline: 0;
}
input[type="submit"]{
    font-size: 1em;
    border:0;
    padding:10px;
    border-radius: 0 10px 10px 0;
    cursor:pointer;
}

#weatherContainer{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background:rgb(158, 236, 158);
    padding: 20px;
    border-radius:15px;
    height:150px;
    width:300px;
    box-shadow: 0 0 20px 2px #5e5d5da9 ;
    
}

#cityName{
    position: absolute;
    top:0;
    left:0;
    font-size: 2.9em;
    width:290px;
    white-space: nowrap;
    overflow-x: scroll;
}

#image{
    position: absolute;
    top:10px;
    right:10px;
    background:#c6ccc1;
    height: 100px;
    border-radius: 50%;
    border: 0.2px dotted black;
    box-shadow: 0 0 20px 2px #bfd485 ;
}

#temp{
    position: absolute;
    bottom:20px;
    left:10px;
    font-size: 5em;
}

#main{
    position: absolute;
    bottom:40px;
    right:10px;
    font-size: 2em;

}

#discription{
    position: absolute;
    bottom:5px;
    right:0px;
    font-size: 1.1em;
    background:rgba(216, 250, 239, 0.555);
    border-radius: 0 0 10px 10px;
}
const input = document.querySelector("#input");
const city = document.querySelector("#city");

const cityName = document.querySelector("#cityName");
const Temp = document.querySelector("#temp");
const main = document.querySelector("#main");
const discription = document.querySelector("#discription");
const image = document.querySelector("#image");

input.onsubmit = (e) => {
  e.preventDefault();
  weatherUpdate(city.value);
  city.value = "";
};

weatherUpdate = (city) => {
  const xhr = new XMLHttpRequest();
  xhr.open(
    "GET",
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=cad7ec124945dcfff04e457e76760d90`);
  // in place of appid enter your open weather API Key
  // You can create it for free
  // https://home.openweathermap.org/users/sign_up

  xhr.send();
  xhr.onload = () => {
    if (xhr.status === 404) {
      alert("Place not found");
    } else {
      var data = JSON.parse(xhr.response);
      cityName.innerHTML = data.name;
      Temp.innerHTML = `${Math.round(data.main.temp - 273.15)}°C`;
      main.innerHTML = data.weather[0].main;
      discription.innerHTML = data.weather[0].description;
      image.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`;
    }
  };
};

weatherUpdate("patna");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.