├── bg.jpg ├── index.html ├── main.css └── main.js /bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TylerPottsDev/weather-app-js/db4267152456664bed11b9dcf83a664e80389277/bg.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather app 8 | 9 | 10 | 11 |
12 |
13 | 14 |
15 |
16 |
17 |
Northampton, GB
18 |
Thursday 10 January 2020
19 |
20 |
21 |
15°c
22 |
Sunny
23 |
13°c / 16°c
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'montserrat', sans-serif; 9 | background-image: url('bg.jpg'); 10 | background-size: cover; 11 | background-position: top center; 12 | } 13 | 14 | .app-wrap { 15 | display: flex; 16 | flex-direction: column; 17 | min-height: 100vh; 18 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); 19 | } 20 | 21 | header { 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | padding: 50px 15px 15px; 26 | } 27 | 28 | header input { 29 | width: 100%; 30 | max-width: 280px; 31 | padding: 10px 15px; 32 | border: none; 33 | outline: none; 34 | background-color: rgba(255, 255, 255, 0.3); 35 | border-radius: 16px 0px 16px 0px; 36 | border-bottom: 3px solid #DF8E00; 37 | 38 | color: #313131; 39 | font-size: 20px; 40 | font-weight: 300; 41 | transition: 0.2s ease-out; 42 | } 43 | 44 | header input:focus { 45 | background-color: rgba(255, 255, 255, 0.6); 46 | } 47 | 48 | main { 49 | flex: 1 1 100%; 50 | padding: 25px 25px 50px; 51 | display: flex; 52 | flex-direction: column; 53 | align-items: center; 54 | text-align: center; 55 | } 56 | 57 | .location .city { 58 | color: #FFF; 59 | font-size: 32px; 60 | font-weight: 500; 61 | margin-bottom: 5px; 62 | } 63 | 64 | .location .date { 65 | color: #FFF; 66 | font-size: 16px; 67 | } 68 | 69 | .current .temp { 70 | color: #FFF; 71 | font-size: 102px; 72 | font-weight: 900; 73 | margin: 30px 0px; 74 | text-shadow: 2px 10px rgba(0, 0, 0, 0.6); 75 | } 76 | 77 | .current .temp span { 78 | font-weight: 500; 79 | } 80 | 81 | .current .weather { 82 | color: #FFF; 83 | font-size: 32px; 84 | font-weight: 700; 85 | font-style: italic; 86 | margin-bottom: 15px; 87 | text-shadow: 0px 3px rgba(0, 0, 0, 0.4); 88 | } 89 | 90 | .current .hi-low { 91 | color: #FFF; 92 | font-size: 24px; 93 | font-weight: 500; 94 | text-shadow: 0px 4px rgba(0, 0, 0, 0.4); 95 | } -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const api = { 2 | key: "afaf9f8d48cff6cafd32e23220bcfdbf", 3 | base: "https://api.openweathermap.org/data/2.5/" 4 | } 5 | 6 | const searchbox = document.querySelector('.search-box'); 7 | searchbox.addEventListener('keypress', setQuery); 8 | 9 | function setQuery(evt) { 10 | if (evt.keyCode == 13) { 11 | getResults(searchbox.value); 12 | } 13 | } 14 | 15 | function getResults (query) { 16 | fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`) 17 | .then(weather => { 18 | return weather.json(); 19 | }).then(displayResults); 20 | } 21 | 22 | function displayResults (weather) { 23 | let city = document.querySelector('.location .city'); 24 | city.innerText = `${weather.name}, ${weather.sys.country}`; 25 | 26 | let now = new Date(); 27 | let date = document.querySelector('.location .date'); 28 | date.innerText = dateBuilder(now); 29 | 30 | let temp = document.querySelector('.current .temp'); 31 | temp.innerHTML = `${Math.round(weather.main.temp)}°c`; 32 | 33 | let weather_el = document.querySelector('.current .weather'); 34 | weather_el.innerText = weather.weather[0].main; 35 | 36 | let hilow = document.querySelector('.hi-low'); 37 | hilow.innerText = `${Math.round(weather.main.temp_min)}°c / ${Math.round(weather.main.temp_max)}°c`; 38 | } 39 | 40 | function dateBuilder (d) { 41 | let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 42 | let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 43 | 44 | let day = days[d.getDay()]; 45 | let date = d.getDate(); 46 | let month = months[d.getMonth()]; 47 | let year = d.getFullYear(); 48 | 49 | return `${day} ${date} ${month} ${year}`; 50 | } --------------------------------------------------------------------------------