Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nadim-nion/temperature-hot-solve

Weather map built with HTML5, Bootstrap & OpenWeatherMap API. Responsive for all devices. Shows city name, temperature in °C & weather condition.
https://github.com/nadim-nion/temperature-hot-solve

api html5 javascript weather-api

Last synced: about 1 month ago
JSON representation

Weather map built with HTML5, Bootstrap & OpenWeatherMap API. Responsive for all devices. Shows city name, temperature in °C & weather condition.

Awesome Lists containing this project

README 

        

# Weather Map API 

🌤️ WeatherMap - Interactive Weather Map Web Application 🌧️



## Overview



WeatherMap is a user-friendly web application that allows users to explore real-time weather information for various cities and countries. Built using HTML5, Bootstrap, and the OpenWeatherMap API, this responsive website provides an intuitive interface accessible from desktops, tablets, and mobile devices.



## Key Features



⛅ Real-Time Weather Data: WeatherMap fetches up-to-date weather data from the reliable OpenWeatherMap API to ensure users receive accurate and current weather conditions.



🏙️ City or Country Search: Users can easily search for their desired city or country using the intuitive search feature. The application provides instant results, making it quick and convenient to find weather information for any location around the globe.



🌡️ Temperature in Celsius: WeatherMap displays the temperature for the searched location in degrees Celsius, giving users a clear understanding of the current weather conditions.



☁️ Weather Condition: The web application presents a concise description of the weather condition for the chosen location, helping users plan their activities accordingly.



🌈 Weather Icons: To enhance the user experience, WeatherMap dynamically displays weather icons that correspond to the current weather condition. These intuitive icons provide users with a visual representation of the weather at a glance.



📱 Responsive Design: WeatherMap has been thoughtfully designed to adapt seamlessly to all screen sizes, including desktops, tablets, and mobile devices. The responsive layout ensures a consistent and enjoyable experience for users, regardless of their preferred device.



🌍 Global Weather Coverage: With access to a vast database of weather information, WeatherMap allows users to explore weather conditions for cities and countries worldwide.



## How to Use



1. Visit the WeatherMap website using your favorite web browser.

2. In the search bar, enter the name of the city or country you want to check the weather for.

3. Hit "Enter" or click the search button to retrieve the latest weather data.

4. View the search results, including the city name, temperature in Celsius, weather condition, and corresponding weather icon.

5. Enjoy exploring the weather for various locations around the world, and plan your day accordingly!



## Contributing



If you want to contribute to the development of WeatherMap or report any issues, feel free to create a pull request or submit an issue on our GitHub repository.



## Technologies Used



- HTML5

- Bootstrap

- JavaScript

- OpenWeatherMap API



## Acknowledgments



We extend our gratitude to the teams at Bootstrap and OpenWeatherMap for their excellent tools and services, enabling us to build WeatherMap.



---



Experience the ease of exploring real-time weather information with WeatherMap! Plan your day, stay prepared, and make the most of every weather condition. Visit our website now! [www.weathermap.com](https://www.weathermap.com)



## Live Website



GitHub Pages: https://nadim-nion.github.io/temperature-hot-solve/



## Deployment



To deploy this project run



```bash

    

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/Nadim-Nion/temperature-hot-solve.git

git push -u origin main



```



## Screenshots



Home page of the website:



![Temperature-Hot](https://github.com/Nadim-Nion/temperature-hot-solve/assets/60613933/59e4f9e2-ddbd-426b-b7ae-32dfd3ebe4e8)



## Tech Stack



**Client:** HTML5, JavaScript, Bootstrap5



## FAQ



#### Is this website responsive for all devices?



Answer : Yes, it's responsive for all devices like Desktop, Tablet and Mobile screen



#### Can this website handle all kinda errors?



Answer : No, we haven't add the features to handle errors.



## 🚀 About Me

Hi, I am Nadim Mahmud Nion. I have recently concluded my graduation from the department of Computer Science and Engineering (CSE) at the Daffodil International University (DIU). I have been learning MERN Stack Web Development since 2022. I am expertise in the following skills:



* JavaScript

* Advanced JavaScript

* Bootstrap

* Tailwind

* HTML

* CSS

* Media Query



I have built multiple projects using these skills. You are invited to my GitHub profile to know about my projects and don't forget to give a star to my projects.