Weather App Website Using HTML, CSS, and JavaScript | FreeProjects1

BHOLU SINGH
BHOLU SINGH
June 25, 2023
0

How I Created a Weather App Website Using HTML, CSS, and JavaScript?


Introduction:

Hi everyone, I'm excited to share with you how I created a weather app website using HTML, CSS, and JavaScript. This website provides users with up-to-date weather information for any location in the world.

If you want to get free source code then scroll down the post.

Image loading error | FreeProjects1

The process:

The first step was to gather the data I needed. I used the OpenWeatherMap API to get weather information for different locations. The API provides a lot of different data, such as the current temperature, the humidity, the wind speed, and the forecast for the next few days.

Once I had the data, I needed to create the website. I started by creating the HTML structure. This included the main page, the search bar, and the weather forecast. I then used CSS to style the website. I wanted the website to be simple and easy to use, so I used a clean and minimal design.

Finally, I used JavaScript to add interactivity to the website. I created a function that would fetch the weather data from the API and display it on the website. I also created a function that would allow users to search for weather information for different locations.


The results:

I'm happy with the results of my project. The website is simple and easy to use, and it provides users with up-to-date weather information. I'm also happy that I was able to learn how to use HTML, CSS, and JavaScript. These are essential skills for anyone who wants to create a web app.


Here are some resources that I found helpful:

1. OpenWeatherMap API: https://openweathermap.org/api

2. HTML Tutorial: https://bholu-singh.github.io/Learn_Free_Tutorials/

3. CSS Tutorial: https://csstutorials.netlify.app/

4. JavaScript Tutorial: https://www.w3schools.com/js/


Here is an example of how you could create a weather app website:

1. Here is an example of HTML and JavaScript for a weather app website:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App | FreeProjects1</title>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <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="images/search.png" alt="img"></button>
        </div>
        <div class="error">Invalid city name</div>
        <div class="weather">
            <img class="weather-icon" src="images/rain.png" alt="img">
            <h1 class="temp">22°c <span class="temp-adj">22.51°c</span></h1>
            <h2 class="city">New York</h2>
            <div class="details">
                <div class="col">
                    <img src="images/humidity.png" alt="img">
                    <div>
                        <p class="humidity">50%</p>
                        <p>Humidity</p>
                    </div>
                </div>
                <div class="col">
                    <img src="images/wind.png" alt="img">
                    <div>
                        <p class="wind">15 km/h</p>
                        <p>Wind Speed</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const apiKey = "32fa1312ee8779124ffaadc2f95bc347";
        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" + `<span>[` + data.main.temp + "°c" + `]</span>`;
                document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
                document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";

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

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

        searchBtn.addEventListener("click", () => {
            checkWeather(searchBox.value);
        })
        searchBox.addEventListener("keypress", () => {
            if (event.key === "Enter") {
                checkWeather(searchBox.value);
            }
        })
    </script>
</body>
</html>


2. Here is an example of CSS for a weather app website:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.card {
    width: 90%;
    max-width: 450px;
    min-width: fit-content;
    background: linear-gradient(135deg, #00feba, #5b548a);
    color: #fff;
    /* margin: 100px auto 0; */
    border-radius: 20px;
    padding: 40px 35px;
    text-align: center;
    margin: 0 10px;
}

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

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

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

.search button img {
    width: 16px;
}

.weather {
    display: none;
}

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

.weather h1 {
    font-size: 80px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
}

.weather h1 span {
    font-size: 1rem;
    margin-left: 10px;
}

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

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

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

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

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

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

@media screen and (max-width: 568px) {
    .card {
        height: calc(100vh - 20px);
    }

    .weather h1 {
        font-size: 65px;
    }

    .weather h2 {
        font-size: 40px;
    }

    .weather .details {
        margin-top: 150px;
    }

    .weather .details .col img {
        width: 26px;
    }

    .weather .details .col div .humidity,
    .weather .details .col div .wind {
        font-size: 18px;
        margin-top: -6px;
    }
}


Conclusion:

If you're interested in creating a weather app website, I encourage you to give it a try. It's a fun and rewarding project, and it's a great way to learn new skills.


Download the source code of this project-

   



I hope this blog post was helpful!




create weather app website, weather app website tutorial, how to create a weather app, weather app using html, css, and javascript, weather app with openweathermap api, weather app development, weather app html, css, javascript, weather app code, weather app source code

Tags:
BHOLU SINGH

BHOLU SINGH

Hi guys, My name is Bholu Singh. I’m the Founder of FreeProjects1. I’m a Creative, Web Designer, and Web Developer. Inspired to make things look better.

    You may like these posts

    Show more

    Post a Comment

    0Comments

    Please do not enter any spam link in the comment box.

    Post a Comment (0)
    Share to other apps
    Copy Post Link