I noticed a while ago, the MacOS and iPadOS lacks an easy to use, simple weather app. Although the iOS system does come with a default weather application, I believe there could be improvements to make. Also, most weather websites available now are slow, full of ads, and hard to navigate in general. By suffering through all the UI flaws, you are presented with the most basic information. Therefore, I decided to build a weather app, or a webpage more specifically. I chose to use JS, HTML, and CSS to create Rain or Shine because isn't constrained by the operating system of the device. I want Rain or Shine to have a broader reach than just iOS or Android users.

This is not your ordinary weather app, Rain or Shine one of the fastest and most efficient way to look up the weather of any city in the world. Designed with speed in mind, while not sacrificing the UI experience. This minimalistic weather app can provide accurate and real time weather data for all. Some standout features are:

-Background changes based on temperature (cold gradient when <59F/15C, warm gradient otherwise) -Option for Celsius or Fahrenheit mode -Instant, accurate, and real time weather results -Smooth transitions throughout -Live dates -Hover to highlight the button and search bar -API taken from OpenWeatherMap, which is very accurate

By using Vanilla Javascript, I tried to keep things as simple as possible, but the most efficient. My program gets the real time weather data from OpenWeatherMap.org, by using their API. In the video, I compared my program to the top result for "world weather" on Google. Rain or Shine got the weather, current temperature, and highest/lowest temp. in 1.7 sec. While the other website did the same thing in more than 10 sec. This shows the speed of Rain or Shine, while not lacking the information and the user experience.

Some challenges are styling the CSS to make the website look as cool and modern as possible, while making the most prominent information pop. Next, I didn't have much experience working with APIs before, but I overcame the lack of experience and successfully implemented the API.

I am proud of this entire website, because I styled this website from scratch, and tried things I have never done before. The result turned out well, and I am very happy with it. Doing this project helped me further my knowledge in creating webpages, using APIs, and the JS language in general.

Next steps for Rain or Shine could be developing this idea into an iOS and Android app. Maybe place more information besides the weather, like real time air quality.

Share this project:

Updates