OpenWeather API - 256 Characters

#frontendchallenge #devchallenge #javascript #webdev

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

Explainer

open weather API is a weather forecast based API that is best and easy to implement, it gives the info about weather all over the world easily and quickly, with this we can create our own weather update application

Additional Context

https://codepen.io/safikumar00/pen/GReJQZz

This is my first project with API and I have choosen the weather application and integrated it with Open Weather Api as my choice, please check that out.

Top comments (2)

FullZero • Mar 27 • Edited

<div class="sec p"><input type="input" value="Visakhapatnam" class="enter" id="city-name" required><button class="submit" type="button" onclick="run()">Submit</button></div>

const $ = (id) => document.getElementById(id);
const d = new Date();
let temp;
let feel;
const apiKey = "0cefbdd8089c7b724b58eac94e84c704";
$("year").innerHTML = d.getFullYear();
$("date").innerHTML = d.getDate();
$("month").innerHTML = d.toLocaleString("default", { month: "long" });
$("day").innerHTML = d.toLocaleString("default", { weekday: "short" });

function run() {
  let apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${$("city-name").value}&appid=${apiKey}`;
  fetch(apiUrl)
    .then((response) => response.json())
    .then((data) => { 
      const { weather, name, main } = data
      $("feel").innerHTML = weather[0].main
      $("name").innerHTML = `Weather Today At ${name}`;
      temp = main.temp;
      temp -= 273.15;
      $("temp").innerHTML = Math.floor(temp);
    })
    .catch((error) => alert("Enter correct City name"));
}
run();