Get Weather Report From This Program

Ticker

10/recent/ticker-posts

Get Weather Report From This Program

AK Creative 2/07/2021 04:33:00 PM

Create a Weather forecast Details From HTML & CSS With Javascript Code

 

HTML Code


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Weather Forecast</title>

    <link rel="stylesheet" href="css/style1.css">

</head>

<body>

    <div id="container">

        <div id="location">

            <input type="text" id="country" placeholder="Country">

            <input type="text" id="state" placeholder="State">

            <input type="text" id="city" placeholder="City">

            <input type="submit" id="check" value="Check">

        </div>

        <img src="assets/clouds.svg" alt="" id="tempIcon">

        <h2 id="weatherCountry">India/New Delhi</h2>

        <h2 id="temperature">18°<b>C</b></h2>

        <h2 id="weatherDescription">Smooke</h2>

        <ul>

            <li id="feelsLike">Feels Like 44°C</li>

            <li id="humidity">Humidity 77</li>

            <li id="longitude">Longitude 45.33</li>

            <li id="latitude">Latitude 17.67</li>

        </ul>

    </div>

    <script src="js/main1.js"></script>

</body>

</html>


CSS Code

* {

    padding: 0;

    margin: 0;

    font-family: sans-serif;

    box-sizing: border-box;

    background: url(https://cdn.hipwallpaper.com/i/76/90/nHh8XJ.jpg) no-repeat center center fixed;

}


#container {

    height: 100vh;

    width: 100%;

    position: relative;

    background: transparent;

}


#container #location {

    height: 60px;

    width: 100%;

    position: absolute;

    left: 0;

    top: 6%;

    display: flex;

    justify-content: center;

    flex-direction: row;

}


#container input {

    height: 50px;

    width: 300px;

    margin: 0px 20px;

    padding: 0 20px;

    border: 1px solid #fff;

    outline: none;

    background: transparent;

    font-size: 20px;

    border-radius: 25px 10px;

    color: #fff;

}


#container input::placeholder {

    color: red;

}


#container input[type="submit"] {

    cursor: pointer;

    width: 150px;

    background: #fff00f;

    color: blue;

    font-weight: 700;

    font-size: 22px;

}


#tempIcon {

    height: 300px;

    width: 300px;

    position: absolute;

    top: 27%;

    right: 20%;

}


#weatherCountry {

    font-size: 40px;

    position: absolute;

    top: 40%;

    left: 15%;

color : green

}


#temperature {

    font-size: 45px;

    position: absolute;

    bottom: 35%;

    left: 43%;

color : yellow

}


#temperature b {

    color: yellow;

}


#weatherDescription {

    font-size: 30px;

    position: absolute;

    bottom: 23%;

    left: 43%;

color : yellow;

}


#container ul {

    position: absolute;

    bottom: 3%;

    left: 3%;

color : red;

}


#container ul li {

    font-size: 22px;

    margin: 20px 0;

}


JavaScript Code

let country = document.querySelector("#country");
let city = document.querySelector("#city");
let check = document.querySelector("#check");

let tempIcon = document.querySelector("#tempIcon");
let weatherCountry = document.querySelector("#weatherCountry");
let temperature = document.querySelector("#temperature");
let weatherDescription = document.querySelector("#weatherDescription");

let feelsLike = document.querySelector("#feelsLike");
let humidity = document.querySelector("#humidity");
let longitude = document.querySelector("#longitude");
let latitude = document.querySelector("#latitude");

check.addEventListener("click", () => {
        console.log(country.value);
        console.log(city.value);

    let key = `bd4ea33ecf905116d12af172e008dbae`;
    let url = `http://api.openweathermap.org/data/2.5/weather?q=${city.value},${country.value}&lang=en&units=metric&appid=${key}`;

    fetch(url).then(response => {
        return response.json();
    }).then(data => {
        console.log(data);
        weatherCountry.innerText = `${data.name} / ${data.sys.country}`;
        temperature.innerHTML = `${data.main.temp}°<b>C</b>`;

        data.weather.forEach(items => {
            weatherDescription.innerText = items.description;

           
                         let iconsForTemp = `http://openweathermap.org/img/wn/${items.icon}.png`;
                        tempIcon.src = iconsForTemp;
                        
                     if (items.id < 250) {
                tempIcon.src = `assets/storm.svg`;
            } else if (items.id < 350) {
                tempIcon.src = `assets/drizzle.svg`;
            } else if (items.id < 550) {
                tempIcon.src = `assets/snow.svg`;
            } else if (items.id < 650) {
                tempIcon.src = `assets/rain.svg`;
            } else if (items.id < 800) {
                tempIcon.src = `assets/atmosphere.svg`;
            } else if (items.id === 800) {
                tempIcon.src = `assets/sun.svg`;
            } else if (items.id > 800) {
                tempIcon.src = `assets/clouds.svg`;
            }
        })

        feelsLike.innerText = `Feels Like ${data.main.feels_like}°C`;
        
        humidity.innerText = `Humidity ${data.main.humidity}`;
        latitude.innerText = `Latitude ${data.coord.lat}`;
        longitude.innerText = `Latitude ${data.coord.lon}`;
    })
    country.value = "";
    city.value = "";
})


OUTPUT



Tags:

Post a Comment

43 Comments

  1. Unique KnowFebruary 7, 2021 at 4:35 PM

    Very interesting

    ReplyDelete
  2. Kanchan KirtimanFebruary 7, 2021 at 5:48 PM

    Perfect 👌

    ReplyDelete
  3. WonderingFebruary 7, 2021 at 5:49 PM

    Perfect 👌

    ReplyDelete
  4. Excellent workFebruary 7, 2021 at 5:51 PM

    Perfect 👌

    ReplyDelete
  5. AwesomeFebruary 7, 2021 at 5:52 PM

    Perfect 👌

    ReplyDelete
  6. Jaunpur GPFebruary 7, 2021 at 5:54 PM

    Excellent

    ReplyDelete
  7. WonderfulFebruary 7, 2021 at 5:57 PM

    Excellent

    ReplyDelete
  8. Rock_ArviFebruary 7, 2021 at 5:59 PM

    Excellent

    ReplyDelete
  9. A A AFebruary 7, 2021 at 6:00 PM

    Excellent

    ReplyDelete
  10. ArviFebruary 7, 2021 at 6:02 PM

    Excellent

    ReplyDelete
  11. UnknownFebruary 7, 2021 at 6:04 PM

    Superb

    ReplyDelete
  12. ArzuFebruary 7, 2021 at 6:07 PM

    Excellent

    ReplyDelete
  13. akhFebruary 7, 2021 at 6:10 PM

    Excellent

    ReplyDelete
  14. UnknownFebruary 7, 2021 at 6:12 PM

    Excellent

    ReplyDelete
  15. UnknownFebruary 7, 2021 at 6:17 PM

    Awesome

    ReplyDelete
  16. UnknownFebruary 7, 2021 at 6:20 PM

    Awesome

    ReplyDelete
  17. UnknownFebruary 7, 2021 at 6:25 PM

    Awesome

    ReplyDelete
  18. UnknownFebruary 7, 2021 at 6:29 PM

    fantastic

    ReplyDelete
  19. UnknownFebruary 7, 2021 at 6:30 PM

    fantastic

    ReplyDelete
  20. UnknownFebruary 7, 2021 at 6:36 PM

    fantastic

    ReplyDelete
  21. UnknownFebruary 7, 2021 at 6:39 PM

    fantastic

    ReplyDelete
  22. UnknownFebruary 7, 2021 at 6:42 PM

    fantastic work

    ReplyDelete
  23. UnknownFebruary 7, 2021 at 6:46 PM

    brilliant

    ReplyDelete
  24. KritikaFebruary 7, 2021 at 6:47 PM

    brilliant

    ReplyDelete
  25. UnknownFebruary 7, 2021 at 6:50 PM

    brilliant

    ReplyDelete
  26. UnknownFebruary 7, 2021 at 6:52 PM

    brilliant

    ReplyDelete
  27. UnknownFebruary 7, 2021 at 6:55 PM

    fabulous

    ReplyDelete
  28. UnknownFebruary 7, 2021 at 6:58 PM

    fabulous

    ReplyDelete
  29. UnknownFebruary 7, 2021 at 7:03 PM

    fabulous

    ReplyDelete
  30. UnknownFebruary 7, 2021 at 7:06 PM

    Amazing

    ReplyDelete
  31. UnknownFebruary 7, 2021 at 7:09 PM

    Amazing

    ReplyDelete
  32. UnknownFebruary 7, 2021 at 7:11 PM

    Amazing

    ReplyDelete
  33. snehaFebruary 7, 2021 at 7:22 PM

    Wow Wonderful

    ReplyDelete
  34. son aFebruary 7, 2021 at 7:25 PM

    Wow Wonderful

    ReplyDelete
  35. UnknownFebruary 7, 2021 at 7:28 PM

    Wow Wonderful

    ReplyDelete
  36. UnknownFebruary 7, 2021 at 7:34 PM

    Wow Interesting

    ReplyDelete
  37. UnknownFebruary 7, 2021 at 7:40 PM

    Wow Interesting

    ReplyDelete
  38. UnknownFebruary 7, 2021 at 10:27 PM

    Fabulous

    ReplyDelete
  39. FabulousFebruary 7, 2021 at 10:30 PM

    Fabulous

    ReplyDelete
  40. MLLFebruary 7, 2021 at 10:32 PM

    Fabulous

    ReplyDelete
  41. SuperFebruary 7, 2021 at 10:35 PM

    Fabulous

    ReplyDelete
  42. UnknownFebruary 8, 2021 at 10:38 PM

    Kallu very nice

    ReplyDelete