Weather App using HTML CSS and JavaScript Description

Hey, developers welcome to Day 23 of our 90Days 90Projects challenge. And in Day 23 we are going to create a Weather webapp using HTML CSS and JavaScript.

In this project, we have weather API from Open Weather API.

So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

complete responsive personal portfolio website only using html css, personal website using html and css source code,  responsive portfolio website source code, How to create a Personal portfolio website using HTML CSS and JavaScript

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App - by Raju Webdev</title>
    <link rel="icon" type="image/x-icon" href="/Images/favicon.png">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
        integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <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=Poppins:wght@500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Main Container for the weather web app -->
    <div class="weatherContainer">
        <h2 class="appHeading"> Weather App </h2>
        <!-- Input Divition for city name -->
        <div class="search">
            <form action="" id="weatherForm">
                <input type="text" name="" id="weatherInput" placeholder="Enter your city here...">
                <button class="searchBtn" type="submit">
                    <ul>
                        <li><i class="fa-solid fa-magnifying-glass"></i></li>
                    </ul>
                </button>
            </form>
        </div>
        <!-- Outut Will show on the screen -->
        <h2 id="city"></h2>
        <img src="." alt="" id="weatherImage">
        <p class="weatherMain" id="weatherMain"></p>
        <h2 id="temp"><span class="temp"></span></h2>
        <div class="todayDates"></div>
        <div id="todayTime"></div>
    </div>
</body>
<script src="script.js"></script>

</html>



CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #66e3e2;
}

.weatherContainer {
    margin: 2rem;
    padding: 2rem 1rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 19px 0px #18bd9e;
}

#weatherForm input {
    border: none;
    color: black;
    outline: none;
    font-size: 1rem;
    font-family: sans-serif;
    background: transparent;
}

#weatherForm ul li {
    list-style: none;
}

.searchBtn {
    background: transparent;
    border: none;
}

.searchBtn ul li {
    list-style: none;
    font-size: 1.2rem;
}

#weatherForm {
    display: flex;
    justify-content: space-around;
}

.appHeading {
    text-align: center;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}

#city {
    text-transform: capitalize;
    text-align: center;
    margin-top: 1rem;
    font-family: 'Poppins', sans-serif;
}

.weatherContainer img {
    width: 50%;
}

#temp {
    word-spacing: -8px;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-family: 'Poppins', sans-serif;
}

#temp sup {
    font-size: 1.5rem;
}

.weatherMain {
    font-family: sans-serif;
}

#todayTime,
.todayDates {
    font-family: sans-serif;
    line-height: 2rem;
}


/* Utility Classes */
.d-flex {
    display: flex;
}

.justify-space-around {
    justify-content: space-around;
}

.justify-space-center {
    justify-content: center;
}

.align-items-center {
    align-items: center;
}

.f-col {
    flex-direction: column;
}

/* Media Query for Responsive */
@media screen and (max-width: 307px) {
    #weatherForm {
        flex-direction: column;
    }

    #weatherForm input {
        text-align: center;
        margin-bottom: 1rem;
    }
}


JavaScript

script.js

// Variabless
const cityName = document.querySelector('#weatherInput');
const searchBtn = document.querySelector('#searchBtn');
const form = document.getElementById('weatherForm');
const myCity = document.getElementById('city');
const image = document.getElementById('weatherImage');
const weather = document.getElementById('weatherMain');
const temp = document.querySelector('.temp');
const dates = document.querySelector('.todayDates');
const times = document.getElementById('todayTime');
let date = new Date();

// Function work when user input the city name
form.addEventListener('submit', function (e) {

    // preventDefault() to stop page reload
    e.preventDefault();

    // Updating the city name
    let city = cityName.value;
    const myWeatherContainer = document.querySelector('.weatherContainer');
    const apiID = `931f131dde3f4ae2fcbc3289fc646471`;
    // API URL
    let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiID}`

    // fetching data from the weather api
    fetch(url).then((response) => {
        return response.json();
    }).then((data) => {

        const tempValue = Math.round(data['main']['temp']);
        const weatherMain = data['weather'][0]['main'];
        weather.innerHTML = weatherMain;

        // Updating the DOM
        myCity.innerHTML = city;
        temp.innerHTML = `${tempValue}`
        weather.innerHTML = `${weatherMain}`
        temp.innerHTML = `${tempValue}<span><sup>o</sup>C</span.`;

        // Updating the Images according to the weather
        if (weatherMain == 'Clear') {
            image.src = `./Images/sunny.png`
            myWeatherContainer.style.backgroundColor = '#ec6e4c'
        }
        if (weatherMain == 'Clouds') {
            image.src = `./Images/clouds.png`
            myWeatherContainer.style.backgroundColor = '#86d3d3'
        }
        if (weatherMain == 'Rain') {
            image.src = `./Images/Rain.png`
            myWeatherContainer.style.backgroundColor = '#494bcf'
        }
        if (weatherMain == 'Drizzle') {
            image.src = `./Images/Drizzle.png`
            myWeatherContainer.style.backgroundColor = '#8ecfcf'
        }
        if (weatherMain == 'Haze') {
            image.src = `./Images/Drizzle.png`
            myWeatherContainer.style.backgroundColor = '#d8ced2'
        }

        // Updating dates
        const currentMonth = date.getMonth();
        switch (currentMonth) {
            case 0:
                dates.innerHTML = `${date.getDate()}, Jan`
                break;
            case 1:
                dates.innerHTML = `${date.getDate()}, Feb`
                break;
            case 2:
                dates.innerHTML = `${date.getDate()}, Mar`
                break;
            case 3:
                dates.innerHTML = `${date.getDate()}, Apr`
                break;
            case 4:
                dates.innerHTML = `${date.getDate()}, May`
                break;
            case 5:
                dates.innerHTML = `${date.getDate()}, Jun`
                break;
            case 6:
                dates.innerHTML = `${date.getDate()}, Jul`
                break;
            case 7:
                dates.innerHTML = `${date.getDate()}, Aug`
                break;
            case 8:
                dates.innerHTML = `${date.getDate()}, Sept.`
                break;
            case 9:
                dates.innerHTML = `${date.getDate()}, Oct.`
                break;
            case 10:
                dates.innerHTML = `${date.getDate()}, Nov`
                break;
            case 11:
                dates.innerHTML = `${date.getDate()}, Dec`
                break;
        }

        // Updating times      
        function leftInterval() {
            const left = document.getElementById('todayTime')
            let leftDate = new Date();
            let hours = leftDate.getHours();
            let minutes = leftDate.getMinutes();
            let seconds = leftDate.getSeconds();

            if (hours == 0) {
                hours = 12;
            }

            if (hours > 12) {
                hours = hours - 12;
            }
            left.innerHTML = `${hours}h: ${minutes}m: ${seconds}s`
        }
        setInterval(leftInterval, 1000);
    })
})


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
  1. raju iam little bit confusing on javascript plase guid me bro

    ReplyDelete
  2. image not showing

    ReplyDelete

Top Post Ad

Below Post Ad