Skip to content

TimurVoskaley/Web-weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

50 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Educational weather app

Design preview for the Weather app coding challenge

Table of contents

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

  • Search for weather information by entering a location in the search bar
  • View current weather conditions including temperature, weather icon, and location details
  • See additional weather metrics like "feels like" temperature, humidity percentage, wind speed, and precipitation amounts
  • Browse a 7-day weather forecast with daily high/low temperatures and weather icons
  • View an hourly forecast showing temperature changes throughout the day
  • Switch between different days of the week using the day selector in the hourly forecast section
  • Toggle between Imperial and Metric measurement units via the units dropdown
  • Switch between specific temperature units (Celsius and Fahrenheit) and measurement units for wind speed (km/h and mph) and precipitation (millimeters) via the units dropdown
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Desktop-first workflow
  • SCSS
  • Vanilla JS

What I learned

  • API Integration - Learned how to connect and interact with external APIs to fetch and manipulate data
  • Data Handling - Mastered working with JSON responses and parsing data from API endpoints
  • Error Handling - Implemented proper error handling for failed API requests and network issues
  • Async Operations - Used async/await to handle asynchronous API calls effectively
  • Modular Code Structure - Learned to organize code into separate, reusable modules for better maintainability
  • Import/Export - Mastered ES6 import/export syntax to share functionality between files

Author

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors