Weather App NodeJs

Shreyesh kolhe
December 26, 2021

install npm requests
weather.html 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Weather APp</title>
    <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=Open+Sans:wght@800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css"
        integrity="sha512-c93ifPoTvMdEJH/rKIcBx//AL1znq9+4/RmMGafI/vnTFe/dKwnn1uoeszE2zJBQTS1Ck5CqSBE+34ng2PthJg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="home.css">
</head>

<body>
    <div class="box">
        <div class="wave -one"></div>
        <div class="wave -two"></div>
        <div class="wave -three"></div>

        <div id="weathericon">
            <i class="fas fa-sun" style="color:rgb(255, 145, 0)"></i>
        </div>

        <div class="info">
            <h2 class="location">
                <i class="fas fa-street-view" style="color: black;"></i>{%location%},{%country%}
            </h2>
            <p id="date">WED | OCT 23 | 10:49AM</p>
            <h1 class="temp">{%tempval%}</h1>
            <h3 class="tempmin_max">Min {%tempmin%} | Max {%tempmax%}</h3>
        </div>
    </div>

    <script>
        console.log("hello shreyash")
        const curDate = document.getElementById('date');
        let weathericon = document.getElementById('weathericon');

        const tempStatus = "Clouds";
        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>
</body>

</html>
weather.css 
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Jost", sans-serif;
}

body {
    background: #f3f2ef;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
    font-family: "Jost", sans-serif;
}

html {
    font-size: 100%;
    height: 100%;
}

html {
    background: #eee;
}

.box {
    width: 25vw;
    height: 60vh;
    border-radius: 0.5rem;
    box-shadow: 0 0.2rem 3rem rgba(0, 0, 0, 0.2);
    background: #a5bbdd;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
    min-width: 20rem;
    min-height: 35rem;
}

.wave {
    opacity: 0.3;
    position: absolute;
    top: 120%;
    left: 50%;
    background: #fff;
    width: 50rem;
    height: 50rem;
    margin-left: -25rem;
    margin-top: -20rem;
    transform-origin: 50% 48%;
    border-radius: 43%;
    animation: drift 3000ms infinite linear;
    z-index: 1;
}

.wave.-three {
    animation: drift 7000ms infinite linear;
    z-index: 2 !important;
    opacity: 0.2;
}

.wave.-two {
    animation: drift 7000ms infinite linear;
    opacity: 0.1;
    z-index: 3 !important;
}

.box::after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    transform: translate3d(0, 0, 0);
}

@keyframes drift {
    from {
        transform: rotate(0deg);
    }
    from {
        transform: rotate(360deg);
    }
}

.info {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content:end;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 60vh;
    z-index: 4;
}

.location {
    margin-top: -5.5rem;
    text-align: center;
    font-weight: 800;
    font-size: 3rem;
    text-transform: capitalize;
}

.fa-street-view {
    animation: rotates 3s linear infinite ease;
}

@keyframes rotates {
    from {
        transform: translateX(-0.5rem);
    }
    from {
        transform: translateX(0.5rem);
    }
}

#date {
    text-align: center;
    margin-top: 0.5rem;
    color: #57606f;
    font-size: 1.2rem;
    font-weight: 300;
    text-transform: uppercase;
}

.temp {
    margin-top: 2.5rem;
    text-align: center;
    font-size: 4rem;
}

.tempmin_max {
    text-align: center;
    margin-top: 0.3rem;
    font-weight: 300;
    font-size: 1.2rem;
    color: #57606f;
}

#weathericon {
    height: 55%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
}

#weathericon .fas {
    font-size: 6rem;
    animation: fas-anime 3s linear infinite alternate;
}

@keyframes fas-anime {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1.5)
    }
}

@media (max-width: 600px) {
    .box {
        width: 90vw;
        height: 80vh;
    }

    .wave {
        top: 110%;
    }

    #weathercon {
        font-size: 5em;
    }

    .info {
        font-size: 1.5em;
    }
}

@media (max-width: 500px) {
    .box {
        height: 80vh;
    }

    .wave {
        top: 115%;
    }
}

body > span {
    width: 100vw;
    text-align: center;
    color: grey;
}

.inputData {
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inputField {
    width: 50%;
    margin: auto;
    border-radius: 5rem;
    padding: 1rem 1rem;
    outline: none;
    font-size: 1.5rem;
}

.errorMsg {
    text-align: center;
    font-size: 2rem;
    margin: 2rem auto;
}
index.js 
const http = require("http");
const fs = require('fs');
var requests = require("requests");


const homeFile = fs.readFileSync("home.html", "utf-8");

const replaceVal=(tempVal, orgVal)=>{
    let temperature = tempVal.replace("{%tempval%}",orgVal.main.temp);
    temperature = temperature.replace("{%tempmin%}",orgVal.main.temp_min);
    temperature = temperature.replace("{%tempmax%}",orgVal.main.temp_max);
    temperature = temperature.replace("{%location%}",orgVal.name);
    temperature = temperature.replace("{%country%}",orgVal.sys.country);
    return temperature;
}

const servre = http.createServer((req, res)=>{
        if(req.url == "/"){
            requests("https://api.openweathermap.org/data/2.5/weather?q=Ahmednagar&units=metric&appid=28e1107da44a4e4406402748f062d353
")
            .on("data", (chunk)=>{
                const objdata = JSON.parse(chunk);
                const arrData = [objdata]
                // console.log(arrData[0].main.temp);
                const realTimeData = arrData
                .map((val)=> replaceVal(homeFile,val)).join("");
                res.write(realTimeData);
                // console.log(realTimeData);
            })
            .on("end",(err)=>{
                if (err) 
                    return console.log("connection closed due to error");
                console.log("end");
                res.end();
            });
        }
    })

    servre.listen(8000,"127.0.0.1");