Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 31, 2021 05:29 pm GMT

Making Weather App using Tailwind CSS using OpenWeatherMap.org in JavaScript

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

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.

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

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

Initial Code

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

API Output

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

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");// outputlet 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

6. Final Project Demo

Final Project Demo

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 or shoot me a mail on [email protected]


Original Link: https://dev.to/ashutoshdash/making-weather-app-using-tailwind-css-using-openweathermaporg-in-javascript-4ifj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To