├── LICENSE ├── README.md ├── Screenshot.jpg ├── img ├── bg3.jpg ├── bg7.jpg └── header.jpg ├── index.html ├── main.js └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Bhaskar Maity 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ☀️🌤⛈❄️ A weather web application using Html, Css, Javascript, Weathermap Api 2 | 3 | ## Screenshot 4 | 5 | 6 | The API provider: http://www.OpenWeatherMap.org 7 | 8 | ## Live demo 9 | [Javascript Weather App](https://bhaskar-maity.github.io/Javascript-weather-app/) 10 | -------------------------------------------------------------------------------- /Screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bhaskar-maity/Javascript-weather-app/bcd2a8c875d7b1f762b9c3209bfa7592f649ff6d/Screenshot.jpg -------------------------------------------------------------------------------- /img/bg3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bhaskar-maity/Javascript-weather-app/bcd2a8c875d7b1f762b9c3209bfa7592f649ff6d/img/bg3.jpg -------------------------------------------------------------------------------- /img/bg7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bhaskar-maity/Javascript-weather-app/bcd2a8c875d7b1f762b9c3209bfa7592f649ff6d/img/bg7.jpg -------------------------------------------------------------------------------- /img/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Bhaskar-maity/Javascript-weather-app/bcd2a8c875d7b1f762b9c3209bfa7592f649ff6d/img/header.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Weather app 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |

Weather Viewer

17 |

Coded with ❤ By Bhaskar Maity

18 |
19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 |
27 | 28 | 29 |
30 |
31 |

32 |

33 |

34 |

35 | 36 |
37 |
38 |
39 |
40 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | 2 | //selector variable 3 | var inputval = document.querySelector('#cityinput') 4 | var btn = document.querySelector('#add'); 5 | var city = document.querySelector('#cityoutput') 6 | var descrip = document.querySelector('#description') 7 | var temp = document.querySelector('#temp') 8 | var wind = document.querySelector('#wind') 9 | 10 | 11 | // Get your own free OWM API key at https://www.openweathermap.org/appid - please do not re-use mine! 12 | // You don't need an API key for this to work at the moment, but this will change eventually. 13 | apik = "3045dd712ffe6e702e3245525ac7fa38" 14 | //kelvin to celcious 15 | function convertion(val){ 16 | return (val - 273).toFixed(2) 17 | } 18 | //fetch 19 | btn.addEventListener('click', function(){ 20 | fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik) 21 | .then(res => res.json()) 22 | //.then(data => console.log(data)) 23 | .then(data => { 24 | var nameval = data['name'] 25 | var descrip = data['weather']['0']['description'] 26 | var tempature = data['main']['temp'] 27 | var wndspd = data['wind']['speed'] 28 | 29 | city.innerHTML=`City: ${nameval}` 30 | temp.innerHTML = `Temperature: ${ convertion(tempature)} C` 31 | description.innerHTML = `Conditions: ${descrip}` 32 | wind.innerHTML = `Wind Speed: ${wndspd} km/h` 33 | 34 | }) 35 | .catch(err => alert('You entered Wrong city name')) 36 | }) 37 | 38 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* --------------------background */ 8 | .container-fluid{ 9 | /* margin: 0%; */ 10 | background-image: url(./img/bg7.jpg); 11 | background-size: cover; 12 | /* margin-bottom: 0px; */ 13 | height:auto; 14 | /* max-height:200vh; */ 15 | } 16 | 17 | .row{ 18 | padding-top: 5.5rem; 19 | padding-bottom: 5rem; 20 | 21 | } 22 | /* -----------------------------header */ 23 | .header { 24 | background-image: url(./img/header.jpg); 25 | background-size: cover; 26 | background-position: relative; 27 | color: rgb(12, 11, 6); 28 | text-align: center; 29 | padding: 5rem; 30 | } 31 | 32 | .header h1 { 33 | font-weight: 500; 34 | font-size: 34px; 35 | font-family: 'Indie Flower', cursive; 36 | color: #e4eff7; 37 | } 38 | .header p { 39 | margin-top: 1rem; 40 | font-weight: 600; 41 | font-size: 1.5 rem; 42 | color: #e4eff7; 43 | } 44 | 45 | a:hover, a:visited, a:link, a:active{ 46 | text-decoration: none; 47 | color: #d0e5f5; 48 | } 49 | .main { 50 | /* background-image: linear-gradient(#424242, #757575); */ 51 | background-color: #212121; 52 | 53 | 54 | } 55 | 56 | /* --------------------------------input section */ 57 | .inputs { 58 | padding: 6rem 0 2rem 0; 59 | text-align: center; 60 | display: flex; 61 | justify-content: center; 62 | 63 | } 64 | 65 | .inputs input[type="text"] { 66 | height: 3.5rem; 67 | width: 30rem; 68 | background: #212121; 69 | font-weight: bold; 70 | font-size: 1.5rem; 71 | border: none; 72 | background-color: transparent; 73 | border-bottom: solid 1px #16a864; 74 | color: #16a864; 75 | border-radius: 2px; 76 | margin-right:4px ; 77 | 78 | } 79 | .inputs input[type="submit"] { 80 | height: 3.5rem; 81 | width: 6.5rem; 82 | background: #16a864; 83 | font-weight: bold; 84 | color: ghostwhite; 85 | font-size: 1.5rem; 86 | border: none; 87 | border-radius: 2px; 88 | } 89 | 90 | /* -------------------------------display */ 91 | .display { 92 | text-align: center; 93 | color: #16a864; 94 | } 95 | .wrapper { 96 | margin: 0 9rem; 97 | width: 50%; 98 | background-color: #212121; 99 | height: 40vh; 100 | margin: 50px auto; 101 | border-radius: 2px; 102 | } 103 | 104 | .wrapper h2{ 105 | padding: 5px 0; 106 | text-align: center; 107 | } 108 | .wrapper p{ 109 | text-align: center; 110 | margin:10px 0; 111 | font-size:20px; 112 | } 113 | --------------------------------------------------------------------------------