Weather app using HTML,CSS,JAVASCRIPT

 HTML


<!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="style.css">
</head>

<body>
    <div class="card">
        <div class="search">
            <input type="text" placeholder="Enter city name" spellcheck="false">
            <button><img src="search.png"></button>
        </div>
        <div class="error">
            <p>Invalid city name</p>

        </div>
        <div class="weather">
            <img src="rain.png" class="weather-icon">
            <h1 class="temp">22°C</h1>
            <h2 class="city">New York</h2>
            <div class="details">
                <div class="col">
                    <img src="humidity.png">
                    <div>
                        <p class="humidity">50%</p>
                        <p>Humidity</p>
                    </div>
                </div>
                <div class="col">
                    <img src="wind.png">
                    <div>
                        <p class="wind">15 km/h</p>
                        <p>Wind Speed</p>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <script>
        const apikey = "377b132aca98ca45a080fdda6f46389a";
        const apiurl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";

        const searchBox = document.querySelector(".search input");
        const searchBtn = document.querySelector(".search button");
        const weatherIcon = document.querySelector(".weather-icon");


        async function checkweather(city) {
            const response = await fetch(apiurl + city + `&appid=${apikey}`);

            if (response.status == 404) {
                document.querySelector(".error").style.display = "block";
                document.querySelector(".weather").style.display = "none";
            } else {

                var data = await response.json();



                document.querySelector(".city").innerHTML = data.name;
                document.querySelector(".temp").innerHTML = Math.round(data.main.temp) + "°c";
                document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
                document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";

                if (data.weather[0].main == "Clouds") {
                    weatherIcon.src = "clouds.png";
                }
                else if (data.weather[0].main == "Clear") {
                    weatherIcon.src = "clear.png";
                }
                else if (data.weather[0].main == "Rain") {
                    weatherIcon.src = "rain.png";
                }
                else if (data.weather[0].main == "Drizzle") {
                    weatherIcon.src = "drizzle.png";
                }
                else if (data.weather[0].main == "Mist") {
                    weatherIcon.src = "mist.png";
                }

                document.querySelector(".weather").style.display = "block";
                document.querySelector(".error").style.display = "none";


            }

        }

        searchBtn.addEventListener("click", () => {
            checkweather(searchBox.value);
        })

        checkweather();
    </script>
</body>

</html>


CSS AND JAVASCRIPT

* {
    margin: 0;
    padding: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    box-sizing: border-box;

}

body{
    background-color: #222;
}

.card{
    width: 90%;
    max-width: 470px;
    background: linear-gradient(135deg ,#00feba , #5b548a);
    color: #fff;
    margin: 20px auto 0;
    border-radius: 20px;
    padding: 40px 35px;
    text-align: center;

}

.search{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search input{
    bottom: 0;
    outline: 0;
    background: #ebfffc;
    color: #555;
    padding: 10px 25px;
    height: 60px;
    border-radius: 30px;
    flex: 1;
    margin-right: 16px;
    font-size: 18px;
}

.search button{
    bottom: 0;
    outline: 0;
    background: #ebfffc;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.search button img{
    width: 16px;
}

.weather-icon{
    width: 170px;
    margin-top:30px ;
}

.weather h1{
    font-size: 80px;
    font-weight: 500;
}

.weather h2{
    font-size: 45px;
    font-weight: 400;
    margin-top: -10px;
}

.details{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 20px;
    margin-top: 50px;
}

.col{
    display: flex;
    align-items: center;
    text-align: left;
}

.col img{
    width: 40px;
    margin-right: 10px;
}

.humidity, .wind{
    font-size: 28px;
    margin-top: -6px;
}

.weather{
    display: none;
}

.error{
    text-align: left;
    margin-left: 10px;
    font-size: 14px;
    margin-top: 10px;
    display: none;
}

GITHUB LINK
https://debadatta77.github.io/Weather-app/






Comments

Post a Comment

Popular posts from this blog

Launching Page(Javascript)

 HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Launching </ title >     < link rel = "stylesheet" href = "style.css" > </ head > < body >     < div class = "container" >         < img src = "logo.png" alt = "" class = "logo" >         < div class = "content" >             < p > Website Is Under Maintenance </ p >             < h1 > We're < span > Launching </ span > Soon </ h1 >             < div class = "time" >                 < div >                  ...
Read more

AMAZON HOME PAGE CLONE PROJECT

Image
HTML <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Amazon </ title >     < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity = "sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin = "anonymous" referrerpolicy = "no-referrer" />     < link rel = "stylesheet" href = "STLE.CSS" > </ head > < body >     < header >         < div class = "navbar border" >             < div class = "nav-logo border" >                 < div class = "logo" ></ div >             ...
Read more

Array in function Javascript

  const ranger = [ "Troy" , "Jake" , "Noah" ] const rangerd = [ "Tylor" , "Chase" , "Koda" ] // ranger.push(rangerd) // const allranger = ranger.concat(rangerd) // console.log(allranger); // console.log(Array.isArray("Debadatta")); // console.log(Array.from("Debadatta")); // console.log(Array.isArray({name:"Debadatta"}));// Intresting let score1 = 100 let score2 = 200 let score3 = 300 console . log ( Array . of ( score1 , score2 , score3 ));
Read more