{"id":18623618,"url":"https://github.com/intummadee/weather-check","last_synced_at":"2026-04-26T22:31:16.819Z","repository":{"id":246917852,"uuid":"823811308","full_name":"Intummadee/Weather-Check","owner":"Intummadee","description":"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 🌧️","archived":false,"fork":false,"pushed_at":"2024-07-28T16:38:36.000Z","size":1383,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-17T06:41:03.950Z","etag":null,"topics":["api","frontend","geolocation-api","tailwindcss","vue","vue-cli","vuejs","weather","weather-api","weather-forecast"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Intummadee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-03T19:09:51.000Z","updated_at":"2024-07-28T16:38:40.000Z","dependencies_parsed_at":"2024-07-26T18:12:29.211Z","dependency_job_id":"bcd30443-f4c5-4097-a264-f130d5266f9b","html_url":"https://github.com/Intummadee/Weather-Check","commit_stats":null,"previous_names":["intummadee/git_vue"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Intummadee/Weather-Check","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FWeather-Check","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FWeather-Check/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FWeather-Check/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FWeather-Check/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Intummadee","download_url":"https://codeload.github.com/Intummadee/Weather-Check/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Intummadee%2FWeather-Check/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32315711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T21:09:39.134Z","status":"ssl_error","status_checked_at":"2026-04-26T21:09:21.240Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","frontend","geolocation-api","tailwindcss","vue","vue-cli","vuejs","weather","weather-api","weather-forecast"],"created_at":"2024-11-07T04:25:20.838Z","updated_at":"2026-04-26T22:31:16.589Z","avatar_url":"https://github.com/Intummadee.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather-Check (Currently under development)\n \n\n\n\u003cimg width=\"100%\" height=\"60%\" src=\"https://github.com/Intummadee/GIT_Vue/blob/main/img_Git/UI.png\"\u003e\n\n\n\n## Set up Vue + Tailwind\n\n```npm install -g @vue/cli``` : install Vue CLI\n\n```vue create my-vue-project``` : create Vue project\n\n```npm install vue-router@4``` : install Vue Router\n\n- check version\n```vue --version``` =\u003e @vue/cli 5.0.8\n\n- Install Tailwind CSS\n```\ncd vue_weather\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n- Initialize Tailwind CSS\n```npx tailwindcss init -p```\n\n- Configure Tailwind , in the tailwind.config.js file\n```\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{vue,js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n- Include Tailwind in Your CSS , Create a CSS file name \"tailwind.css\" in src/assets/tailwind.css\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n- In your main.js file, import the Tailwind CSS file you just created:\n```import './assets/tailwind.css'```\n\n\n## Dependency\n```\nnpm install uuid\nnpm install axios\nnpm install dotenv\n```\n\n\u003cbr /\u003e\n\n\u003e [!IMPORTANT]\n\u003e ## How to run FrontEnd\n\u003e ```\n\u003e cd .\\vue_weather\\\n\u003e npm run serve\n\u003e ```\n\n\u003chr /\u003e\n\n\u003e [!NOTE]\n\u003e ## Tech Stack :\n\u003e - tailwind , Vue\n\n\u003cbr /\u003e\n\n- trick create component\n```\u003c\u003e```\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2\u003eFunction 🎯\u003c/h2\u003e\u003c/summary\u003e\n\u003cul\u003e\n    \u003cli\u003eDisplay current weather conditions: Show temperature, humidity, wind speed, cloud percentage, rainfall amount, and current weather conditions (e.g., sunny, rainy, cloudy).\u003c/li\u003e\n    \u003cli\u003eUse Geolocation API to find the current location in order to fetch the current weather conditions based on the user's location.\u003c/li\u003e\n    \u003cli\u003eAllow users to search for weather conditions of a desired location.\u003c/li\u003e\n    \u003cli\u003eTemperature unit selection: Users can choose the temperature unit to be either Celsius (°C) or Fahrenheit (°F).\u003c/li\u003e\n    \u003cli\u003eDisplay weather information by time: Show 3 hourly weather conditions for the current day.\u003c/li\u003e\n    \u003cli\u003eDisplay weekly weather information.\u003c/li\u003e\n    \u003cli\u003eCalculate UV index, display temperature graph, and show air quality (PM).\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/details\u003e\n\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2\u003eBasic Vue 👽\u003c/h2\u003e\u003c/summary\u003e\n\n- The short way to bind attributes to data is to use v-bind by inserting just a colon(:).\n```JS\n\u003cimg v-bind:src=\"picture\" :width=\"width\"/\u003e\n\u003ca :href=\"social\"\u003eSocial\u003c/a\u003e\ndata(){\n    return{\n        picture:\"https://encrypted-tbn0.gstatic.com/images?q\",\n        width:120,\n        social:https://www.google.com\n    }}\n```\n\n- V-if , V-show , Computed , Watchers\nv-if: Create or completely remove elements from the DOM.\nv-show: Just hide or show elements using CSS (display: none)\n```JS\n\u003cp\u003e {{ animals[0] }} and {{ general.gender }} \u003c/p\u003e\n// V-if\n\u003cp v-if=\"animals.length === 0\"\u003eThere are no animals at all.\u003c/p\u003e\n\u003cdiv v-else\u003e\n    {/* Array */}\n    \u003cul\u003e\n        \u003cli v-for=\"(animal, index) in animals\" :key=\"index\"\u003e{{ animal }}\u003c/li\u003e\n    \u003c/ul\u003e\n    {/* Object */}\n    \u003cul\u003e\n        \u003cli v-for=\"(item, key) in general\" :key=\"key\"\u003e {{ key }} - {{ item }} \u003c/li\u003e\n    \u003c/ul\u003e\n\n    {/* Onclick */}\n    \u003cbutton @click=\"toggleVisible\"\u003e{{ isVisible ? \"hide\" : \"show\" }} detail\u003c/button\u003e\n    {/* V-show */}\n    \u003cp v-show=\"isVisible\"\u003eDetail 🧐\u003c/p\u003e\n\u003c/div\u003e\n\n{/* Computed */}\n\u003ch1\u003eComputed : {{ getDepartMent }} \u003c/h1\u003e \n    data(){\n        return{\n            animals:[\"dog\", \"cat\", \"panda\"],\n            general:{gender\"girl\" , age:\"12\", status:false},\n            isVisible:false,\n            salary:1000\n        }},\n    methods:{\n        toggleVisible(){\n            this.isVisible = !this.isVisible;\n    }},\n    computed:{ // watcher = track change , computed = store the result of change  \n        getIncome() {\n            return ${this.salary} * 12;\n        },\n        getDepartMent(){\n            return this.salary \u003e= 30000 ? \"Wow\" : \"Fight\"; // It is not recommended to insert this condition into a template. Most will be put in computed.\n            // Templates are not popular for writing logic.\n        }\n    },\n    watch:{\n        salary(value){\n            if(value \u003e 50000){\n                alert(\"yay u did it\");\n                setTimeout(()=\u003e{\n                    this.salary = 20000\n                },2000) // delay 2 seconds to reset salary.\n            }\n        }\n    },\n```\n\n- Shows how to bind data and methods to the template.\n```JS\n\u003ctemplate\u003e\n  \u003csection\u003e\n    \u003ch1\u003eHello world\u003c/h1\u003e\n    \u003ch1\u003e{{ text }}\u003c/h1\u003e\n    \u003ch1\u003e{{ getText() }}\u003c/h1\u003e\n  \u003c/section\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: 'App',\n  data(){\n    return{\n      text:\"hello world\",\n    }\n  },\n  methods:{\n    getText(){\n      return this.text + \"!!!\"\n    }\n  }\n}\n\u003c/script\u003e\n\u003cstyle\u003e\u003c/style\u003e\n```\n\n\n- Form \u0026 Ref \n```JS\n\u003cform @submit=\"submitForm\"\u003e\n    \u003clabel\u003eEnter nickname : \u003c/label\u003e\n    \u003cinput type=\"text\" v-on:input=\"setNickName\" ref=\"nicknameEl\" /\u003e\n    \u003cbutton type=\"submit\"\u003eSubmit\u003c/button\u003e\n\u003c/form\u003e\nmethods:{\n    submit(e){\n        e.preventDefault(); // =\u003e Prevent reset of form fields , But it can be shortened by deleting this line and adding it directly to the form \n        // Or you can write it in the tag form instead : \u003cform @submit.prevent=\"submitForm\"\u003e\n        alert(\"Hello\")\n        this.nickname = this.$refs.nicknameEl.value;\n    },\n    setNickName(event){\n        console.log(event.target.value);\n    }\n}\n```\n\n\n- Event Modifier : Check what type of event it is ex. right-click, left-click, or press a key.\n```JS\n\u003cbutton @click.right=\"increment\"\u003eRight mouse click\u003c/button\u003e\n\u003cbutton @click.middle=\"increment\"\u003eClick the mouse in the middle.\u003c/button\u003e\n\u003cbutton @click.ctrl=\"increment\"\u003eClick Ctrl together with left mouse click.\u003c/button\u003e\n```\n\n\n- 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\n```JS\n\u003cstyle scoped\u003e\u003c/style\u003e\n\u003cimg src=\"./img_Git/image7.png\" height=\"150\" width=\"45%\" /\u003e\n```\n\n- Transition : https://vuejs.org/guide/built-ins/transition\n```JS\n\u003ctransition name=\"fade\" \u003e\n\u003c/transition\u003e\n\u003cstyle\u003e\n    .fade-enter-from{\n        opacity:0;\n    }\n    .fade-enter-active{\n        transition: all 0.5s linear;\n    }\n\u003c/style\u003e\n\n```\n\n\n\u003c/details\u003e\n\n\n\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ch2\u003eComponent\u003c/h2\u003e\u003c/summary\u003e\n\n- import and use component\n```JS\n\u003ctemplate\u003e\n    \u003cListData /\u003e\n\u003c/template\u003e\n\u003cscript\u003e  \nimport ListData from \"./componenst/HelloWorld.vue\";\nexport default {\n  name: 'App',\n  components:{\n    ListData // import component\n  }\n}\n\u003c/script\u003e \n```\n\n- tranfer data \n```JS\nParent : \u003cPerson animal=\"cat\" /\u003e\nChildren :\n\u003cscript\u003e\n    export default {\n        name: \"Person\",\n        data(){ return { }},\n        props:[\"animal\"] // Can be used in template as this --\u003e \u003ch1\u003e {{ animal }} \u003c/h1\u003e\n    }\n\u003c/script\u003e\n```\n\n- Dynamic props\n```JS\nParent : \n\u003cListData :employees=\"employeesWantToTranfer\" /\u003e  // want to tranfer data but it must write \"\", so there must be bind (:) in front of the props\n\u003cscript\u003e\n    export default {\n        name: \"Person\",\n        data(){ return {\n            employeesWantToTranfer:[\n                {name:\"name\", salaray:2000}\n            ]\n        }},\n    }\n\u003c/script\u003e\n// =\u003e in ListData\n\u003ctemplate\u003e\n    \u003cPerson \n        v-for=\"(item, index) in employees\"\n        :key=\"index\"\n        :name=\"item.name\"\n        :salary=\"item.salary\"\n    /\u003e\n\u003c/template\u003e\nprops:[\"employees\"] \n```\n\n\n- Props validation\n```JS\n\u003cscript\u003e\n    export default {\n        name: \"Person\",\n        data(){ return { }},\n        props:{\n            name:{\n                type:String,\n                required:true,\n            },\n            salary:{\n                type:Number,\n                default:0 // If there is no salary , set the default value as zero\n            }\n        } \n    }\n\u003c/script\u003e\n```\n\n- Custom Event : Send information from Children to Parent. Children can't talk each other so it must to send event to Parent\n```JS\n\u003cbutton @click=\"showDescription(id)\"\u003esee Detail\u003c/button\u003e\nmethods:{\n    showDescription(id){\n        this.$emit(\"show\", id); // send event name show to Parent , cuz u can name the event therefore being called Custom event \n    }\n}\n\nParent :\n\u003cPerson @show=\"doSomething\" /\u003e\nmethods:{\n    doSomething(id){\n        console.log(\"Child ID : \", id);\n    }\n}\n\n```\n\n- Slot : Different content will be in slot but image in Card will be same\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./img_Git/image1.png\" height=\"100%\" width=\"70%\"/\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./img_Git/image2.png\" height=\"100%\" width=\"35%\" /\u003e\n    \u003cimg src=\"./img_Git/image3.png\" height=\"100%\" width=\"55%\" /\u003e\n\u003c/div\u003e\n1.) use card cover content That will change each data\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./img_Git/image4.png\" height=\"100%\" width=\"50%\" /\u003e\n\u003c/div\u003e\n\n2.) slot name\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"./img_Git/image5.png\" height=\"100%\" width=\"45%\" /\u003e\n    \u003cimg src=\"./img_Git/image6.png\" height=\"100%\" width=\"45%\" /\u003e\n\u003c/div\u003e\n\n- V-Model Form\n```JS\n\u003cform\u003e\n    \u003cdiv class=\"form-control\"\u003e\n        \u003clabel for=\"emp-name\"\u003e name \u003c/label\u003e\n        \u003cinput type=\"text\" v-model.trim=\"employee.name\" /\u003e\n        {/* v-model.trim = Its function is to cut out whitespace that is in front and behind the values ​​entered into the input field. */}\n    \u003c/div\u003e\n    {{JSON.stringify(employee)}}  {/* this line is for debugging to view employee in data */}\n\u003c/form\u003e\n\ndata(){\n    return{\n        employee:{\n            name:\"cat\",\n        }\n    }\n}\n\n```\n\n\n\n\u003c/details\u003e\n\n\n---\n\n\n## Extensions in VSCode\n- vetur\n- ESLint\n- Vue VSCode Snippets\n- Tailwind CSS IntelliSense\n\n\n## Ref\n\n- https://cdnjs.com/libraries/font-awesome\n- https://home.openweathermap.org/\n- https://openweathermap.org/api/one-call-3#current (openweather api)\n- https://www.weatherapi.com/my/ (weather api forecast 7 day)\n- https://www.weatherapi.com/docs/ (weather api doc)\n- https://tailwindcss.com/\n- https://openweathermap.org/api/uvi (uv api)\n\n\n\n- Geolocation API\n- OpenWeatherMap API\n- Weatherapi API\n\n\n\n\n\u003cbr\u003e\n\u003cdiv\u003e \n \u003ca href=\"https://www.linkedin.com/in/intummadee-maliyam-800856226/\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n \u003ca href = \"mailto:intummadee@gmail.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/-Gmail-%23333?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n \u003ca href=\"https://github.com/Intummadee?tab=repositories\" target=\"_blank\"\u003e\u003cimg alt=\"All Repositories\" title=\"All Repositories\" src=\"https://img.shields.io/badge/-All%20Repos-2962FF?style=for-the-badge\u0026logo=koding\u0026logoColor=white\"/\u003e\u003c/a\u003e\n \u003ca href = \"https://discordapp.com/users/802492085419769856\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord-5865F2?style=for-the-badge\u0026logo=discord\u0026logoColor=white\" target=\"_blank\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintummadee%2Fweather-check","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fintummadee%2Fweather-check","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fintummadee%2Fweather-check/lists"}