CODEWITHSUNDEEP
javascripthtmlcssopenweathermap
JakeAtkinson
JakeAtkinson

Reputation: 11

Running OpenWeather app locally does not seem to be working

I have tried using the OpenWeatherMap.org api to create a basic weather app for my portfolio. However, after following the steps, the app doesn't produce the required result.

When running my javascript in the terminal using node, I get a reference error stating document is not defined; the weather app does not work in the browser either.

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Montserrat Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 

    <!-- Stylesheet -->
    <link href="./WeatherApp.css" rel="stylesheet">

    <title>Local Weather App</title>

</head>
<body>

<div class="app-wrapp">
    <header>
        <form>
        <input class="search-box" type="text" placeholder="Search for a city." autocomplete="off">
        </form>
    </header>
    <main>
        <section class="location">
            <div class="city">
                Delhi, IN
            </div>
            <div class="date">
                Friday 04 November 2022
            </div>
        </section>
        <div class="current">
            <div class="temp">15<span>°C</span></div>
            <div class="weather">Sunny</div>
            <div class="hi-low">13°C / 16°C</div>
        </div>
    </main>
</div>

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

const api = {
    key: "<API_KEY>",
    base: "https://api.openweathermap.org/data/2.5/"
}


const searchbox = document.querySelector(".search-box");
searchbox.addEventListener("keypress", setQuery);

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

function getResults (query) {
    fetch(`${this.api.base}weather?q=${query}&units=metric&APPID=${this.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 = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

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

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

Upvotes: 1

Views: 152

Answers (1)

Andy
Andy

Reputation: 63587

There are three parts of your code that need attention.

  1. this.api.base and this.api.key should just be api.base and api.key.

    fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)

  2. keyCode is now deprecated and you should be using key instead.

  3. Your input is inside a form element which is causing the page to reload on submission, so you need to prevent that from happening.

    // Function accepts the keyboard event
function setQuery(e) {

  // If the pressed key is "Enter"
  if (e.code === 'Enter') {

    // Prevent the form from submitting,
    // and then get the results
    e.preventDefault();
    getResults(searchbox.value);
  }
}

Upvotes: 1

Related Questions