Got Particle Problems? We got Particle Solutions!
https://duffylaura.github.io/Particle-Problems/
We want a reliable, easy/enjoyable to use app that tells the user the pollen count and the air quality in their location (or the location they choose to search).
Like light coming through a window in a dusty room, we want to illuminate how many particles are in the air in a simple way for anyone, but especially for those with asthma, allergies, and other conditions in which high particle count in the air is a struggle.
Our application will provide a solution to those with Particle Problems in one click, instead of several Googles per day.
Our team came together to decide how to create an application that is easy to use and useful for users who are interest about the air quality and pollen count.
Our Workflow:
- GitHub
- Apple Photos “MarkUp” feature
- MarkDown
- HTML
- CSS
- JavaScript
- APIs: Breeze-O-Meter and Open Weather Map
- Libraries: Bulma, Leaflet, jQuery, jQuery widgets
Breakdown of how to use Particle Solutions!
- Enter a city on the landing page.
- Select if you want to see Today or a Three-Day Forecast, then click submit.
- Today's Forecast will show you a map and as a user, you can move the map around.
- The user has options to select either one of the buttons to display: air pollution, grass pollen, tree pollen, or weed pollen.
- 3-Day Forecast will display easily readable data of the current and the following 2 days about levels of pollen and air quality.
- The user may click on the "Link for info on AQI" to access more information about AQI levels.
- On the landing page, the user can select My Asthma Action Plan or the Access & Giving Back buttons.
- The My Asthma Action Plan page allows the user to input their data and save it all in one place so they can refer to it or make changes to it.
- The Giving Back page is still in progress but the goal there is to allow the user to access more data if they want to donate to organizations that provde resources to the community who has asthma and/or struggles to get the proper care for their severe allergies.
When the user clicks the submit button on the landing page after inputing their city of choice and selecting the radio option of today's or 3-day forecast, there will be api call(s). These api calls allow us to use data from other websites and select to show what content to show the user. This can be seen in the console of the web browser.
function geoCode5day (){
var geocodeKey = "f4ac9ae98ce232f81e1a8c7e3fd76a5a";
var url = "https://api.openweathermap.org/geo/1.0/direct?q="+saveCity+"&limit=1&appid="+geocodeKey
fetch(url).then(function(response){
return response.json()
}).then(function(data){
var lat = data[0].lat;
var lon = data[0].lon;
breezometer(lat,lon)
localStorage.setItem("lat", lat);
localStorage.setItem("lon", lon);
})
}
function breezometer(lat,lon){
var breezokey = "f7ef38aba28849b8819220ae11e4b3e3";
url= "https://api.breezometer.com/pollen/v2/forecast/daily?lat="+lat+"&lon="+lon+"&key="+breezokey+"&days=3"
fetch(url).then(function(response){
console.log(response)
return response.json()
}).then(function(data){
console.log(data)
var apiKey = "aa3ac1aee36fc947283c79786b233621";
var oneweatherairurl = `https://api.openweathermap.org/data/2.5/air_pollution/forecast?lat=${lat}&lon=${lon}&appid=${apiKey}`
fetch(oneweatherairurl).then(function(pollutants){
console.log(pollutants)
return pollutants.json()
}).then(function(pollutants){
console.log(pollutants)
We used BULMA to style our webpage!
Here is how our application functions on a smaller screen size.
- We definitely learned how to dynamically work with each other to avoid merging repo conflicts.
- We also have learned about server-apis on how to use them, use new libraries like BULMA to style our webspage, and use library like Leaflet to provide us a map so we can present it to our users.
- Most importantly we collarative with each other to test out what failed and what works!
Collaborators:
- Laura D. https://github.com/duffylaura
- Mai M. https://github.com/SkyWalkerMM26
- Nicole G. https://github.com/ncguan
- Philip H. https://github.com/PhilipHuang2
MIT License
- Please refer to the LICENSE file in the Repository.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent