Our inspiration for this website was a very common struggle that we shared, especially with climate change and today’s environmental issues. Recently, it has become difficult to choose the appropriate clothing because of how much the weather is fluctuating from warm to chilly. To solve this issue, we built a website that provides users with the best outfit recommendations no matter the day! Based on the weather in your location, Weather Wardrobe will provide you with suggestions on what to wear for every occasion.

What it does

The website has a navigation bar with a “Home” page, a “Find Outfit Of the Day Inspiration” or “Find OOTD Inspo” page, “Your Profile” Page, and an “About” page. The home page includes a carousel or slideshow to showcase images for various days and their corresponding outfits as well as preferences for a sample user. The “Find OOTD Inspo” page asks users to input their location and then displays the weather and temperature statistics for that area. Afterwards, users are prompted to take a quiz on their style preferences and the website will display a sample outfit for them to wear! The “Your Profile” Page includes previous outfits the user has worn to avoid repeats and to save personal favorites. Finally, the “About” page includes instructions and more information about the website.

How we built it

We collaborated on the Glitch platform and used JavaScript, HTML, and CSS to design this website. We also utilized the OpenWeatherMap API in our website to allow users to view the temperatures and weather at their chosen location. We used different components of web development to include additional features such as a carousel or slideshow as well as a navigation bar and buttons to make the product more user-friendly.

Challenges we ran into

We ran into some issues about how to use the OpenWeatherMap API such as declaring the endpoints and implementing it within our website. Additionally, we had challenges with some design aspects of the website such as spacing, font, formatting, etc. We overcome these challenges by working together and watching tutorial videos or articles on how to use CSS.

Accomplishments that we're proud of

We are proud of being able to implement the OpenWeatherMap API as well as the navigation bar and carousel as these were some of the most difficult aspects of our website. We are also proud of the overall creativity and idea of our product and that we all contributed and worked well together for this project!

What we learned

Our team learned more about how to code using JavaScript, HTML, and CSS. We also refined our skills in web development and using GitHub as well as implementing APIs.

What's next for HackHers 2022

In the future, we plan to continue expanding our product and adding additional features such as allowing users to share their outfits with each other and add comments or likes. We also plan to use React JS to build components as well as SQLite to store people's outfits. This will make the website more interactive and fun!

Built With

Share this project: