diff --git a/style.css b/assets/css/style.css
similarity index 94%
rename from style.css
rename to assets/css/style.css
index 172585e..376bbb7 100644
--- a/style.css
+++ b/assets/css/style.css
@@ -1,89 +1,90 @@
-body {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- font-family: 'Open Sans', sans-serif;
- background: #222;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: center;
- font-size: 120%;
- }
-
- .card {
- background: #000000d0;
- color: white;
- padding: 2em;
- border-radius: 30px;
- width: 100%;
- max-width: 420px;
- margin: 1em;
- }
-
- .search {
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- button {
- margin: 0.5em;
- border-radius: 50%;
- border: none;
- height: 44px;
- width: 44px;
- outline: none;
- background: #7c7c7c2b;
- color: white;
- cursor: pointer;
- transition: 0.2s ease-in-out;
- }
-
- input.search-bar {
- border: none;
- outline: none;
- padding: 0.4em 1em;
- border-radius: 24px;
- background: #7c7c7c2b;
- color: white;
- font-family: inherit;
- font-size: 105%;
- width: calc(100% - 100px);
- }
-
- button:hover {
- background: #7c7c7c6b;
- }
-
- h1.temp {
- margin: 0;
- margin-bottom: 0.4em;
- }
-
- .flex {
- display: flex;
- align-items: center;
- }
-
- .description {
- text-transform: capitalize;
- /**This margin is needless as the icon has inbuilt margins.**/
- /**margin-left: 8px;**/
- }
-
- .weather.loading {
- visibility: hidden;
- max-height: 20px;
- position: relative;
- }
-
- .weather.loading:after {
- visibility: visible;
- content: "Loading...";
- color: white;
- position: absolute;
- top: 0;
- left: 20px;
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ font-family: 'Open Sans', sans-serif;
+ background: #222;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: center;
+ font-size: 120%;
+ background: url('../images/weather-background.png');
+ }
+
+ .card {
+ background: #000000d0;
+ color: white;
+ padding: 2em;
+ border-radius: 30px;
+ width: 100%;
+ max-width: 420px;
+ margin: 1em;
+ }
+
+ .search {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ button {
+ margin: 0.5em;
+ border-radius: 50%;
+ border: none;
+ height: 44px;
+ width: 44px;
+ outline: none;
+ background: #7c7c7c2b;
+ color: white;
+ cursor: pointer;
+ transition: 0.2s ease-in-out;
+ }
+
+ input.search-bar {
+ border: none;
+ outline: none;
+ padding: 0.4em 1em;
+ border-radius: 24px;
+ background: #7c7c7c2b;
+ color: white;
+ font-family: inherit;
+ font-size: 105%;
+ width: calc(100% - 100px);
+ }
+
+ button:hover {
+ background: #7c7c7c6b;
+ }
+
+ h1.temp {
+ margin: 0;
+ margin-bottom: 0.4em;
+ }
+
+ .flex {
+ display: flex;
+ align-items: center;
+ }
+
+ .description {
+ text-transform: capitalize;
+ /**This margin is needless as the icon has inbuilt margins.**/
+ /**margin-left: 8px;**/
+ }
+
+ .weather.loading {
+ visibility: hidden;
+ max-height: 20px;
+ position: relative;
+ }
+
+ .weather.loading:after {
+ visibility: visible;
+ content: "Loading...";
+ color: white;
+ position: absolute;
+ top: 0;
+ left: 20px;
}
\ No newline at end of file
diff --git a/assets/images/weather-background.png b/assets/images/weather-background.png
new file mode 100644
index 0000000..455d005
Binary files /dev/null and b/assets/images/weather-background.png differ
diff --git a/x-icon.png b/assets/images/x-icon.png
similarity index 100%
rename from x-icon.png
rename to assets/images/x-icon.png
diff --git a/script.js b/assets/js/script.js
similarity index 97%
rename from script.js
rename to assets/js/script.js
index bb69095..cc68c83 100644
--- a/script.js
+++ b/assets/js/script.js
@@ -1,145 +1,145 @@
-let weather = {
- cityField: document.querySelector(".city"),
- iconField: document.querySelector(".icon"),
- descriptionField: document.querySelector(".description"),
- tempField: document.querySelector(".temp"),
- humidityField: document.querySelector(".humidity"),
- windField: document.querySelector(".wind"),
- apiKey: "5e1ddb8233f281231d95bf6718bddbb8",
- googleApiKey: "", // Add your google api key
- changeVisibilty: function (fields, value) {
- for (let field of fields) {
- field.style.visibility = value;
- }
- },
-
-
-
- //get current geolocation weather data
- currentLoc: function () {
- navigator.geolocation.getCurrentPosition(position => {
- let lat = position.coords.latitude;
- let lon = position.coords.longitude;
- fetch(
- "https://api.openweathermap.org/data/2.5/weather?lat=" +
- lat + "&lon=" + lon +
- "&units=metric&appid=" +
- weather.apiKey
- )
- .then((response) => {
- if (!response.ok) {
- weather.cityField.innerText = `Sorry, the weather in ${lat} ${lon} was not found, try again.`;
- weather.changeVisibilty([weather.iconField, weather.descriptionField,
- weather.tempField, weather.humidityField, weather.windField], "hidden");
- throw new Error("No weather found.");
- }
- return response.json();
- })
- .then((data) => {
- this.queryPhotoReference(data)
- weather.displayWeather(data)
- });
- }, error => {
- weather.fetchWeather("Kolkata")
- })
- },
-
-
-
- toFarenheit: function (temp) {
- return Number(temp) * 1.8 + 32;
- },
-
- fetchWeather: function (city) {
- fetch(
- "https://api.openweathermap.org/data/2.5/weather?q=" +
- city +
- "&units=metric&appid=" +
- this.apiKey
- )
- .then((response) => {
- if (!response.ok) {
- this.cityField.innerText = `Sorry, the weather in ${city} was not found, try again.`;
- this.changeVisibilty([this.iconField, this.descriptionField,
- this.tempField, this.humidityField, this.windField], "hidden");
- throw new Error("No weather found.");
- }
- return response.json();
- })
- .then((data) => {
- this.queryPhotoReference(data)
- this.displayWeather(data)
- });
- },
-
- queryPhotoReference: function (data) {
- fetch(
- `https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=${data.name}&key=${weather.googleApiKey}&inputtype=textquery&locationbias=point:${data.coord.lat},${data.coord.lon}&fields=name,photo`
- )
- .then((response) => {
- if (!response.ok) {
-
- throw new Error("No photo reference found.");
- }
- return response.json();
- })
- .then((data) => {
- const photoReference = data?.candidates[0]
- if (photoReference.photos) {
- fetch(
- `https://maps.googleapis.com/maps/api/place/photo?photoreference=${photoReference.photos[0].photo_reference}&key=${weather.googleApiKey}&maxheight=1600`
- )
- .then((response) => {
- if (!response.ok) {
- throw new Error("No photo found.");
- }
- return response
- })
- .then((res) => {
- return document.body.style.backgroundImage = `url(${res.url})`;
- })
- } else {
- return document.body.style.backgroundImage = `url(https://source.unsplash.com/1600x900/?cities)`;
-
- }
- })
- .catch((err) => console.log('err', err))
-
- },
-
- displayWeather: async function (data) {
- const { name } = data;
- const { icon, description } = data.weather[0];
- const { temp, humidity } = data.main;
- const { speed } = data.wind;
-
- this.changeVisibilty([this.iconField, this.descriptionField,
- this.tempField, this.humidityField, this.windField], "visible");
-
- this.cityField.innerText = `Weather in ${name}`;
- this.iconField.src = `https://openweathermap.org/img/wn/${icon}.png`;
- // const photo = await this.queryPhotoReference(data)
- this.descriptionField.innerText = description;
- this.tempField.innerText = ` ${temp} °C / ${this.toFarenheit(temp)} °F`;
- this.humidityField.innerText = `Humidity: ${humidity} %`;
- this.windField.innerText = `Wind speed: ${speed} km/h`;
- document.querySelector(".weather").classList.remove("loading");
- },
- search: function () {
- this.fetchWeather(document.querySelector(".search-bar").value);
- },
-};
-
-document.querySelector(".search button").addEventListener("click", function () {
- weather.search();
-});
-
-document
- .querySelector(".search-bar")
- .addEventListener("keyup", function (event) {
- if (event.key == "Enter") {
- weather.search();
- }
- });
-
+let weather = {
+ cityField: document.querySelector(".city"),
+ iconField: document.querySelector(".icon"),
+ descriptionField: document.querySelector(".description"),
+ tempField: document.querySelector(".temp"),
+ humidityField: document.querySelector(".humidity"),
+ windField: document.querySelector(".wind"),
+ apiKey: "5e1ddb8233f281231d95bf6718bddbb8",
+ googleApiKey: "", // Add your google api key
+ changeVisibilty: function (fields, value) {
+ for (let field of fields) {
+ field.style.visibility = value;
+ }
+ },
+
+
+
+ //get current geolocation weather data
+ currentLoc: function () {
+ navigator.geolocation.getCurrentPosition(position => {
+ let lat = position.coords.latitude;
+ let lon = position.coords.longitude;
+ fetch(
+ "https://api.openweathermap.org/data/2.5/weather?lat=" +
+ lat + "&lon=" + lon +
+ "&units=metric&appid=" +
+ weather.apiKey
+ )
+ .then((response) => {
+ if (!response.ok) {
+ weather.cityField.innerText = `Sorry, the weather in ${lat} ${lon} was not found, try again.`;
+ weather.changeVisibilty([weather.iconField, weather.descriptionField,
+ weather.tempField, weather.humidityField, weather.windField], "hidden");
+ throw new Error("No weather found.");
+ }
+ return response.json();
+ })
+ .then((data) => {
+ this.queryPhotoReference(data)
+ weather.displayWeather(data)
+ });
+ }, error => {
+ weather.fetchWeather("Kolkata")
+ })
+ },
+
+
+
+ toFarenheit: function (temp) {
+ return Number(temp) * 1.8 + 32;
+ },
+
+ fetchWeather: function (city) {
+ fetch(
+ "https://api.openweathermap.org/data/2.5/weather?q=" +
+ city +
+ "&units=metric&appid=" +
+ this.apiKey
+ )
+ .then((response) => {
+ if (!response.ok) {
+ this.cityField.innerText = `Sorry, the weather in ${city} was not found, try again.`;
+ this.changeVisibilty([this.iconField, this.descriptionField,
+ this.tempField, this.humidityField, this.windField], "hidden");
+ throw new Error("No weather found.");
+ }
+ return response.json();
+ })
+ .then((data) => {
+ this.queryPhotoReference(data)
+ this.displayWeather(data)
+ });
+ },
+
+ queryPhotoReference: function (data) {
+ fetch(
+ `https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=${data.name}&key=${weather.googleApiKey}&inputtype=textquery&locationbias=point:${data.coord.lat},${data.coord.lon}&fields=name,photo`
+ )
+ .then((response) => {
+ if (!response.ok) {
+
+ throw new Error("No photo reference found.");
+ }
+ return response.json();
+ })
+ .then((data) => {
+ const photoReference = data?.candidates[0]
+ if (photoReference.photos) {
+ fetch(
+ `https://maps.googleapis.com/maps/api/place/photo?photoreference=${photoReference.photos[0].photo_reference}&key=${weather.googleApiKey}&maxheight=1600`
+ )
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error("No photo found.");
+ }
+ return response
+ })
+ .then((res) => {
+ return document.body.style.backgroundImage = `url(${res.url})`;
+ })
+ } else {
+ return document.body.style.backgroundImage = `url(https://source.unsplash.com/1600x900/?cities)`;
+
+ }
+ })
+ .catch((err) => console.log('err', err))
+
+ },
+
+ displayWeather: async function (data) {
+ const { name } = data;
+ const { icon, description } = data.weather[0];
+ const { temp, humidity } = data.main;
+ const { speed } = data.wind;
+
+ this.changeVisibilty([this.iconField, this.descriptionField,
+ this.tempField, this.humidityField, this.windField], "visible");
+
+ this.cityField.innerText = `Weather in ${name}`;
+ this.iconField.src = `https://openweathermap.org/img/wn/${icon}.png`;
+ // const photo = await this.queryPhotoReference(data)
+ this.descriptionField.innerText = description;
+ this.tempField.innerText = ` ${temp} °C / ${this.toFarenheit(temp)} °F`;
+ this.humidityField.innerText = `Humidity: ${humidity} %`;
+ this.windField.innerText = `Wind speed: ${speed} km/h`;
+ document.querySelector(".weather").classList.remove("loading");
+ },
+ search: function () {
+ this.fetchWeather(document.querySelector(".search-bar").value);
+ },
+};
+
+document.querySelector(".search button").addEventListener("click", function () {
+ weather.search();
+});
+
+document
+ .querySelector(".search-bar")
+ .addEventListener("keyup", function (event) {
+ if (event.key == "Enter") {
+ weather.search();
+ }
+ });
+
weather.currentLoc()
\ No newline at end of file
diff --git a/project_screenshot.PNG b/assets/screenshot/project_screenshot.PNG
similarity index 100%
rename from project_screenshot.PNG
rename to assets/screenshot/project_screenshot.PNG
diff --git a/assets/screenshot/screencapture-127-0-0-1-5500-Weather-JS-index-html-2021-10-05-15_33_43.png b/assets/screenshot/screencapture-127-0-0-1-5500-Weather-JS-index-html-2021-10-05-15_33_43.png
new file mode 100644
index 0000000..1377aec
Binary files /dev/null and b/assets/screenshot/screencapture-127-0-0-1-5500-Weather-JS-index-html-2021-10-05-15_33_43.png differ
diff --git a/index.html b/index.html
index a3b0149..e65b9a9 100644
--- a/index.html
+++ b/index.html
@@ -7,9 +7,9 @@
Weather App
-
-
-
+
+
+