https://github.com/codewithsupriyo/weatherappjs
A wearher app showing the current wind speed, weather, temprature,air quality, air presure, etc... Including the 3 highlights of the day.
https://github.com/codewithsupriyo/weatherappjs
css html javascript js openweathermap-api tailwind tailwind-css weather-app
Last synced: 11 months ago
JSON representation
A wearher app showing the current wind speed, weather, temprature,air quality, air presure, etc... Including the 3 highlights of the day.
- Host: GitHub
- URL: https://github.com/codewithsupriyo/weatherappjs
- Owner: CodeWithSupriyo
- License: mit
- Created: 2024-08-02T09:33:34.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-10T02:38:19.000Z (over 1 year ago)
- Last Synced: 2025-02-14T22:33:44.576Z (about 1 year ago)
- Topics: css, html, javascript, js, openweathermap-api, tailwind, tailwind-css, weather-app
- Language: HTML
- Homepage: https://weatherappsupriyo.netlify.app
- Size: 127 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Weather App
A Weather app. This app have many features such as 3 forcast of the day, humidity, wind speed, Air qualaty etc... along with data and time and the current temprature and a discription shown by an image. Deployed in github page and netlify
[](https://weatherappsupriyo.netlify.app/)
## Demo
## Badges
[](https://choosealicense.com/licenses/mit/)
[](https://app.netlify.com/sites/weatherappsupriyo/deploys)
## Appendix
This app is responsive.
This app gives the current weather of the city or the area you searched
## Features
- Live previews
- Fullscreen mode
## Color Reference
| Color | Tailwind |
| ----------------- | ------------------------------------------------------------------ |
| Violet | violet-500 |
| White | white |
| Violet (Dark) | violet-800 |
| Black | black |
## OpenWeatherMap API Reference
#### Get all items
```http
GET /api/items
```
| Parameter | Type | Description |
| :-------- | :------- | :------------------------- |
| `api_key` | `string` | **Required**. c44025824eca9a9dd813b9481fe16f66 |
#### Get item (main Weather API)
```http
GET /api/items/${id}
```
| Parameter | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `id` | `string` | **Required**. 1268504 |
#### fetch(url + city + `&appid=${apikey}`)
Takes URL, city and the apiKey and returns the data (weather) of the city or the place that has been searched out.
#### Get item (forcast of the day)
```http
GET /api/items/${id}
```
| Parameter | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `id` | `string` | **Required**. 500 |
#### fetch(url2 + `lat=${lat}` + `&lon=${lon}` + `&appid=${apikey}`)
Takes URL, lat and the lon of the city and the apiKey and returns the data (weather of the 3 highlights) of the city or the place that has been searched out.
#### Get item (Air Pollution)
```http
GET /api/items/${id}
```
| Parameter | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `id` | `string` | **Required**. Not Given |
#### fetch(airPollutionUrl + lat +
lon + `&appid=${apikey}`)
Takes URL, lat and lon of the city and the apiKey and returns the data (air Pollution) of the city or the place that has been searched out.
## Technologies Used
-The basic HTML CSS An JS
-The tailwind for some beter CSS **Half of the app uses tailwind CSS but the maincard uses CSS for styling & use of tailwind with its cdn**
## Contributing
Contributions are always welcome!
See `contributing.md` for ways to get started.
See the `code of conduct`.
## Acknowledgements
- [Awesome Readme Templates](https://awesomeopensource.com/project/elangosundar/awesome-README-templates)
- [Awesome README](https://github.com/matiassingers/awesome-readme)
- [How to write a Good readme](https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project)
## Installation
Install my-project with npm
```bash
npm install WeatherAppJs
cd WeatherAppJs
```
## Deployment
To deploy this project run
```bash
npm run deploy
```
## Environment Variables
To run this project, you will need to add the following environment variables to your .env file
`API_KEY`
## Feedback
If you have any feedback, please reach out to us at supriyorana1st@gmail.com
# Hi, I'm Supriyo! 👋
## Author
- [@CodeWithSupriyo](https://www.github.com/CodeWithSupriyo)
## 🚀 About Me
I'm a frontend developer
-I use many technologies like HTML, CSS, JS, Tailwind CSS, REACT, Bootstrap
## Other Common Github Profile Sections
👩💻 I'm currently working on my **Portfolio**
🧠 I'm currently learning **GSAP TypeScript React**
💬 Ask me about **GSAP Animation**
📫 How to reach me **supriyorana1st@gamil.com**
## Lessons Learned
I learned about how to fetch an api in JS and adding using some tailwind CSS? What challenges did you face and how did you overcome them?