DEV Community

Building a Complete Weather App from Scratch with HTML, CSS, and JavaScript: A Step-by-Step Guide

Odumosu Matthew on September 21, 2023

Creating a comprehensive weather app involves multiple steps, including fetching data from a weather API, designing the user interface, and handlin...

Read full post

Chidimma Stanley • Sep 22 '23

Nice, I will try to build it using react

Odumosu Matthew • Sep 22 '23

Absolutely, using React can indeed lead to a more efficient and maintainable application. It provides a structured way to manage your app's state and UI components. I

Mafuzur Rahman • Sep 22 '23 • Edited

Recently I've also done this weather app for Fun.
here it is you can also check out this one.

Live link

I've used Nextjs, Typescript, and Axios.

Odumosu Matthew • Sep 22 '23

That sounds awesome! Weather apps are a great project to work on. I'd love to check out your version. Thanks for sharing the the live link . Could you share the GitHub repository link so I can take a look?

Mafuzur Rahman • Sep 22 '23

Sure here is the GitHub link: github.com/mahfuzurrahman01/weathe...

Punith K • Jul 23

Need complete code

Olivia73-code • Sep 24 '23

Thank you so much for sharing, I am on the CSS leg of my learning journey but I'm excited to try this app out locally in the future. This was easy to follow thank you.

Tarun2804 • Feb 13

it doesnot showing anything

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Container">
        <h1>Weather App</h1>
        <input type="text" id="locationInput" placeholder="Enter city name">
        <button id="searchButton">Search</button>
        <div class="weather-info">
            <h2>Location</h2>
            <p>Temperature</p>
            <p>Description</p>
        </div>

    </div>

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

body {
font-family: 'Courier New', Courier, monospace;
background-color: aqua;
}

.Container {
max-width: 400px;
margin: 0 auto;
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin-top: 105px;
}
h1 {
font-size: 25px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
.weather-info {
margin-top: 20px;
}

`
const apiKey = "6d7fa8bbc9d11323a4360290364f544d";
const apiUrl = "api.openweathermap.org/data/2.5/we...";

const locationInput = document.getElementById('locationInput');
const searchButton = document.getElementById('searchButton');
const locationElement = document.getElementById('location');
const temperatureElement = document.getElementById('temperature');
const descriptionElement = document.getElementById('description');

searchButton.addEventListener('click', () => {
const location = locationInput.value;
if (location) {
fetchWeather(location);
}
});

function fetchWeather(location) {
const url = ${apiUrl}?q=${location}&appid=${apiKey}&units=metric;

fetch(url)
    .then(response => response.json())
    .then(data => {
        locationElement.textContent = data.name;
        temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
        descriptionElement.textContent = data.weather[0].description;
    })
    .catch(error => {
        console.error('Error fetching weather data:', error);
    });

}
`
`

Dumebi Okolo • Sep 21 '23

Amazing!
But a screenshot of the finished work, or a link to it would be great.

Odumosu Matthew • Sep 22 '23

Thank you for the tip.I have now attached a screenshot of the finished work.

Dumebi Okolo • Sep 22 '23

Awesome.

Roland Taylor • Sep 21 '23

Great tutorial!

Like Dumebi, I would suggest including a screenshot or a codepen or similiar. You can even link to the code on Github/Gitlab/Gumroad, if you like!

Odumosu Matthew • Sep 22 '23

Thank you for the feedback! I'm glad you found the tutorial helpful. I've attached some screenshots, and I'll be sure to add the GitHub link before the day is over. Stay tuned for the link, and feel free to reach out if you have any questions or need further assistance.

João Angelo • Jul 8

Hi Odumosu Matthew,
Top, very nice!
Thanks for sharing.

Odumosu Matthew • Jul 8

Thank you so much for your kind words! I'm glad you found the guide helpful. If you have any questions or need further insights, feel free to reach out!

Efuetanu Collins • Jun 4

Thanks for this it was quite informative, looking forward to documenting my journey for recruiters. Currently jobless any tips