For my Weather App project, I aimed to further enhance my planning and implementation abilities. I began by pseudo-coding the HTML structure and then used Figma to create a visual design. To keep track of my ideas and planning, I documented my brainstorming process in a projectapproach.md file, which helped me outline the project with bullet points, different modules, and potential future features.
For the app's design, I incorporated a sleek and user-friendly interface while focusing on the mobile-first approach. Throughout the project, I practiced using JavaScript modules and applying SOLID principles to maintain clean and organized code. I also utilized libraries and APIs, such as WeatherIcons and AccuWeather, to deliver accurate and visually appealing weather information.
While working on the Weather App, I continued to expand my knowledge of web development, gaining valuable experience in areas such as API integration, responsive design, and DOM manipulation. The project showcases my progress and dedication to learning, as well as my ability to develop a functional and aesthetically pleasing weather application.
- Hamburger menu with search history: Create a hamburger menu that stores the past 5 search histories, allowing users to easily access their recent searches.
- Interactive sunrise and sunset graph: Implement an interactive graph that displays the sunrise and sunset times, providing users with useful information for planning outdoor activities.
- Animated weather icons: Replace the current weather icons with animated icons to enhance the visual appeal of the app.
- Dynamic wallpaper based on location: Update the app's background image to change based on the user's searched location, providing a more immersive experience that better reflects the city's atmosphere.
- Mobile-first design: The app is designed with a mobile-first approach, ensuring a seamless experience on mobile devices.
- Current weather display: The app shows the current weather information, such as temperature, weather condition, and location.
- Hourly forecast: Users can view an hourly weather forecast with temperature and weather conditions for each hour.
- Weekly forecast: The app provides a weekly weather forecast, displaying the day of the week, weather condition, and low/high temperatures.
- Humidity information: The app displays the current humidity percentage and possibly humidity trends.
- Responsive design: The app features a responsive design that adapts to different screen sizes and orientations.
- Initial commit
- Add: Project approach documentation
- Plan: Pseudo code creation
- Add: Modules and HTML structure for days of the week
- Add: API logic and SkyCons library integration
- Add: Styling and API adjustment for 5-day forecast
- Add: Weathericons CSS integration and weekly logic
- Add: Humidity module
- Add: Hourly module
- Add: Background and styling
- Remove: Edge development file
- Style: Fixed spacing
- Style: Body flex for footer positioning
- Style: Fixed humidity section spacing
- Style: Adjusted padding and fixed horizontal scrollbar
- Add: Replace weather gif in README
- Fix: Update gif, add assets to docs, fix CSS src path
- Fix: Use HTTPS for fetch, fix image filepath
- Fix: Correct gif filepath in README
- Build: Run npm build for GitHub Pages
- Docs: Update README with gif
- Refactor: Use DOM element instead of template literal
- Add: Include icons in hourly forecast
- Validator: Check HTML with validator
- Add: Enable search with Enter key
- Create: Update README with project info and commits
- Remove: Delete unnecessary modules