boradesanket13/blaze

Weather application with geolocation using OpenWeatherAPI and RestCountries API

𝗛𝗶!𝗜'𝗺 Sanket Borade

🌟 This is me

🎓 I'm a Full stack developer. I work mainly with MERN stack and have a good understanding of its Ecosystem.

📘 Currently I’m learning cloud computing.

😁 FunFact about me: If I could win a lifetime supply of one type of clothing, it would be hoodies.

📜 Recent Blogs Posts

• Sky is Big Enough for Multiple Clouds
• From Chaos to Clarity: Organizing Node Modules with Git One liner
• Why Every Tech Company Needs a Developer Advocate (And How to Be One)
• Mastering Git and GitHub: Your Ultimate Guide to Learning and Using these Essential Tools
• My Experience as an Open-source Project Maintainer at Hacktoberfest by Sanket Borade

🤗 Connect with me

🤝 LinkedIn: @boradesanket13
🤖 Twitter: @boradesanket13
📜 Newsletter: @boradesanket13
✉️ Email: [email protected]
🌐 Portfolio: sanketborade.is-a.dev

blaze's Issues

Update buttons

i would like to add few hover effects and enhance the boxes to your project and contribute to hacktoberfest.

Background Image

Currently it is showing random images. We can change it to image of the place that user has entered in the input.
Like suppose user search for new york, the background image will show the image of new york, like that.

If this is good idea , then I would like to work on this.

Restrict decimal to 2 digits

Celsius to Fahrenheit conversion of temperature adds any number of digits after decimal which doesn't look good, we can use JavaScript to restrict it to 2 decimal places in Fahrenheit.

Add Prettier and .editorconfig

Bring the code to a single standard.

[HTML] Change website's name

Currently websites name is 'Weather App'. Suggest a better name.

• Replace 'Weather App' with your suggested name in head section in HTML
• Create a PR

[Easy] Hide Api Key

Api key is visible to everyone . So i want to add an env file and store the key in that so that it is not visible to everyone . Can you assign it to me .

[Easy] adding a navbar and a footer

I would like to add a navbar which would contain the logo and the toggle button and a footer

Adding Favicon

I just checked your website and realized it did'nt had any favicon. Can you assign me this issue

Add Open-Graph(OG) tags

By specifying these meta tags, social networks won't have to guess what information to use or struggle to retrieve it when your page is shared.

Example

<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://www.webdevsplanet.com/post/add-website-to-bing-webmaster-tools">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Web Developers Planet">
<meta property="og:title" content="How to add your website to Microsoft Bing Webmaster Tools | Web Developers Planet">
<meta property="og:description" content="Bing Webmaster Tools is a free platform, and part of Microsoft's Bing search engine which allows webmasters to add their websites to the Bing index crawler, see their site's performance in Bing, and a lot more.">
<meta property="og:image" content="https://www.webdevsplanet.com/assets/images/blog/add-website-to-bing-webmaster-tools.jpeg">

Designing a logo

Add toggle button to switch from degree Celsius to degree Fahrenheit

Add LEARN.md file

A LEARN.md file to provide step by step instructions, with text and/or media, on how to built this project from scratch.

Add temperature in °F

Currently temperature is shown in °C on site. You make changes to show it is both.

Temperature must be seen upto 2 decimal

• Temperature must be seen upto 2 decimal points only e.g. 35.50
  
  

Fix the footer

Fix footer placement.

Error in Flags

In some Random search of cities/countries, the website is showing some different Flags that do not match with the input and in some cases the flag is partially visible due to the background color effects(brussels in this image )

Improve README.md

[Easy] validation & errors

• validation in the empty input
• theme button console message clear
• after gating error on city name it's not working correctly and getting any output

Please assign this to me, Thank You.

Add Pull Request Template and Issue Template

With issue and pull request templates, you can customize and standardize the information you'd like contributors to include when they open issues and pull requests in your repository.

After you create an issue and pull request templates in your repository, contributors can use the templates to open issues or describe the proposed changes in their pull requests according to the repository's contributing guidelines.

Pull request templates - https://axolo.co/blog/p/part-3-github-pull-request-template

For more, you can refer this - https://github.com/devspace/awesome-github-templates

[Easy] Update README.md

Improve README.md file

[Easy] Update CONTRIBUTING.md

Improve contributing.md file.

Maps

I want to showcase a map showing user location
That would be much more descriptive view of weather.
Pls assign me

Add latest screenshots in README.md

README had screenshots of older version on project. Update them.

Enhancement and Fixes

Current issue

• After Every Search, user have to clear the search box first, then enter new city to search in search box.

To fix

• It would be better that after every search, search box get automatically cleared, so that if user want to search for another city, he will just enter new city name in search box and search.

Purpose

• Better User Experience.

[Moderate] Add a better animation to the 'OK' button

Update CONTRIBUTING.md

Improve contributing.md file.

Add a flag near the city name

I want to make some improvements to the design as shown in the image.

[Moderate] User's Current Location weather

The initial app state should show the user's weather location and only show the default location if they decline location services.
I believe I can do this :)

Background image repeats when the image is too small for the screen

The background image repeats when the image is too small for the screen, which looks a little weird.

You can see to the right that the image repeats.

Temperature and other details are still visible after entering invalid place name.

I am opening this new issue after @Sanket1308 told me in #37 to resolve this issue and submit a new PR.

Please review the PR attached below and merge it.
Attaching a screenshot for faster review.

[Feature] To show weather of user's location first.

I think the app should be able to give weather details our position first by detecting it, before searching for other locations

Change date and time format

The format of the date and time is not the best and gives unnecessary information to the user.
I believe I can change this :)
Also, the time display should be from the location searched, it is always on the user's location time. I can also fix this.

GitHub contribution badge

I would like to add the GitHub contribution badges to display the contributors of repository in README file.

Update LEARN.md

A LEARN.md file to provide step by step instructions, with text and/or media, on how to built this project from scratch.

Add map

Showcase a map showing user location
That would be much more descriptive view of weather.

Go to Next.js

How do you like the idea of switching to Next.js?

Add appropriate favicon to site

• You can use your own design.

Error in finding pages in "Contributing ✨" Section of README.md

Error discovered when clicking link of CONTRIBUTING.md and CODE-OF-CONDUCT.md of "Contributing ✨" Section of README.md .
Rectify these errors.

Default background image

Some places do not have an image. So we can display a default background image in that case.

Weather Card Content

The content in the weather card can be aligned in a better way they all are not in the same line.. And also the indication for the sky humidity is not in the same line as the text next to it which is not looking great at the moment.

Add °F and °C signs on the toggle itself.

• Now: °F and °C signs are besides the toggle button
  

• Needed: °F and °C signs should be on it.
  

Add a default image if the images is not available in unsplash API

Responsiveness and better placement of text and other divs

I noticed how texts can get kind of merged if the screen size is reduced a little bit and how mist text is a little misaligned.
I would like to work on this issue and can it be labelled hacktober-accepted too?

Design improvement & cursor

• I want to some card design improvements as shown in the image.

• also want to put a custom cursor on the web page

[Easy] Fix bug where nothing displays after entering a valid city name

I submitted a pull request for another enhancement before raising an issue first. Sorry about that.
I would also like to fix the bug where nothing displays after entering an invalid city name and pressing the OK button.
I would suggest doing a quick page reload after pressing OK. Can I work on this? Or do you have something else in mind to fix this?

Making image in readme visible

Add a better error modal when a user enters invalid input

Currently, the website shows a generic and default error popup of the browser when a user enters invalid input.
Please assign me this issue as a part of hacktoberfest so that I can start working on this.

Dark/Light Mode

We can add a button, which when clicked will change dark mode to light mode and vice versa.
If relevant, I would love to work on this.

Replacing the implementation of the dark theme with css variables

Replacing the implementation of the dark theme with a filter with css variables. This will allow you to more precisely customize the design of both light and dark themes.

[Moderate] Date and Time

we can add date and time on the website.
hope you assign this issue to me.