Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/intummadee/weather-check
1.) Web application that offers detailed weather information and air quality levels. 2.) Integrated external APIs to fetch and display weather and air quality data 🌧️
https://github.com/intummadee/weather-check
api frontend geolocation-api tailwindcss vue vue-cli vuejs weather weather-api weather-forecast
Last synced: 1 day ago
JSON representation
1.) Web application that offers detailed weather information and air quality levels. 2.) Integrated external APIs to fetch and display weather and air quality data 🌧️
- Host: GitHub
- URL: https://github.com/intummadee/weather-check
- Owner: Intummadee
- Created: 2024-07-03T19:09:51.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-28T16:38:36.000Z (3 months ago)
- Last Synced: 2024-07-28T18:28:41.704Z (3 months ago)
- Topics: api, frontend, geolocation-api, tailwindcss, vue, vue-cli, vuejs, weather, weather-api, weather-forecast
- Language: Vue
- Homepage:
- Size: 1.32 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Weather-Check (Currently under development)
## Set up Vue + Tailwind
```npm install -g @vue/cli``` : install Vue CLI
```vue create my-vue-project``` : create Vue project
```npm install vue-router@4``` : install Vue Router
- check version
```vue --version``` => @vue/cli 5.0.8
- Install Tailwind CSS
```
cd vue_weather
npm install -D tailwindcss postcss autoprefixer
```
- Initialize Tailwind CSS
```npx tailwindcss init -p```
- Configure Tailwind , in the tailwind.config.js file
```
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
- Include Tailwind in Your CSS , Create a CSS file name "tailwind.css" in src/assets/tailwind.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- In your main.js file, import the Tailwind CSS file you just created:
```import './assets/tailwind.css'```
## Dependency
```
npm install uuid
npm install axios
npm install dotenv
```
> [!IMPORTANT]
> ## How to run FrontEnd
> ```
> cd .\vue_weather\
> npm run serve
> ```
> [!NOTE]
> ## Tech Stack :
> - tailwind , Vue
- trick create component
```<>```
Function 🎯
- Display current weather conditions: Show temperature, humidity, wind speed, cloud percentage, rainfall amount, and current weather conditions (e.g., sunny, rainy, cloudy).
- Use Geolocation API to find the current location in order to fetch the current weather conditions based on the user's location.
- Allow users to search for weather conditions of a desired location.
- Temperature unit selection: Users can choose the temperature unit to be either Celsius (°C) or Fahrenheit (°F).
- Display weather information by time: Show 3 hourly weather conditions for the current day.
- Display weekly weather information.
- Calculate UV index, display temperature graph, and show air quality (PM).
Basic Vue 👽
- The short way to bind attributes to data is to use v-bind by inserting just a colon(:).
```JS
Social
data(){
return{
picture:"https://encrypted-tbn0.gstatic.com/images?q",
width:120,
social:https://www.google.com
}}
```
- V-if , V-show , Computed , Watchers
v-if: Create or completely remove elements from the DOM.
v-show: Just hide or show elements using CSS (display: none)
```JS
{{ animals[0] }} and {{ general.gender }}
// V-if
There are no animals at all.
{/* Array */}
- {{ animal }}
{/* Object */}
- {{ key }} - {{ item }}
{/* Onclick */}
{{ isVisible ? "hide" : "show" }} detail
{/* V-show */}
Detail 🧐
{/* Computed */}
Computed : {{ getDepartMent }}
data(){
return{
animals:["dog", "cat", "panda"],
general:{gender"girl" , age:"12", status:false},
isVisible:false,
salary:1000
}},
methods:{
toggleVisible(){
this.isVisible = !this.isVisible;
}},
computed:{ // watcher = track change , computed = store the result of change
getIncome() {
return ${this.salary} * 12;
},
getDepartMent(){
return this.salary >= 30000 ? "Wow" : "Fight"; // It is not recommended to insert this condition into a template. Most will be put in computed.
// Templates are not popular for writing logic.
}
},
watch:{
salary(value){
if(value > 50000){
alert("yay u did it");
setTimeout(()=>{
this.salary = 20000
},2000) // delay 2 seconds to reset salary.
}
}
},
```
- Shows how to bind data and methods to the template.
```JS
Hello world
{{ text }}
{{ getText() }}
export default {
name: 'App',
data(){
return{
text:"hello world",
}
},
methods:{
getText(){
return this.text + "!!!"
}
}
}
```
- Form & Ref
```JS
Enter nickname :
Submit
methods:{
submit(e){
e.preventDefault(); // => Prevent reset of form fields , But it can be shortened by deleting this line and adding it directly to the form
// Or you can write it in the tag form instead :
alert("Hello")
this.nickname = this.$refs.nicknameEl.value;
},
setNickName(event){
console.log(event.target.value);
}
}
```
- Event Modifier : Check what type of event it is ex. right-click, left-click, or press a key.
```JS
Right mouse click
Click the mouse in the middle.
Click Ctrl together with left mouse click.
```
- Style scope : If u don't want to use style together in every component. maybe u use style together(not use scope) in App.vue
```JS
```
- Transition : https://vuejs.org/guide/built-ins/transition
```JS
.fade-enter-from{
opacity:0;
}
.fade-enter-active{
transition: all 0.5s linear;
}
```
Component
- import and use component
```JS
import ListData from "./componenst/HelloWorld.vue";
export default {
name: 'App',
components:{
ListData // import component
}
}
```
- tranfer data
```JS
Parent :
Children :
export default {
name: "Person",
data(){ return { }},
props:["animal"] // Can be used in template as this --> <h1> {{ animal }} </h1>
}
```
- Dynamic props
```JS
Parent :
// want to tranfer data but it must write "", so there must be bind (:) in front of the props
export default {
name: "Person",
data(){ return {
employeesWantToTranfer:[
{name:"name", salaray:2000}
]
}},
}
// => in ListData
props:["employees"]
```
- Props validation
```JS
export default {
name: "Person",
data(){ return { }},
props:{
name:{
type:String,
required:true,
},
salary:{
type:Number,
default:0 // If there is no salary , set the default value as zero
}
}
}
```
- Custom Event : Send information from Children to Parent. Children can't talk each other so it must to send event to Parent
```JS
see Detail
methods:{
showDescription(id){
this.$emit("show", id); // send event name show to Parent , cuz u can name the event therefore being called Custom event
}
}
Parent :
methods:{
doSomething(id){
console.log("Child ID : ", id);
}
}
```
- Slot : Different content will be in slot but image in Card will be same
1.) use card cover content That will change each data
2.) slot name
- V-Model Form
```JS
name
{/* v-model.trim = Its function is to cut out whitespace that is in front and behind the values entered into the input field. */}
{{JSON.stringify(employee)}} {/* this line is for debugging to view employee in data */}
data(){
return{
employee:{
name:"cat",
}
}
}
```
---
## Extensions in VSCode
- vetur
- ESLint
- Vue VSCode Snippets
- Tailwind CSS IntelliSense
## Ref
- https://cdnjs.com/libraries/font-awesome
- https://home.openweathermap.org/
- https://openweathermap.org/api/one-call-3#current (openweather api)
- https://www.weatherapi.com/my/ (weather api forecast 7 day)
- https://www.weatherapi.com/docs/ (weather api doc)
- https://tailwindcss.com/
- https://openweathermap.org/api/uvi (uv api)
- Geolocation API
- OpenWeatherMap API
- Weatherapi API
