Weather App using Javascript (API)

Shreyesh kolhe
December 22, 2021



 Weather.html

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

<head>
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Weather app</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: -webkit-pictograph;
            /* color: white; */
        }
        .card{
            position: relative;
            top: 10em;
        }
        .weather{
            overflow: hidden;
            z-index: 11;
        }
        .animation{
            height: 320px;
            width: 320px;
            margin-bottom: -4em;
            margin-left: -1.2em;
            left: 0;
            border-radius:45%;
            background-color: rgba(126, 126, 255, 0.459);
            position: absolute;
            bottom: 0;
            z-index: -2;
        }
        .animation1{
            height: 320px;
            width: 320px;
            margin-bottom: -4em;
            margin-left: -1.2em;
            left: 0;
            border-radius: 40%;
            background-color: rgba(131, 131, 250, 0.397);
            position: absolute;
            bottom: 0;
            z-index: -2;
        }
    </style>
</head>

<body>
    <div class="card">
        <div class="container h-96 flex text-center justify-center">
            <div style="color: rgb(0, 0, 0);"
                class="weather bg-gradient-to-r from-violet-900 to-fuchsia-900 drop-shadow-2xl flex flex-col justify-center rounded-3xl border p-10">
                <div id="icon " style="color: white; padding-bottom: 3em;">
                    <i class="fas fa-clouds text-5xl animate-bounce"></i>
                </div>
                <div class="animation animate-spin">
                </div>
                <div class="animation1 animate-spin">
                </div>
                <div id="location" class="p-5 text-2xl font-black capitalize">
                    x x
                </div>
                <div id="time">
                    xxx | dxxec 24x | 11:x00 PMx
                </div>
                <div id="temp" class="p-5 text-2xl font-black capitalize">
                    25.6°C
                </div>
                <div id="maxtemp">
                    Min 22°C | Max 28°C
                </div>
            </div>
        </div>
    </div>
    <script>
        const curDate = document.getElementById('time');
        const getCurrentDay = () => {
            var weekday = new Array(7);
            weekday[0] = "sun",
                weekday[1] = "mon",
                weekday[2] = "tue",
                weekday[3] = "wed",
                weekday[4] = "thu",
                weekday[5] = "fri",
                weekday[6] = "sat"
            let currentTime = new Date();
        //    console.log( weekday[currentTime.getDay()]);
           return(  weekday[currentTime.getDay()]);

        }
        // getCurrentDay();

        const getCurrentTime = () => {
            var months = [];
            const m = [];
                m[0] = "JAN",
                m[1] = "FAB",
                m[2] = "MAR",
                m[3] = "APR",
                m[4] = "MAY",
                m[5] = "JUN",
                m[6] = "JUL",
                m[7] = "AUG",
                m[8] = "SUP",
                m[9] = "OCT",
                m[10] = "NOV",
                m[11] = "DEC"
            var now = new Date();
            var month = now.getMonth();
            let curMonth = m[month];
            var date = now.getDate();
            var year = now.getFullYear();
            

            let hours = now.getHours();
            let mins = now.getMinutes();
            let period = "AM";
                if (hours > 11){
                    period = "PM"
                    if(hours > 12) hours -=12;
                }
                if(mins <10){
                    mins = "0"+mins;
                }


                return ` ${curMonth} ${date} | ${hours}:${mins} ${period}`;
        };
        curDate.innerHTML =getCurrentDay()+" | "+getCurrentTime();

    </script>
    <script src="weather.js"></script>
</body>

</html>

Weather.js

console.log('this is working');
fetch('https://api.openweathermap.org/data/2.5/weather?q=Ahmednagar&appid=28e1107da44a4e4406402748f062d353')
    .then((apidata) => {
        // console.log(apidata);
        return apidata.json();
    })
    .then((actualdata) => {
        // console.log(actualdata);
        var city = (actualdata.name);
        var country = (actualdata.sys.country);
        var temp = (actualdata.main.temp)
        var mtemp = (actualdata.main.temp_min);
        var ftemp = (actualdata.main.feels_like);

        console.log(city);

        var CurTemp =(temp-273.5).toFixed(2);
        var CurMTemp =(mtemp-273.5).toFixed(2); 
        var CurFTemp =(ftemp-273.5).toFixed(2); 

        const location = document.getElementById('location');
        const temp1 =document.getElementById('temp');
        const maxtemp = document.getElementById('maxtemp');

        location.innerHTML = `${city} ${country}`;
        temp1.innerHTML = `${CurTemp} °C`;
        maxtemp.innerHTML= `Min ${CurMTemp}°C | Max ${CurFTemp}°C`;
    })
    .catch((error) => {
        console.log("error is:" + error)
    });