Making Weather App using Tailwind CSS using OpenWeatherMap.org in JavaScript
Tags: javascript, beginners, tailwindcss, tutorial
Published: 2021-12-31 17:29:12

Hey folks, in this article I'll show how you can create your own weather app using TailwindCSS using OpenWeatherMap.org in JavaScript.

## 1. Generating API key from OpenWeatherMap.org

Go to [OpenWeatherMap.org](openweathermap.org) and create your account, after all the steps you will be redirected to dashboard, in the top menu click on `API Keys`.

![Open Weather Map Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fi2epwdcb4ifvn9yx1e.jpg)

Now copy the API key and paste it here in the place of {API Key}.
`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID={API Key}`
This will be our API URL.

You can read more about the API documentation [here](https://openweathermap.org/guide).
    
## 2. Testing the API

Open your project folder and create `index.html` and `script.js`.
Open your browser and in the search bar enter the API URL with the city name and API key. If the result is as follows that means API is working fine.

![Test API is working or not](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9f1tewooxf075tycnig.jpg)

After that open up your `script.js` file and write following code.

![Initial Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yf5ffngdfdfx2lb8nvk9.jpg)

Basically, we created a button, which on clicking give us the output of API URL in JSON format.

![API Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q57uvu5fqvnpayfez6os.png)

Here, we can see what the weather API offer us.

## 3. Generating HTML

For starters, we will create HTML file to show basic info like weather, temperature, wind Speed, humidity.

`index.html`

```
<section class="container">
        <input type="text" name="" placeholder="Search city name here..." id="city-name">
        <button id="findBtn">Find Weather</button>
        <section class="result-container">
            <p>Weather: <span id="weather-description"></span></p>
            <p>Temperature: <span id="temp"></span></p>
            <p>Wind Speed: <span id="wind-speed"></span></p>
            <p>Humdity: <span id="humidity"></span></p>
        </section>
    </section>
    
    <script src="script.js"></script>
```
`Output`

![HTML Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zr40vzvwfrposlpw4uq.png)

## 4. Creating the JavaScript code

The final javascript code looks like this in `script.js` file.

```
// input 
let findBtn = document.querySelector("#findBtn");
let city = document.querySelector("#city-name");

// output
let weatherDescription = document.querySelector("#weather-description");
let temp = document.querySelector("#temp")
let windSpeed = document.querySelector("#wind-speed");
let humidity = document.querySelector("#humidity");


function getWeatherAPI(){
    let apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${city.value}&units=metric&APPID={API Key}`;
    fetch(apiURL)
    .then(response => response.json())
    .then((data)=> {
        weatherDescription.innerHTML = data.weather[0].description;
        temp.innerHTML = `${data.main.temp}°C`;
        windSpeed.innerHTML = `${data.wind.speed}m/s`;
        humidity.innerHTML = `${data.main.humidity}%`
        
    })
}

findBtn.addEventListener("click", getWeatherAPI);
```

## 5. Using Tailwind CSS

Now adding some Tailwind CSS in `index.html` for our app.
```
<body class="text-center bg-gradient-to-r from-cyan-500 to-blue-500">
    <section class="container p-8 text-center flex flex-col justify-center items-center">
        <h1 class="text-3xl font-bold p-2 m-2">Open Weather</h1>
        <p>
            <input class="border-b-4 border-b-blue-900 rounded-lg p-2 text-xl focus:outline-none" type="text" name="" placeholder="Search city name here..." id="city-name">
            <button class="border-2 border-teal-800 rounded-lg p-2 text-xl text-center transition ease-in-out delay-150 active:scale-95 bg-gradient-to-r from-emerald-500 to-teal-500 drop-shadow-md hover:drop-shadow-2xl" id="findBtn">Find Weather</button>
        </p>
        <section class="result-container p-4 m-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  gap-4">
            <div class="weather border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Weather:</p>
                <p class="font-bold" id="weather-description">_ _</p>
            </div>
            <div class="temp border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Temperature:</p>
                <p class="font-bold" id="temp">_ _</p>
            </div>
            <div class="windSpeed border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Wind Speed:</p>
                <p class="font-bold" id="wind-speed">_ _</p>
            </div>
            <div class="humidity border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Humidity:</p>
                <p class="font-bold" id="humidity">_ _</p>
            </div>
        </section>
    </section>
```

Output:

![Tailwind Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twnq3qr4bhowdfxqg25g.png)

## 6. Final Project Demo

![Final Project Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i40bdgyapcvmf61teco5.gif)


*So thats it folks. This project may seem overwhelming to begineer but trust me its really easy. To newbies, try your head around JavaScript `promises` and `fetch` and play around with other free API available.*

*Feel free to connect with me over [LinkedIn](https://www.linkedin.com/in/ashutoshdash1999/) or shoot me a mail on [dashashutosh1999@gmail.com](mailto:dashashutosh1999@gmail.com)*