Create a Weather API.(ANY LANUGUAGE). " that pulls out information from web and stores the data...

Create a Weather API.(ANY LANUGUAGE). "
that pulls out information from web and stores the data in back end.
in which users can enter location: city or zip code to get the weather of that city or state.

weather info should be in degree farenhit and centigrade. it should show the images as you see in you phone for weather and speed, etc.

and it should change picture according to weather. for example, rain, cloudy, sunny, night, thunder.

SHOW THE OUTPUT. please help me out in creating the code please.

Expert Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App </title>
  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <div class="app-wrap">
    <header>
      <input type="text" autocomplete="off" class="search-box" placeholder="Enter your location..." /> 
    </header>
    <main>
      <section class= "location">
        <div class="city">Hyderabad, IN</div>
        <div class="date">Thursday 23 July 2020</div>
      </section>
      <div class="current">
        <div class="temp">25<span>°c</span></div>
        <div class="weather">Rainy</div>
        <div class="hi-low">20°c / 23°c</div>
      </div>
    </main>
  </div>
  <script src="main.js"></script>
</body>
</html>

main.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "montserrat", sans-serif;
  background-image: url("bg1.gif");
  background-size: cover;
  background-position: top center;
}

.app-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.1)
  );
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 15px 15px;
}
header input {
  width: 100%;
  max-width: 280px;
  padding: 10px 15px;
  border: none;
  outline: none;
  background-color: rgba(59, 104, 85, 0.3);
  border-radius: 0px 16px 0 16px;
  border-bottom: 3px solid rgb(31, 56, 31);
  color: #fff;
  font-size: 25px;
  font-weight: 500;
  text-align: center;
  transition: 0.2s ease-out;
}

header input:focus {
  background-color: rgba(255, 255, 255, 0.6);
}
main{
    flex: 1 1 100%;
    padding: 25px 25px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.location .city {
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 5px;
}
.location .date{
    color: #fff;
    font-size: 16px;
}
.current .temp{
    color: #fff;
    font-size: 102px;
    font-weight: 700;
    margin: 30px 0;
    text-shadow: 2px 5px rgba(0, 0 ,0 , 0.5);
}
.current .temp .span{
    font-weight: 500;
}
.current .weather {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 15px;
    text-shadow: 0px 3px rgba(0,0,0,0.4);
}
.current .hi-low{
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-shadow: 0px 4px rgba(0,0,0,0.4);
}

main.js

const api = {
  key: "2792161521b8698fbf35df49c42109de",
  base: "https://api.openweathermap.org/data/2.5/",
};
const searchbox = document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);

function setQuery(evt) {
  if (evt.keyCode == 13) {
    getResults(searchbox.value);
  }
}

function getResults(query) {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
    .then((weather) => {
      return weather.json();
    })
    .then(displayResults);
}
function displayResults(weather) {
  let city = document.querySelector(".location .city");
  city.innerText = `${weather.name}, ${weather.sys.country}`;

  let now = new Date();
  let date = document.querySelector(".location .date");
  date.innerText = dateBuilder(now);

  let temp = document.querySelector(".current .temp");
  temp.innerHTML = `${Math.round(weather.main.temp)}<span>°c</span>`;

  let weather_el = document.querySelector(".current .weather");
  weather_el.innerText = weather.weather[0].main;

  let hilow = document.querySelector(".hi-low");
  hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(
    weather.main.temp_max
  )}°c`;
}
function dateBuilder(d) {
  let months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  let days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];

  let day = days[d.getDay()];
  let date = d.getDate();
  let month = months[d.getMonth()];
  let year = d.getFullYear();

  return `${day} ${date} ${month} ${year}`;
}

I have uploaded the code for HTML, css and JavaScript. I have used my API to get the weather of any location.

you can use my API or you can create your own API by going to base url.

Thank You...

venereology answered 1 month ago

i want to create a weather api. which is pullling out information of all the cities(for...

i want to create a weather api. which is pullling out information of all the cities(for the whole world) using their names or by their zipcode. and it should change the background image as the temperature is, cold, or hot, or mild etc. i need in help in making this weather api and also it can be in any language. please help me out

I want to create a d3 map visualization with timeseries data which pulls data from a...

I want to create a d3 map visualization with timeseries data which pulls data from a mysql table. The map will change data every second which would jump from data which contain x datetime to data which contain x+1 datetime (for example January 1 data to January 2). How can I do this? I already know how to set up a Flask API using Python which connects my visual to the database. I just need the SQL Query to change...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

Credit Pulls Databases • Should consumers trust / rely on information from a so-called credit pulls...

Credit Pulls Databases • Should consumers trust / rely on information from a so-called credit pulls database? • What are the biggest problems with making financial decisions based on anecdotal, crowdsourced info? • Is it possible for an individual to independently and accurately predict his or her odds of getting approved for a given credit card and receiving a certain spending limit? Is it worth trying?

After learning the web course, write out the main steps about create a dynamic web with...

After learning the web course, write out the main steps about create a dynamic web with various different elements. kindly write main steps with various different element.

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...

Responsive web form: Create a well laid out responsive contact me web form saved as index.html...

Responsive web form: Create a well laid out responsive contact me web form saved as index.html with the following labeled fields: First name, last name, company name, email address, phone number, and comments, submit button Validate the form so that the required fields are First name, Last name, and email address. Once validated, write the data to a results page saved as results.html. The web pages must automatically switch between device types or browser sizes or screen resolutions. Text size,...

iKiwi wants to be able to analyse sales information from all its stores so that any...

iKiwi wants to be able to analyse sales information from all its stores so that any opportunities to increase revenue can be identified and acted on. They also want to be able to track product returns for quality control purposes. You are the Chief Knowledge Officer and have been asked to create two Data Warehouses: 1. Create a Data Warehouse schema (with one central table and at least four lookup tables) that iKiwi can use to monitor sales performance. Provide...

Create a program that will prompt for user information for a Web site. Use a structure...

Create a program that will prompt for user information for a Web site. Use a structure to store the data. The structure will need to include the following items: First Name - string Last Name - string Full Name - string Birth Date - int (assume format yyyymmdd) IsLeasingAutomobile - bool yearlySalary - float Create a single structure from the items listed above. Prompt for all items except "Full Name" and load the input directly into a variable based on...

I want to know how to get the "temp" information from a API response like this...

I want to know how to get the "temp" information from a API response like this in javascript: { "coord": { "lon": -122.08, "lat": 37.39 }, "weather": [ { "id": 800, "main": "Clear", "description": "clear sky", "icon": "01d" } ], "base": "stations", "main": { "temp": 282.55, "feels_like": 281.86, "temp_min": 280.37, "temp_max": 284.26, "pressure": 1023, "humidity": 100 }, "visibility": 16093, "wind": { "speed": 1.5, "deg": 350 }, "clouds": { "all": 1 }, "dt": 1560350645, "sys": { "type": 1, "id": 5122, "message":...

Question