Weather

Weather app

2 | 3 |
4 |
Features:
5 |
6 |
Weather app fetching data from two different API's (async/await)
7 |
Responsive, on all devices
8 |
9 |
10 |
Technologies Used
11 |
12 |
HTML
13 |
CSS
14 |
Vanilla JS
15 |
JavaScript Fetch API
16 |
OpenWeather API
17 |
IP Geolocation API
18 |
Image Source
19 |
-------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 |
18 | 19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /link.txt: -------------------------------------------------------------------------------- 1 | https://meteo-weather.glitch.me -------------------------------------------------------------------------------- /meteoVideo.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mvstoyan/meteo-API-JS/d5709c66e9b5326089fae2ce6889719ff9a5f40f/meteoVideo.mp4 -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "JS - 10 meteo", 3 | "lockfileVersion": 2, 4 | "requires": true, 5 | "packages": { 6 | "": { 7 | "dependencies": { 8 | "dotenv": "^16.3.1" 9 | } 10 | }, 11 | "node_modules/dotenv": { 12 | "version": "16.3.1", 13 | "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", 14 | "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==", 15 | "engines": { 16 | "node": ">=12" 17 | }, 18 | "funding": { 19 | "url": "https://github.com/motdotla/dotenv?sponsor=1" 20 | } 21 | } 22 | }, 23 | "dependencies": { 24 | "dotenv": { 25 | "version": "16.3.1", 26 | "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz", 27 | "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "dotenv": "^16.3.1" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config(); 2 | 3 | const api = { 4 | endpoint: process.env.REACT_APP_WEATHER_API_ENDPOINT, 5 | key: process.env.REACT_APP_WEATHER_API_KEY, 6 | }; 7 | 8 | getApiGeolocation(); 9 | 10 | async function getApiGeolocation() { 11 | const resGeolocation = await fetch(`${process.env.REACT_APP_GEO_API_ENDPOINT}?api_key=${process.env.REACT_APP_GEO_API_KEY}`); 12 | const resultGeolocation = await resGeolocation.json(); 13 | getInfo(resultGeolocation.city); 14 | } 15 | 16 | const input = document.querySelector('#input'); 17 | input.addEventListener("keypress", enter); 18 | 19 | function enter(e) { 20 | if (e.keyCode === 13) { 21 | getInfo(input.value); 22 | } 23 | } 24 | 25 | async function getInfo(data) { 26 | const res = await fetch(`${api.endpoint}weather?q=${data}&units=metric&appID=${api.key}`); 27 | const resReceived = await res.json(); 28 | displayResult(resReceived); 29 | input.value=""; 30 | } 31 | 32 | function displayResult(resReceived) { 33 | document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + resReceived.name + "')"; 34 | let city = document.querySelector("#city"); 35 | city.textContent = `${resReceived.name}, ${resReceived.sys.country}`; 36 | 37 | getOurDate(); 38 | 39 | let temperature = document.querySelector("#temperature"); 40 | temperature.innerHTML = `${Math.round(resReceived.main.temp)}°`; 41 | 42 | let feelsLike = document.querySelector("#feelsLike"); 43 | feelsLike.innerHTML = `Feels like: ${Math.round(resReceived.main.feels_like)}°`; 44 | 45 | let conditions = document.querySelector("#conditions"); 46 | conditions.textContent = `${resReceived.weather[0].main}`; 47 | 48 | let variation = document.querySelector("#variation"); 49 | variation.innerHTML = "Min: " + `${Math.round(resReceived.main.temp_min)}°` + " " + "Max " + `${Math.round(resReceived.main.temp_max)}°` 50 | } 51 | 52 | function getOurDate() { 53 | const myDate = new Date(); 54 | const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 55 | const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 56 | 57 | let day = days[myDate.getDay()]; 58 | 59 | let todayDate = myDate.getDate(); 60 | 61 | let month = months[myDate.getMonth()]; 62 | 63 | let year = myDate.getFullYear(); 64 | 65 | let showDate = document.querySelector("#date"); 66 | showDate.textContent = `${day}` + " " + `${todayDate}` + " " + `${month}` + " " + `${year}` 67 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | display: flex; 4 | justify-content: center; 5 | } 6 | 7 | #container { 8 | flex-direction: column; 9 | align-self: center; 10 | background-image: linear-gradient(rgba(255, 255, 255, 0.895), rgba(219, 215, 214, 0.804)); 11 | box-shadow: 0px 5px 5px rgba(255,255,255, 0.37); 12 | margin: 20px; 13 | width: 40%; 14 | font-family: 'Montserrat', sans-serif; 15 | 16 | } 17 | 18 | #header { 19 | display: flex; 20 | justify-content: center; 21 | margin-top: 30px; 22 | } 23 | 24 | #input { 25 | background-color: rgba(255, 255, 255, 0.16); 26 | border-radius: 20px; 27 | border: 2px solid #C55300; 28 | padding: 15px; 29 | font-size: 20px; 30 | font-family: 'Montserrat', sans-serif; 31 | } 32 | 33 | 34 | #when-where { 35 | display: flex; 36 | flex-direction: column; 37 | align-items: center; 38 | } 39 | 40 | #city { 41 | color: #C55300; 42 | font-size: 35px; 43 | font-weight: bold; 44 | } 45 | 46 | #date { 47 | color: #191818; 48 | font-size: 24px; 49 | } 50 | 51 | #now { 52 | display: flex; 53 | flex-direction: column; 54 | align-items: center; 55 | } 56 | 57 | 58 | #temperature { 59 | color: rgb(255, 255, 255); 60 | font-size: 80px; 61 | font-weight: bold; 62 | text-shadow: 2px 5px rgb(72, 71, 71); 63 | margin: 0; 64 | } 65 | 66 | #feelsLike { 67 | color: #191818; 68 | font-size: 30px; 69 | font-weight: bold; 70 | } 71 | 72 | #conditions { 73 | color: #191818; 74 | font-size: 32px; 75 | font-weight: bold; 76 | font-style: italic; 77 | } 78 | 79 | #variation { 80 | color: #191818; 81 | font-size: 26px; 82 | font-weight: bold; 83 | } 84 | 85 | @media all and (max-width: 1024px) { 86 | 87 | body { 88 | background-repeat: no-repeat; 89 | background-size: cover; 90 | width: 100%; 91 | height: 100vh; 92 | padding: 0; 93 | margin: 0; 94 | background-position: center; 95 | background-color: #f7f7f0; 96 | } 97 | 98 | #container { 99 | margin: 10px; 100 | width: 90%; 101 | 102 | } 103 | 104 | #header { 105 | margin-top: 30px; 106 | } 107 | 108 | #input { 109 | padding: 10px; 110 | font-size: 18px; 111 | } 112 | 113 | #city { 114 | font-size: 30px; 115 | } 116 | 117 | #date { 118 | font-size: 20px; 119 | } 120 | 121 | #temperature { 122 | font-size: 60px; 123 | } 124 | 125 | #feelsLike { 126 | font-size: 20px; 127 | } 128 | 129 | #conditions { 130 | font-size: 25px; 131 | } 132 | 133 | #variation { 134 | font-size: 20px; 135 | } 136 | } 137 | 138 | -------------------------------------------------------------------------------- /weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mvstoyan/meteo-API-JS/d5709c66e9b5326089fae2ce6889719ff9a5f40f/weather.png --------------------------------------------------------------------------------