Building a Complete Weather App from Scratch with HTML, CSS, and JavaScript: A Step-by-Step Guide
Tags: javascript, beginners, learning, webdev
Published: 2023-09-21 13:57:55

Creating a comprehensive `weather app` involves multiple steps, including fetching data from a `weather API`, designing the user interface, and handling user interactions. Here, we'll provide a step-by-step guide with code blocks on how to build a simple weather app using `HTML, CSS, and JavaScript`.

**Step 1: Set Up Your Environment**

Before you start coding, make sure you have a code editor (e.g., Visual Studio Code) and a web browser installed on your computer.


**Step 2: Design the HTML Structure**

Create an HTML file (e.g., index.html) and define the basic structure of your weather app. You can use the following HTML code as a starting point:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Weather App</h1>
        <input type="text" id="locationInput" placeholder="Enter a city">
        <button id="searchButton">Search</button>
        <div class="weather-info">
            <h2 id="location"></h2>
            <p id="temperature"></p>
            <p id="description"></p>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

```
**Step 3: Style Your App**

Create a CSS file (e.g., styles.css) to style your weather app. Here's a basic CSS code example:

```css
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.5); /* Set the background color to be transparent */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adjust the alpha value here for the box shadow transparency */
    margin-top: 105px;
}

h1 {
    font-size: 24px;
}

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;
}

/* Add more styles as needed */

```

**Step 4: Fetch Weather Data with JavaScript**

Create a JavaScript file (e.g., script.js) to fetch weather data from a public weather API. We'll use the `OpenWeatherMap `API as an example. You'll need to sign up for a free API key from `OpenWeatherMap`.

```javascript
const apiKey = 'YOUR_API_KEY';
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';

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);
        });
}

```

**Step 5: Get Your API Key**

Sign up for a free API key from `OpenWeatherMap` (or another weather API provider of your choice). Replace `'YOUR_API_KEY'` in the JavaScript code with your actual API key.




![weatherapp API KEY](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sd4ztokyq6yr6q01xs9z.png)




![weatherappAPIkey](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wneig1aws4s34uybceud.png)






**Step 6: Test Your Weather App**

Open your HTML file `(index.html)` in a web browser, enter a city name, and click the "Search" button. You should see the weather information displayed on the page.



![weathermap code base](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45n79aewytkmqu7ydnvu.png)



![weatherapp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ag1rsdxte86qqdbj1xgq.png)



I've added the background picture to the body element in the CSS style to beautify the `weather app`. Here's the updated code snippet with the background image included:

```css
body {
  font-family: Arial, sans-serif;
    /* background-color: #f0f0f0; */

  background-image: url('weather1.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* Set the height to fill the viewport */
  margin: 0; /* Remove default margin */
  padding: 0; 
}
```







**Step 7: Deploy Your Weather App**

To share your weather app with others, you can deploy it on a web hosting platform or use a service like GitHub Pages.

This is a basic example of a weather app. You can further enhance it by adding features like icons, more detailed weather information, and a five-day forecast. You can also improve the styling to make it more visually appealing.

`LinkedIn Account` : [LinkedIn](https://www.linkedin.com/in/matthew-odumosu/)
`Twitter Account `: [Twitter](https://twitter.com/iamcymentho)
`Credit`: Graphics sourced from [Hackr.io](https://hackr.io/blog/javascript-projects)