├── mikhak ├── bold-mikhak.ttf ├── dark-mikhak.ttf ├── thin-mikhak.ttf ├── medium-mikhak.ttf ├── normal-mikhak.ttf └── dif-bold-mikhak.ttf ├── README.md ├── js ├── weather.js ├── main.js ├── storage.js └── ui.js ├── css └── style.css └── index.html /mikhak/bold-mikhak.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nightcode-dev/InWeather/HEAD/mikhak/bold-mikhak.ttf -------------------------------------------------------------------------------- /mikhak/dark-mikhak.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nightcode-dev/InWeather/HEAD/mikhak/dark-mikhak.ttf -------------------------------------------------------------------------------- /mikhak/thin-mikhak.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nightcode-dev/InWeather/HEAD/mikhak/thin-mikhak.ttf -------------------------------------------------------------------------------- /mikhak/medium-mikhak.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nightcode-dev/InWeather/HEAD/mikhak/medium-mikhak.ttf -------------------------------------------------------------------------------- /mikhak/normal-mikhak.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nightcode-dev/InWeather/HEAD/mikhak/normal-mikhak.ttf -------------------------------------------------------------------------------- /mikhak/dif-bold-mikhak.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nightcode-dev/InWeather/HEAD/mikhak/dif-bold-mikhak.ttf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # InWeather 2 | **InWeather** is a easy web project with **html,css,js** 3 | this project is using a [OpenWeather](https://openweathermap.org/) api to get and show a data of weather Contains temperature , wind speed , minimum temperature , maximum temperature and etc 4 | >this project using oop in JavaScript and i I hope This project should be practical 5 | 6 | ## Does project need anything? 7 | No it doesnt not anything except a apikey to login in api 8 | you can use mine but its better to make a new one for yourself 9 | 10 | 11 | [DEMO](http://inweather.nightcode.ml) 12 | 13 | -------------------------------------------------------------------------------- /js/weather.js: -------------------------------------------------------------------------------- 1 | class Weather { 2 | constructor(state,city,Key){ 3 | this.apiKey = Key; 4 | this.state = state; 5 | this.city = city; 6 | } 7 | 8 | async getWeather() { 9 | const res = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${this.city},${this.state}&appid=${this.apiKey}`) 10 | if(res.ok){ 11 | const RD = await res.json() 12 | return RD 13 | }else{ 14 | throw Error(res.status) 15 | } 16 | } 17 | 18 | changLocation(state,city){ 19 | this.city = city; 20 | this.state = state; 21 | } 22 | 23 | get loc(){ 24 | return `${this.state},${this.city}` 25 | } 26 | } -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | const storage = new Memory(); 2 | const saved = storage.geting() 3 | const weather = new Weather( 4 | saved.city, 5 | saved.state, 6 | '592c8a63a21d83747c364a50409e8dcd' 7 | ) 8 | const ui = new UI(); 9 | 10 | document.getElementById('change').addEventListener('click',changeLoc) 11 | document.addEventListener('DOMContentLoaded',getWeather) 12 | 13 | function getWeather() { 14 | weather.getWeather() 15 | .then(data => { 16 | console.log(data) 17 | ui.paint(data,weather.loc) 18 | }) 19 | .catch(err => { 20 | ui.sendErr() 21 | storage.remove(); 22 | }) 23 | } 24 | 25 | function changeLoc() 26 | { 27 | var state = document.getElementById('ostan').value; 28 | var city = document.getElementById('city').value; 29 | storage.saving(state.trim(),city.trim()) 30 | weather.changLocation(state.trim(),city.trim()) 31 | getWeather() 32 | } -------------------------------------------------------------------------------- /js/storage.js: -------------------------------------------------------------------------------- 1 | class Memory { 2 | constructor(){ 3 | this.city; 4 | this.state; 5 | this.defCity = 'تهران'; 6 | this.defState = 'تهران'; 7 | } 8 | 9 | saving(city,state){ 10 | localStorage.setItem('city',city); 11 | localStorage.setItem('state',state); 12 | } 13 | 14 | geting(){ 15 | if(localStorage.getItem('city') === null){ 16 | this.city = this.defCity; 17 | }else{ 18 | this.city = localStorage.getItem('city') 19 | } 20 | if (localStorage.getItem('state') === null) { 21 | this.state = this.defState; 22 | } else { 23 | this.state = localStorage.getItem('state') 24 | } 25 | return { 26 | city: this.city, 27 | state: this.state 28 | } 29 | } 30 | 31 | remove(){ 32 | localStorage.removeItem('city'); 33 | localStorage.removeItem('state'); 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face { 3 | font-family:'Dmikhak'; 4 | src: url('../mikhak/dark-mikhak.ttf') format('truetype'); 5 | } 6 | 7 | 8 | @font-face { 9 | font-family: 'mikhak'; 10 | src: url('../mikhak/normal-mikhak.ttf') format('truetype'); 11 | 12 | } 13 | 14 | 15 | @font-face { 16 | font-family: 'Tmikhak'; 17 | src: url('../mikhak/thin-mikhak.ttf') format('truetype'); 18 | } 19 | 20 | @font-face { 21 | font-family:'Bmikhak'; 22 | src: url('../mikhak/bold-mikhak.ttf') format('truetype'); 23 | } 24 | 25 | 26 | @font-face { 27 | font-family: 'DBmikhak'; 28 | src: url('../mikhak/dif-bold-mikhak.ttf') format('truetype'); 29 | 30 | } 31 | 32 | 33 | @font-face { 34 | font-family: 'Mmikhak'; 35 | src: url('../mikhak/medium-mikhak.ttf') format('truetype'); 36 | } 37 | 38 | body { 39 | background: #1D1B1C 40 | } 41 | 42 | #center-box { 43 | background:white; 44 | margin-right:5%; 45 | margin-left:5%; 46 | margin-top:10%; 47 | padding:2.5%; 48 | border-radius:10px; 49 | text-align:center; 50 | } 51 | 52 | td { 53 | font-size:11px; 54 | text-align:center; 55 | font-family:Mmikhak; 56 | } 57 | table{ 58 | border-radius:10px 59 | } 60 | tr{ 61 | border-radius:10px; 62 | } 63 | 64 | #pos{ 65 | text-align:center; 66 | font-family:DBmikhak; 67 | } 68 | 69 | #short { 70 | margin-bottom:5%; 71 | text-align:center; 72 | } 73 | 74 | .lab{ 75 | text-align:right; 76 | font-family:mikhak 77 | } 78 | .change{ 79 | margin-right:1%; 80 | font-family:Mmikhak; 81 | } 82 | .ending{ 83 | margin-left:1%; 84 | font-family:Mmikhak; 85 | } 86 | #weather { 87 | font-family:mikhak; 88 | } 89 | #btn{ 90 | font-family:mikhak; 91 | } 92 | .modal-title { 93 | font-family:Bmikhak; 94 | } 95 | 96 | #city { 97 | font-family:Mmikhak; 98 | } 99 | 100 | #ostan { 101 | font-family:Mmikhak; 102 | } 103 | 104 | #err { 105 | font-family:Mmikhak; 106 | display:none; 107 | } 108 | -------------------------------------------------------------------------------- /js/ui.js: -------------------------------------------------------------------------------- 1 | class UI{ 2 | constructor() { 3 | this.pos = document.getElementById('pos') 4 | this.weather = document.getElementById('weather') 5 | this.icon = document.getElementById('icon') 6 | this.temp = document.getElementById('temp') 7 | this.Ltemp = document.getElementById('low-temp') 8 | this.Mtemp = document.getElementById('max-temp') 9 | this.press = document.getElementById('press') 10 | this.hum = document.getElementById('hum') 11 | this.Swind = document.getElementById('wind-speed') 12 | this.lon = document.getElementById('lon') 13 | this.lat = document.getElementById('lat') 14 | this.InCity = document.getElementById('city') 15 | this.InState = document.getElementById('ostan') 16 | } 17 | 18 | paint(weather,loc){ 19 | document.getElementById('err').style.display = "none"; 20 | this.pos.textContent = loc 21 | this.weather.textContent = this.Wtranslate(weather.weather[0].main) 22 | this.icon.src = `http://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`; 23 | this.temp.textContent = `دما:${Math.round(weather.main.temp-273)} ` 24 | this.Ltemp.textContent = `کمترین دما:${Math.round(weather.main.temp_min-273)} ` 25 | this.Mtemp.textContent = `بیشترین دما:${Math.round(weather.main.temp_max-273)}` 26 | this.press.textContent = `فشار:${weather.main.pressure}` 27 | this.hum.textContent = `رطوبت:${weather.main.humidity}` 28 | this.Swind.textContent = `سرعت باد:${weather.wind.speed}` 29 | this.lat.textContent = `عرض جغرافیایی:${weather.coord.lat} ` 30 | this.lon.textContent = `طول جغرافیایی:${weather.coord.lon} ` 31 | } 32 | 33 | Wtranslate(weather){ 34 | if(weather == 'Thunderstorm'){ 35 | return 'رعد و برق' 36 | }else if(weather == 'Drizzle'){ 37 | return 'نم باران' 38 | }else if (weather == 'Rain') { 39 | return 'بارانی' 40 | }else if (weather == 'Snow') { 41 | return 'برفی' 42 | }else if (weather == 'Mist') { 43 | return 'غبار' 44 | }else if (weather == 'Smoke') { 45 | return 'دود' 46 | }else if (weather == 'Haze') { 47 | return 'مه غبار' 48 | }else if (weather == 'Dust') { 49 | return 'گرد و خاک' 50 | }else if (weather == 'Fog') { 51 | return 'مه' 52 | }else if (weather == 'Sand') { 53 | return 'شن' 54 | }else if (weather == 'Ash') { 55 | return 'خاکستر آتشفشان' 56 | }else if (weather == 'Squall') { 57 | return 'بوران' 58 | }else if (weather == 'Tornado') { 59 | return 'طوفان' 60 | }else if (weather == 'Clear') { 61 | return 'صاف' 62 | }else if (weather == 'Clouds') { 63 | return 'ابری' 64 | }else{ 65 | return 'هیچی' 66 | } 67 | } 68 | 69 | sendErr(){ 70 | document.getElementById('err').style.display = "block"; 71 | 72 | } 73 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | InWeather 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 |
28 |

تهران،تهران

29 |

ابری

30 | weather type 31 |
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
دما:کلوین کمترین دما: بیشترین دما:
فشار:
رطوبت:
سرعت باد:
طول جغرافیایی: عرض جغرافیایی:
49 | 50 | 51 |
52 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | --------------------------------------------------------------------------------