Weather app

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Table of Contents
• Overview
  • Desktop
  • Mobile
  • Built With
• Features
• How To Use
• learned/improved
• Acknowledgements
• Contact

Overview

Desktop

base

menu

Mobile

base

menu

When you access the app, it gets your location and retrieves and displays the weather forecast for that nearest location. (If you don't allow it to get your location, it will default to Tokyo.)

Click the button to the right of "Search for places" to request the above process again.
The menu that opens from "Search for places" allows you to search for a location and display the weather forecast for the selected location.

Built With

Base

• Node.js：20.8.0
• TypeScript：5.2.2
• React：18.2.0
• Next.js：13.5.6

Other major libraries

• emotion
• @emotion-icons
• ky-universal
• polished
• postcss-preset-env
• wicg-inert

API

• OpenWeather API

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

• User story: I can see city weather as default, preferably my current location
• User story: I can search for city
• User story: I can see weather of today and the next 5 days
• User story: I can see the date and location of the weather
• User story: I can see according to image for each type of weather
• User story: I can see the min and max degree each day
• User story: I can see wind status and wind direction
• User story: I can see humidity percentage
• User story: I can see a visibility indicator
• User story: I can see the air pressure number
• User story(optional): I can request my current location weather
• User story(optional): I can convert temperature in Celcius to Fahrenheit and vice versa

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/h-yoshikawa44/ch-weather-app.git
or
git clone git@github.com:h-yoshikawa44/ch-weather-app.git

# Setting Env(Set each value according to your environment.)
cp .env.example .env

# Install dependencies
npm install

# Run the app
npm run start

learned/improved

• How to change the color of the background image.
• Basic usage of the meter element.
• How to style the meter element.
• How to control anomalous menus by window size.
• How to do a type guard for the Union type.

Acknowledgements

• CSSだけでbackground-imageに設定した画像の色を変える
• MDN - meter: HTML メーター要素
• meter要素のスタイリングについてのメモ 2012年10月
• TypeScript Union 型に含まれる値かどうか判定したい

Contact

• Website：h-yoshikawa44.com
• GitHub：@h-yoshikawa44
• Twitter：@yoshi44_lion