alvinkp / super_trip_planner

Super_Trip_Planner

This was the sixth challenge assignment for our UPENN Bootcamp. We were tasked with creating a website that shows weather information for multiple cities so you can plan your travels accordingly. (See User Story and Acceptable Criteria sections below).

---

📕 User Story

AS A traveler I WANT to see the weather outlook for multiple cities SO THAT I can plan a trip accordingly

---

✔️ Acceptable Criteria

• GIVEN a weather dashboard with form inputs
• WHEN I search for a city THEN I am presented with current and future conditions for that city and that city is added to the search history
• WHEN I view current weather conditions for that city THEN I am presented with the city name, the date, an icon representation of weather conditions, the temperature, the humidity, the wind speed, and the UV index
• WHEN I view the UV index THEN I am presented with a color that indicates whether the conditions are favorable, moderate, or severe
• WHEN I view future weather conditions for that city THEN I am presented with a 5-day forecast that displays the date, an icon representation of weather conditions, the temperature, the wind speed, and the humidity
• WHEN I click on a city in the search history THEN I am again presented with current and future conditions for that city

---

🔧 Optimizations

HTML

• Used Bootstrap to style website quickly
• Split presentation of data into separate containers
• Added CSS Generated Icon patterned background

CSS

• Styled Background, Previous Search Results and Cards

Javascript

• Create and Add HTML Elements dynamically
• Added Weather Icons and Alt Text
• Fetched information from APIs to generate content for HTML page
• Added styling and Bootstrap classes to elements
• Dynamically change the styling on the UV index to reflect the color range on UV Index chart.

---

📷 Screenshots

---

🎯 Deployment

Website: https://alvinkp.github.io/Super_Trip_Planner

Repository: https://github.com/alvinkp/Super_Trip_Planner

---

✉️ Authors

• @alvinkp