├── README.md ├── icons ├── favicon.ico ├── loader.gif └── sunny.png ├── index.html ├── media ├── cloudy1.jpg ├── cloudy2.jpg ├── cloudy3.jpg ├── cloudy4.jpg ├── cloudy5.jpg ├── day1.jpg ├── day2.jpg ├── day3.jpg ├── day4.jpg ├── day5.jpg ├── night1.jpg ├── night2.jpg ├── night3.jpg ├── night4.jpg ├── night5.jpg ├── rainy1.jpg ├── rainy2.jpg ├── rainy3.jpg ├── rainy4.jpg └── rainy5.jpg ├── screenshots ├── 1.png ├── 2.png ├── 3.png └── 4.png ├── scripts ├── mobile.js └── script.js └── styles └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Weather App using OpenWeatherMap API 2 | A weather app made using OpenWeatherMap API in Vanilla JavaScript. 3 | 4 | The app tells the current temperature and some additional information like Air Quality Index, Real Feel, Humidity, Highest Temperature, Lowest Temperature, Wind Speed, Wind Direction, Visibility, Pressure, Sunrise and Sunset. 5 | 6 | Visit Website --> [WeatherAppUsingOpenWeatherMapAPI](https://kshitizrohilla.github.io/weather-app-using-openweathermap-api) 7 | 8 | ## Configuration 9 | To use the OpenWeatherMap API, you need to obtain an API key. Follow these steps to set up your API key: 10 | 11 | * Go to the OpenWeatherMap website: https://openweathermap.org/ 12 | * Sign up for a free account or log in if you already have an account. 13 | * Once logged in, go to your profile and navigate to the "API Keys" section. 14 | * Generate a new API key and copy it. 15 | * In the project directory, locate the script.js file. Inside this file, you will find a constant called API_KEY. Replace the placeholder value 'YOUR_API_KEY' with your actual API key obtained from OpenWeatherMap. 16 | 17 | ``` 18 | const API_KEY = 'YOUR_API_KEY'; 19 | ``` 20 | 21 | ## Screenshots 22 | ![sample-screenshot](https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/main/screenshots/1.png) 23 | ![sample-screenshot](https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/main/screenshots/2.png) 24 | ![sample-screenshot](https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/main/screenshots/3.png) 25 | ![sample-screenshot](https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/main/screenshots/4.png) 26 | -------------------------------------------------------------------------------- /icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/icons/favicon.ico -------------------------------------------------------------------------------- /icons/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/icons/loader.gif -------------------------------------------------------------------------------- /icons/sunny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/icons/sunny.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weather App Using OpenWeatherMap API 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 | 37 | 38 | 39 | 63 | 64 | 65 | 66 | 75 | 76 | 80 | 81 |

Search City...

82 | 83 |
84 |
85 |
86 |
87 | 88 |

89 | 90 |
91 | 92 | Air Quality Index 93 | Moderate 94 | 95 | 96 | 97 | Real Feel 98 | - 99 | 100 | 101 | 102 | Humidity 103 | - 104 | 105 | 106 | 107 | Highest Temperature 108 | - 109 | 110 | 111 | 112 | Lowest Temperature 113 | - 114 | 115 |
116 | 117 |
118 | 119 | Wind Speed 120 | - 121 | 122 | 123 | 124 | Wind Direction 125 | - 126 | 127 | 128 | 129 | Visibility 130 | - 131 | 132 | 133 | 134 | Pressure 135 | - 136 | 137 | 138 | 139 | Sunrise 140 | - 141 | 142 | 143 | 144 | Sunset 145 | - 146 | 147 |
148 | 149 |
150 | 151 | 152 |
153 | 154 |

Daily

155 | 156 |
157 | 217 |
218 |
219 | 220 | 221 | 222 |




223 | 224 | 225 | -------------------------------------------------------------------------------- /media/cloudy1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/cloudy1.jpg -------------------------------------------------------------------------------- /media/cloudy2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/cloudy2.jpg -------------------------------------------------------------------------------- /media/cloudy3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/cloudy3.jpg -------------------------------------------------------------------------------- /media/cloudy4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/cloudy4.jpg -------------------------------------------------------------------------------- /media/cloudy5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/cloudy5.jpg -------------------------------------------------------------------------------- /media/day1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/day1.jpg -------------------------------------------------------------------------------- /media/day2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/day2.jpg -------------------------------------------------------------------------------- /media/day3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/day3.jpg -------------------------------------------------------------------------------- /media/day4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/day4.jpg -------------------------------------------------------------------------------- /media/day5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/day5.jpg -------------------------------------------------------------------------------- /media/night1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/night1.jpg -------------------------------------------------------------------------------- /media/night2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/night2.jpg -------------------------------------------------------------------------------- /media/night3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/night3.jpg -------------------------------------------------------------------------------- /media/night4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/night4.jpg -------------------------------------------------------------------------------- /media/night5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/night5.jpg -------------------------------------------------------------------------------- /media/rainy1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/rainy1.jpg -------------------------------------------------------------------------------- /media/rainy2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/rainy2.jpg -------------------------------------------------------------------------------- /media/rainy3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/rainy3.jpg -------------------------------------------------------------------------------- /media/rainy4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/rainy4.jpg -------------------------------------------------------------------------------- /media/rainy5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/media/rainy5.jpg -------------------------------------------------------------------------------- /screenshots/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/screenshots/1.png -------------------------------------------------------------------------------- /screenshots/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/screenshots/2.png -------------------------------------------------------------------------------- /screenshots/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/screenshots/3.png -------------------------------------------------------------------------------- /screenshots/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kshitizrohilla/weather-app-using-openweathermap-api/7e0f93f96c3669516be5c3533384281dacdbbf1a/screenshots/4.png -------------------------------------------------------------------------------- /scripts/mobile.js: -------------------------------------------------------------------------------- 1 | var cityInputMobile = document.getElementById("mobileSearchCity"); 2 | 3 | cityInputMobile.addEventListener("keyup", function (event) { 4 | if (event.key === "Enter") { 5 | loader(); 6 | function loader() { 7 | 8 | document.getElementById("locationName").innerHTML = ""; 9 | document.getElementById("temperatureValue").innerHTML = ""; 10 | document.getElementById("weatherType").innerHTML = ""; 11 | 12 | const img1 = document.createElement("img"); 13 | const img2 = document.createElement("img"); 14 | const img3 = document.createElement("img"); 15 | 16 | img1.id = "loader1"; 17 | img2.id = "loader2"; 18 | img3.id = "loader3"; 19 | 20 | img1.src = "icons/loader.gif"; 21 | img2.src = "icons/loader.gif"; 22 | img3.src = "icons/loader.gif"; 23 | 24 | const parentElement1 = document.getElementById("locationName"); 25 | const parentElement2 = document.getElementById("temperatureValue"); 26 | const parentElement3 = document.getElementById("weatherType"); 27 | 28 | parentElement1.appendChild(img1); 29 | parentElement2.appendChild(img2); 30 | parentElement3.appendChild(img3); 31 | 32 | // document.getElementById("loader1").src = "icons/loader.gif"; 33 | // document.getElementById("loader2").src = "icons/loader.gif"; 34 | // document.getElementById("loader3").src = "icons/loader.gif"; 35 | } 36 | 37 | var cityInputValue = cityInputMobile.value; 38 | 39 | var apiKey = "b1fd6e14799699504191b6bdbcadfc35"; // Default 40 | var unit = "metric"; 41 | var apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityInputValue}&appid=${apiKey}&units=${unit}`; 42 | 43 | if (cityInputValue != "") { 44 | async function getWeather() { 45 | var response = await fetch(apiUrl); 46 | var data = await response.json(); 47 | 48 | if (data.message != "city not found" && data.cod != "404") { 49 | var location = data.name; 50 | var temperature = data.main.temp; 51 | var weatherType = data.weather[0].description; 52 | var realFeel = data.main.feels_like; 53 | var windSpeed = data.wind.speed; 54 | var windDirection = data.wind.deg; 55 | var visibility = data.visibility / 1000; 56 | var pressure = data.main.pressure; 57 | var maxTemperature = data.main.temp_max; 58 | var minTemperature = data.main.temp_min; 59 | var humidity = data.main.humidity; 60 | var sunrise = data.sys.sunrise; 61 | var sunset = data.sys.sunset; 62 | 63 | fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${cityInputValue}&appid=${apiKey}`) 64 | .then(response => response.json()) 65 | .then(data => { 66 | const forecastContainer = document.getElementById('forecast-container'); 67 | 68 | forecastContainer.innerHTML = ''; 69 | 70 | const dailyForecasts = {}; 71 | data.list.forEach(entry => { 72 | const dateTime = new Date(entry.dt * 1000); 73 | const date = dateTime.toLocaleDateString('en-US', { weekday: 'short', day: 'numeric' }); 74 | if (!dailyForecasts[date]) { 75 | dailyForecasts[date] = { 76 | date: date, 77 | icon: `https://openweathermap.org/img/w/${entry.weather[0].icon}.png`, 78 | maxTemp: -Infinity, 79 | minTemp: Infinity, 80 | weatherType: entry.weather[0].main 81 | }; 82 | } 83 | 84 | if (entry.main.temp_max > dailyForecasts[date].maxTemp) { 85 | dailyForecasts[date].maxTemp = entry.main.temp_max; 86 | } 87 | if (entry.main.temp_min < dailyForecasts[date].minTemp) { 88 | dailyForecasts[date].minTemp = entry.main.temp_min; 89 | } 90 | }); 91 | 92 | Object.values(dailyForecasts).forEach(day => { 93 | const forecastCard = document.createElement('div'); 94 | forecastCard.classList.add('daily-forecast-card'); 95 | 96 | forecastCard.innerHTML = ` 97 |

${day.date}

98 | 99 |
100 | ${Math.round(day.maxTemp - 273.15)}oC 101 | ${Math.round(day.minTemp - 273.15)}oC 102 |
103 |

${day.weatherType}

104 | `; 105 | 106 | forecastContainer.appendChild(forecastCard); 107 | }); 108 | }) 109 | .catch(error => { 110 | console.error('Error fetching data:', error); 111 | }); 112 | 113 | document.getElementById("locationName").innerHTML = location; 114 | document.getElementById("temperatureValue").innerHTML = temperature + "oC"; 115 | document.getElementById("weatherType").innerHTML = weatherType; 116 | document.getElementById("realFeelAdditionalValue").innerHTML = realFeel + "oC"; 117 | document.getElementById("windSpeedAdditionalValue").innerHTML = windSpeed + " km/h"; 118 | document.getElementById("windDirectionAdditionalValue").innerHTML = windDirection; 119 | document.getElementById("visibilityAdditionalValue").innerHTML = visibility + " km"; 120 | document.getElementById("pressureAdditionalValue").innerHTML = pressure; 121 | document.getElementById("maxTemperatureAdditionalValue").innerHTML = maxTemperature + "oC"; 122 | document.getElementById("minTemperatureAdditionalValue").innerHTML = minTemperature + "oC"; 123 | document.getElementById("humidityAdditionalValue").innerHTML = humidity; 124 | document.getElementById("sunriseAdditionalValue").innerHTML = sunrise; 125 | document.getElementById("sunsetAdditionalValue").innerHTML = sunset; 126 | } 127 | else { 128 | document.getElementById("locationName").innerHTML = "City Not Found"; 129 | document.getElementById("temperatureValue").innerHTML = ""; 130 | document.getElementById("weatherType").innerHTML = ""; 131 | } 132 | } 133 | 134 | getWeather(); 135 | } 136 | else document.getElementById("locationName").innerHTML = "Enter a city name..."; 137 | } 138 | }); -------------------------------------------------------------------------------- /scripts/script.js: -------------------------------------------------------------------------------- 1 | var cityInput = document.getElementById("searchCity"); 2 | 3 | var backgroundsList = [ 4 | "day1.jpg", 5 | "day2.jpg", 6 | "day3.jpg", 7 | "day4.jpg", 8 | "day5.jpg", 9 | // "night1.jpg", 10 | // "night2.jpg", 11 | // "night3.jpg", 12 | // "night4.jpg", 13 | // "night5.jpg", 14 | "cloudy1.jpg", 15 | "cloudy2.jpg", 16 | "cloudy3.jpg", 17 | "cloudy4.jpg", 18 | "cloudy5.jpg", 19 | // "rainy1.jpg", 20 | // "rainy2.jpg", 21 | // "rainy3.jpg", 22 | // "rainy4.jpg", 23 | // "rainy5.jpg", 24 | ]; 25 | 26 | var randomBackground = backgroundsList[Math.floor(Math.random() * backgroundsList.length)]; 27 | 28 | document.body.style.background = "linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)) , url('media/" + randomBackground + "')"; 29 | 30 | cityInput.addEventListener("keyup", function (event) { 31 | if (event.key === "Enter") { 32 | loader(); 33 | function loader() { 34 | 35 | document.getElementById("locationName").innerHTML = ""; 36 | document.getElementById("temperatureValue").innerHTML = ""; 37 | document.getElementById("weatherType").innerHTML = ""; 38 | 39 | const img1 = document.createElement("img"); 40 | const img2 = document.createElement("img"); 41 | const img3 = document.createElement("img"); 42 | 43 | img1.id = "loader1"; 44 | img2.id = "loader2"; 45 | img3.id = "loader3"; 46 | 47 | img1.src = "icons/loader.gif"; 48 | img2.src = "icons/loader.gif"; 49 | img3.src = "icons/loader.gif"; 50 | 51 | const parentElement1 = document.getElementById("locationName"); 52 | const parentElement2 = document.getElementById("temperatureValue"); 53 | const parentElement3 = document.getElementById("weatherType"); 54 | 55 | parentElement1.appendChild(img1); 56 | parentElement2.appendChild(img2); 57 | parentElement3.appendChild(img3); 58 | 59 | // document.getElementById("loader1").src = "icons/loader.gif"; 60 | // document.getElementById("loader2").src = "icons/loader.gif"; 61 | // document.getElementById("loader3").src = "icons/loader.gif"; 62 | } 63 | 64 | var cityInputValue = cityInput.value; 65 | 66 | var apiKey = "b1fd6e14799699504191b6bdbcadfc35"; // Default 67 | var unit = "metric"; 68 | var apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityInputValue}&appid=${apiKey}&units=${unit}`; 69 | 70 | if (cityInputValue != "") { 71 | async function getWeather() { 72 | var response = await fetch(apiUrl); 73 | var data = await response.json(); 74 | 75 | if (data.message != "city not found" && data.cod != "404") { 76 | var location = data.name; 77 | var temperature = data.main.temp; 78 | var weatherType = data.weather[0].description; 79 | var realFeel = data.main.feels_like; 80 | var windSpeed = data.wind.speed; 81 | var windDirection = data.wind.deg; 82 | var visibility = data.visibility / 1000; 83 | var pressure = data.main.pressure; 84 | var maxTemperature = data.main.temp_max; 85 | var minTemperature = data.main.temp_min; 86 | var humidity = data.main.humidity; 87 | var sunrise = data.sys.sunrise; 88 | var sunset = data.sys.sunset; 89 | 90 | fetch(`https://api.openweathermap.org/data/2.5/forecast?q=${cityInputValue}&appid=${apiKey}`) 91 | .then(response => response.json()) 92 | .then(data => { 93 | const forecastContainer = document.getElementById('forecast-container'); 94 | 95 | forecastContainer.innerHTML = ''; 96 | 97 | const dailyForecasts = {}; 98 | data.list.forEach(entry => { 99 | const dateTime = new Date(entry.dt * 1000); 100 | const date = dateTime.toLocaleDateString('en-US', { weekday: 'short', day: 'numeric' }); 101 | if (!dailyForecasts[date]) { 102 | dailyForecasts[date] = { 103 | date: date, 104 | icon: `https://openweathermap.org/img/w/${entry.weather[0].icon}.png`, 105 | maxTemp: -Infinity, 106 | minTemp: Infinity, 107 | weatherType: entry.weather[0].main 108 | }; 109 | } 110 | 111 | if (entry.main.temp_max > dailyForecasts[date].maxTemp) { 112 | dailyForecasts[date].maxTemp = entry.main.temp_max; 113 | } 114 | if (entry.main.temp_min < dailyForecasts[date].minTemp) { 115 | dailyForecasts[date].minTemp = entry.main.temp_min; 116 | } 117 | }); 118 | 119 | Object.values(dailyForecasts).forEach(day => { 120 | const forecastCard = document.createElement('div'); 121 | forecastCard.classList.add('daily-forecast-card'); 122 | 123 | forecastCard.innerHTML = ` 124 |

${day.date}

125 | 126 |
127 | ${Math.round(day.maxTemp - 273.15)}oC 128 | ${Math.round(day.minTemp - 273.15)}oC 129 |
130 |

${day.weatherType}

131 | `; 132 | 133 | forecastContainer.appendChild(forecastCard); 134 | }); 135 | }) 136 | .catch(error => { 137 | console.error('Error fetching data:', error); 138 | }); 139 | 140 | 141 | 142 | document.getElementById("locationName").innerHTML = location; 143 | document.getElementById("temperatureValue").innerHTML = temperature + "oC"; 144 | document.getElementById("weatherType").innerHTML = weatherType; 145 | document.getElementById("realFeelAdditionalValue").innerHTML = realFeel + "oC"; 146 | document.getElementById("windSpeedAdditionalValue").innerHTML = windSpeed + " km/h"; 147 | document.getElementById("windDirectionAdditionalValue").innerHTML = windDirection; 148 | document.getElementById("visibilityAdditionalValue").innerHTML = visibility + " km"; 149 | document.getElementById("pressureAdditionalValue").innerHTML = pressure; 150 | document.getElementById("maxTemperatureAdditionalValue").innerHTML = maxTemperature + "oC"; 151 | document.getElementById("minTemperatureAdditionalValue").innerHTML = minTemperature + "oC"; 152 | document.getElementById("humidityAdditionalValue").innerHTML = humidity; 153 | document.getElementById("sunriseAdditionalValue").innerHTML = sunrise; 154 | document.getElementById("sunsetAdditionalValue").innerHTML = sunset; 155 | } 156 | else { 157 | document.getElementById("locationName").innerHTML = "City Not Found"; 158 | document.getElementById("temperatureValue").innerHTML = ""; 159 | document.getElementById("weatherType").innerHTML = ""; 160 | } 161 | } 162 | 163 | getWeather(); 164 | } 165 | else document.getElementById("locationName").innerHTML = "Enter a city name..."; 166 | } 167 | }); -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | outline: none; 6 | -webkit-tap-highlight-color: transparent; 7 | opacity: 100%; 8 | /* transition: 0.25s; */ 9 | } 10 | 11 | .mobile-navbar { 12 | display: none; 13 | } 14 | 15 | body { 16 | margin: 0; 17 | font-family: "Montserrat", sans-serif; 18 | font-weight: 500; 19 | } 20 | 21 | #loader1, 22 | #loader2, 23 | #loader3 { 24 | width: 37.5px; 25 | height: 37.5px; 26 | } 27 | 28 | .imgs-as-icons { 29 | width: 50px; 30 | height: 50px; 31 | } 32 | 33 | .navbar { 34 | /* background: #212a51; */ 35 | background: rgba(0, 0, 0, 0.375); 36 | text-align: right; 37 | opacity: 100%; 38 | transition: 0.3s; 39 | } 40 | 41 | /* START OF MOBILE STYLES */ 42 | 43 | .mobile-navbar { 44 | list-style-type: none; 45 | /* background: rgba(0, 0, 0, 1.0); */ 46 | opacity: 100%; 47 | transition: 0.3s; 48 | } 49 | 50 | .mobile-navbar li { 51 | margin: 7.5px auto; 52 | width: 87.5%; 53 | } 54 | 55 | .mobile-navbar li input { 56 | height: 50px; 57 | width: 100%; 58 | background: #1d1d1f; 59 | color: #fff; 60 | text-align: center; 61 | border: none; 62 | border-radius: 50px; 63 | outline: none; 64 | font-size: 20px; 65 | } 66 | 67 | .mobile-navbar input::placeholder { 68 | color: lightgrey; 69 | } 70 | 71 | /* END OF MOBILE STYLES */ 72 | 73 | ul { 74 | margin: 0; 75 | padding: 5px; 76 | transition: 0.3s; 77 | } 78 | 79 | .navbar li { 80 | margin: 0 0; 81 | padding: 5px; 82 | display: inline-block; 83 | transition: 0.3s; 84 | } 85 | 86 | .navbar li a { 87 | font-size: 25px; 88 | color: #fff; 89 | padding: 5px 10px; 90 | text-decoration: none; 91 | transition: 0.3s; 92 | border-radius: 5px; 93 | } 94 | 95 | .navbar .search-city { 96 | width: 25vw; 97 | height: 5.75vh; 98 | font-size: 18.75px; 99 | } 100 | 101 | .search-city { 102 | letter-spacing: 0.50px; 103 | padding-left: 20px; 104 | background: rgba(0, 0, 0, 0.50); 105 | border: none; 106 | color: #fff; 107 | border-radius: 50px; 108 | outline: none; 109 | } 110 | 111 | .navbar a:hover:not(.repo-link) { 112 | background: #000; 113 | transition: 0.3s; 114 | border-radius: 5px; 115 | } 116 | 117 | .location-name { 118 | font-weight: 400; 119 | text-align: center; 120 | color: #fff; 121 | } 122 | 123 | .temperature-container { 124 | text-align: center; 125 | margin: auto; 126 | font-size: 50px; 127 | } 128 | 129 | .temperature-icon { 130 | margin-bottom: -15px; 131 | padding: 0; 132 | } 133 | 134 | .temperature-value { 135 | margin-top: -15px; 136 | padding: 0; 137 | color: #fff; 138 | } 139 | 140 | .weather-type { 141 | font-weight: 400; 142 | text-align: center; 143 | color: #fff; 144 | } 145 | 146 | .additionals-first-row, 147 | .additionals-second-row { 148 | font-size: 12.5px; 149 | width: 100%; 150 | text-align: center; 151 | } 152 | 153 | .additionals-first-row { 154 | margin-bottom: 12.5px; 155 | } 156 | 157 | .additionals-second-row { 158 | margin-top: 12.5px; 159 | } 160 | 161 | .air-quality-additional, 162 | .real-feel-additional, 163 | .humidity-additional, 164 | .max-temperature-additional, 165 | .min-temperature-additional { 166 | margin-left: 5px; 167 | margin-right: 5px; 168 | background: #fff; 169 | border-radius: 50px; 170 | padding: 2.5px 10px; 171 | } 172 | 173 | .wind-speed-additional, 174 | .wind-direction-additional, 175 | .visibility-additional, 176 | .pressure-additional, 177 | .sunrise-additional, 178 | .sunset-additional { 179 | margin-left: 5px; 180 | margin-right: 5px; 181 | background: #fff; 182 | border-radius: 50px; 183 | padding: 2.5px 10px; 184 | } 185 | 186 | .separator { 187 | width: 25%; 188 | margin: auto; 189 | height: 7.5px; 190 | background: lightgrey; 191 | border-radius: 50px; 192 | } 193 | 194 | .daily-forecast { 195 | padding: 25px; 196 | margin-top: -25px; 197 | text-align: center; 198 | } 199 | 200 | .daily-forecast .daily-forecast-label { 201 | color: #fff; 202 | } 203 | 204 | 205 | .daily-forecast-card { 206 | display: inline-block; 207 | border-radius: 10px; 208 | background: rgba(0, 0, 0, 0); 209 | width: 125px; 210 | height: 162.5px; 211 | padding: 2.5px 10px; 212 | margin-left: 2.5px; 213 | margin-right: 2.5px; 214 | color: #fff; 215 | } 216 | 217 | .daily-forecast-card .daily-forecast-logo { 218 | font-size: 37.5px; 219 | margin: -10px -10px; 220 | } 221 | 222 | .daily-forecast-card .daily-forecast-date { 223 | font-size: 17.5px; 224 | margin-top: 12.5px; 225 | font-weight: 400; 226 | } 227 | 228 | .daily-forecast-card .daily-forecast-logo { 229 | margin-top: -15px; 230 | margin-bottom: 2.5px; 231 | } 232 | 233 | .daily-forecast-card .weather-type-daily-forecast { 234 | font-weight: normal; 235 | margin-top: 2.5px; 236 | } 237 | 238 | .max-daily-forecast { 239 | font-weight: bold; 240 | font-size: 25px; 241 | } 242 | 243 | @media (max-width: 600px) { 244 | .navbar { 245 | display: none; 246 | } 247 | 248 | .mobile-navbar { 249 | display: block; 250 | 251 | } 252 | 253 | .additionals-first-row, 254 | .additionals-second-row { 255 | line-height: 27.5px; 256 | margin: 0; 257 | } 258 | 259 | .additionals-first-row span, 260 | .additionals-second-row span { 261 | display: none; 262 | } 263 | 264 | .daily-forecast-card { 265 | margin-top: 10px; 266 | margin-bottom: 10px; 267 | } 268 | 269 | .daily-forecast .daily-forecast-label { 270 | background: lightgrey; 271 | color: #252525; 272 | padding: 10px; 273 | width: 75%; 274 | border-radius: 50px; 275 | margin: auto; 276 | } 277 | 278 | #weatherType { 279 | margin-top: 0; 280 | } 281 | } 282 | 283 | .daily-forecast-card { 284 | display: inline-block; 285 | border-radius: 10px; 286 | background: rgba(0, 0, 0, 0); 287 | width: 125px; 288 | height: 162.5px; 289 | padding: 2.5px 10px; 290 | margin-left: 2.5px; 291 | margin-right: 2.5px; 292 | color: #fff; 293 | } 294 | 295 | .daily-forecast-card .daily-forecast-logo { 296 | font-size: 37.5px; 297 | margin: -10px -10px; 298 | } 299 | 300 | .daily-forecast-card .daily-forecast-date { 301 | font-size: 17.5px; 302 | margin-top: 12.5px; 303 | font-weight: 400; 304 | } 305 | 306 | .daily-forecast-card .daily-forecast-logo { 307 | margin-top: -15px; 308 | } 309 | 310 | .daily-forecast-card .weather-type-daily-forecast { 311 | font-weight: normal; 312 | margin-top: 2.5px; 313 | } 314 | 315 | .max-min-temperature-daily-forecast { 316 | display: flex; 317 | flex-direction: column; 318 | align-items: center; 319 | } 320 | 321 | .max-daily-forecast { 322 | font-weight: bold; 323 | font-size: 25px; 324 | } 325 | 326 | .min-daily-forecast { 327 | font-size: 15px; 328 | opacity: 0.7; 329 | } --------------------------------------------------------------------------------