Discover real-time current forecasts of your location and any city! Find weather conditions, such as humidity, wind speed, feels-like temperature, and more with this weather web application. Pastel Weather is integrated with OpenWeather API and coded using vanilla JS.
Tech used: HTML, CSS, JavaScript, Bootstrap.
Initially, this project was built with an HTML structure that included non-live data, such as city name, date, time, temperature, and weather icon. I then added Bootstrap and CSS to style the temperature details, adjusting margins, font sizes, and positioning. Next, I integrated Axios and OpenWeather API to access live temperature data. To display the data, I added JavaScript to make API calls for date, time, temperature, weather icon, and descriptions.
A form element and button were added to let users search for a specific city and display its weather details. Metric/imperial unit conversion links were also set for the temperature display.
Afterwards, I added the HTML structure for a five-day forecast section, displaying daily weather icons and high/low temperature units as well as a section for weather descriptions like humidity, wind, pressure, and a feels like temperature. These sections were then integrated with the daily forecast API for live data.
Finally, I designed the style of the application to have a pastel color theme.
Tools used:
OpenWeather API for live weather data
Netlify for hosting
Flaticon for site logo
Visual Studio Code editor
🏅 This was a certification project for the SheCodes Plus Workshop.
Take a look!
Aqua Weather: https://github.com/breandabarnett/react-weather-app
React.Dictionary: https://github.com/breandabarnett/dictionary-project
Personal Portfolio: https://github.com/breandabarnett/Personal-Portfolio