https://github.com/guiril/weather-forecast

Uses Vue with Composition API and Tailwind CSS to implement a weather forecast site.
https://github.com/guiril/weather-forecast

pinia pug tailwindcss typescript vite vue

Last synced: about 19 hours ago
JSON representation

Uses Vue with Composition API and Tailwind CSS to implement a weather forecast site.

• Host: GitHub
• URL: https://github.com/guiril/weather-forecast
• Owner: guiril
• Created: 2024-01-17T03:51:34.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-04-11T06:03:16.000Z (6 months ago)
• Last Synced: 2024-09-23T00:02:12.158Z (5 days ago)
• Topics: pinia, pug, tailwindcss, typescript, vite, vue
• Language: Vue
• Homepage: https://weather-forecast-opal.vercel.app
• Size: 368 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Weather Forecast

Uses Vue with Composition API and Tailwind CSS to implement a weather forecast site.

## Technologies Practiced

- Uses Vite to build a Vue project and utilizes the Composition API for development

- Uses Pinia for state management

- Uses Vitest and Vue Utils Test for testing

- Uses TypeScript for type checking

- Uses Pug template language

- Uses Tailwind CSS for UI development and responsive design

- Uses Node.js/Express to develop a basic API

## Screenshots

![Homepage](https://i.imgur.com/iYIQUqk.png)

![Weather Page](https://i.imgur.com/mc1VfQ9.png)

![Search History](https://i.imgur.com/mCxl8QR.png)

## Instructions

1. On the homepage, you can see the local weather for the user's location along with a search box.

2. Enter the city name in the search box, and press Enter.

3. Upon reaching the weather forecast page, you can see:

   - current weather conditions

   - 24-hour weather forecast

      - including sunset and sunrise times

   - 3-day weather forecast

      - You can select the number of days to display using the menu on the right.

      - The temperature bar shows the lowest temperature on the left side and the highest temperature on the right side for the selected number of days.

4. Click the arrow in the top left corner to return to the homepage.

   - You can see the current weather conditions of searched cities below the local weather.

     - Only the last 10 searches will be displayed.

     - You can clear the search history using the clear button.