Scribd Logo
Upload

Welcome to Scribd!

  • 15 views

    Weather App HTML

    Uploaded by

    India Server
    This document contains the code for a weather app. It includes sections for a top banner with a search form, an ajax section to display search results, and a footer. The JavaScript code handles form submissions by fetching weather data from an API and adding new list items to the results display with the city name, temperature, icon, and description. Any duplicate city searches return a message instead of refetching the data.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Weather App HTML

    Uploaded by

    India Server
    15 views2 pages
    This document contains the code for a weather app. It includes sections for a top banner with a search form, an ajax section to display search results, and a footer. The JavaScript code handles form submissions by fetching weather data from an API and adding new list items to the results display with the city name, temperature, icon, and description. Any duplicate city searches return a message instead of refetching the data.

    Original Title

    Weather app html

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document contains the code for a weather app. It includes sections for a top banner with a search form, an ajax section to display search results, and a footer. The JavaScript code handles form submissions by fetching weather data from an API and adding new list items to the results display with the city name, temperature, icon, and description. Any duplicate city searches return a message instead of refetching the data.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    15 views2 pages

    Weather App HTML

    Uploaded by

    India Server
    This document contains the code for a weather app. It includes sections for a top banner with a search form, an ajax section to display search results, and a footer. The JavaScript code handles form submissions by fetching weather data from an API and adding new list items to the results display with the city name, temperature, icon, and description. Any duplicate city searches return a message instead of refetching the data.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    You are on page 1of 2

    <!-- Created by Nishant<3 ! !

    -->
    <!DOCTYPE html>
    <html>
    <head>
    <title>Weather Forcast</title>
    </head>
    <body>
    <section class="top-banner">
    <div class="container">
    <h1 class="heading">Weather App</h1>
    <form>
    <input type="text" placeholder="Search for a city" autofocus>
    <button type="submit">SUBMIT</button>
    <span class="msg"></span>
    </form>
    </div>
    </section>
    <section class="ajax-section">
    <div class="container">
    <ul class="cities"></ul>
    </div>
    </section>
    <footer class="page-footer">
    <div class="container">

    </div>
    </footer>

    <script type="text/javascript">
    const form = document.querySelector(".top-banner form");
    const input = document.querySelector(".top-banner input");
    const msg = document.querySelector(".top-banner .msg");
    const list = document.querySelector(".ajax-section .cities");
    const apiKey = "4d8fb5b93d4af21d66a2948710284366";

    form.addEventListener("submit", e => {
    e.preventDefault();
    let inputVal = input.value;

    const listItems = list.querySelectorAll(".ajax-section .city");


    const listItemsArray = Array.from(listItems);

    if (listItemsArray.length > 0) {
    const filteredArray = listItemsArray.filter(el => {
    let content = "";
    if (inputVal.includes(",")) {
    if (inputVal.split(",")[1].length > 2) {
    inputVal = inputVal.split(",")[0];
    content = el
    .querySelector(".city-name span")
    .textContent.toLowerCase();
    } else {
    content = el.querySelector(".city-name").dataset.name.toLowerCase();
    }
    } else {
    content = el.querySelector(".city-name span").textContent.toLowerCase();
    }
    return content == inputVal.toLowerCase();
    });
    if (filteredArray.length > 0) {
    msg.textContent = `You already know the weather for ${
    filteredArray[0].querySelector(".city-name span").textContent
    } ...otherwise be more specific by providing the country code as well`;
    form.reset();
    input.focus();
    return;
    }
    }
    const url = `https://api.openweathermap.org/data/2.5/weather?q=$
    {inputVal}&appid=${apiKey}&units=metric`;

    fetch(url)
    .then(response => response.json())
    .then(data => {
    const { main, name, sys, weather } = data;
    const icon = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/${
    weather[0]["icon"]
    }.svg`;

    const li = document.createElement("li");
    li.classList.add("city");
    const markup = `
    <h2 class="city-name" data-name="${name},${sys.country}">
    <span>${name}</span>
    <sup>${sys.country}</sup>
    </h2>
    <div class="city-temp">${Math.round(main.temp)}<sup>°C</sup></div>
    <figure>
    <img class="city-icon" src="${icon}" alt="${
    weather[0]["description"]
    }">
    <figcaption>${weather[0]["description"]}</figcaption>
    </figure>
    `;
    li.innerHTML = markup;
    list.appendChild(li);
    })
    .catch(() => {
    msg.textContent = "Please search for a valid city";
    });

    msg.textContent = "";
    form.reset();
    input.focus();
    });
    </script>
    </body>
    </html>

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy