An Ionic Angular weather application with humidity, and average, max., and min. temperature.
This is the code of an Ionic Angular weather application (created in collaboration with @marivuolahti) that was done using Firebase, Visual Studio Code and Command Prompt/Terminal/Powershell. It was done using the OpenWeather's API.
The application allows the user to submit the name of a city, and receive that city's average, minimum and maximum temperature, as well as its humidity level. On top of this, the application has a functional menu and navigation with a login/sing up/continue as guest page, a "my profile" page (with image selection and file upload), and an "about us" and "contact us" pages.
The user can input an email and password and create an account, input an email and a password tied to an account they’ve already created and log in, or continue as a guest, which requires no logging in or signing up.
If they choose to continue as a guest, they will not have access to a profile page. If they enter an invalid password or username, either during the signing up or singing in portion, the website will give them an error message.
After the user has signed in/up, they’re redirected to their profile page, where they can change their profile picture, and continue to the main content’s page via the “see the weather” button.
At this point, the user can also access the other pages via the menu via clicking on the three lines on the left side of the toolbar) or log back out to the sign in/up page via clicking the log out button (the door icon) on the right side of the toolbar.
If the user chose “continue as guest”, they are redirected directly to the main page, “Today’s Weather”. If they logged in or signed up, they can navigate to the same page via the profile’s button, or through the menu link titled “weather”.
On the main page, the user can enter the name of a city of their choosing into the search bar, and receive back that city’s average, minimum and maximum temperature and is humidity level on that day from an API. They’ll also be able to see a drawn image reflecting that city’s weather.
The user can also access an “about us” and a “contact us” page through the menu, where the user can learn more about the project/app, and where to find its creators. The GitHub links on the page below are functional, and open up onto a new, separate page.
(Below is the “contact us” page, where the user could, were this a real app, be able to contact someone via email or phone if they had any questions or comments regarding the application.)
Finally, below you can see the site’s fully functional menu, In the screenshot below, behind the menu there’s an ‘error message’— for a lack of a better term— that appears when the user has yet to type in the name of a city into the search field, gently suggesting to the user, that in order for data to appear, they must first prompt the application by giving it a city.
The development of this project is complete for the foreseeable future.