diff --git a/assets/globals.css b/assets/globals.css
index c9742ea..778c77e 100644
--- a/assets/globals.css
+++ b/assets/globals.css
@@ -43,4 +43,4 @@ body {
a {
color: inherit;
text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/assets/index.js b/assets/index.js
new file mode 100644
index 0000000..d7dd795
--- /dev/null
+++ b/assets/index.js
@@ -0,0 +1,120 @@
+const weatherAPIKey = "4afe87cd7eddc53b1473c2bc0ddb2e37";
+const unsplashAPIKey =
+ "17de354439973eb34b4aae66cb3c27ceea000efc05a8c6c94da17edac9cd3a7b";
+const form = document.querySelector("#search");
+const mainImage = document.querySelector("#photo");
+const thumbnails = document.querySelector("#thumbs");
+const input = form.querySelector("#search-tf");
+const conditions = document.querySelector("#conditions");
+const creditUser = document.querySelector("#credit-user");
+let imagesCollection = {};
+
+function createRequest(service, request) {
+ return service === "weather"
+ ? `http://api.openweathermap.org/data/2.5/weather?q=${request}&APPID=${weatherAPIKey}`
+ : `https://api.unsplash.com/search/photos?query=${request}&client_id=${unsplashAPIKey}`;
+}
+
+// api.openweathermap.org/data/2.5/weather?q=$london&APPID=4afe87cd7eddc53b1473c2bc0ddb2e37
+function displayImage(imageData, size, numToShow) {
+ const imageArr = imageData.results;
+ let html = "";
+ if (numToShow) {
+ for (let i = 0; i < numToShow; i += 1) {
+ html += `
+ 
+ `;
+
+ setBgColor(imageArr[i].color);
+ }
+ } else {
+ let markup = imageArr
+ .map((item, index) => {
+ return `
+
+
+ 
+
+
+ `;
+ })
+ .join("");
+ html = ``;
+ }
+ return html;
+}
+
+function setBgColor(color) {
+ document.querySelector('#weather__data').style.backgroundColor = color;
+}
+
+function submitForm(e) {
+ e.preventDefault();
+ fetch(createRequest("weather", input.value))
+ .then(function(weatherResponse) {
+ return weatherResponse.json();
+ })
+ .then(function(weatherData) {
+ conditions.textContent = weatherData.weather[0].description;
+ document.querySelector('#weather__data-heading').innerHTML = `${weatherData.name}
`;
+ document.querySelector(
+ "#weather__data-temp"
+ ).innerHTML = `Temperature: ${(
+ weatherData.main.temp - 273.15
+ ).toFixed(1)} Celsius`;
+ document.querySelector(
+ "#weather__data-wind-direction"
+ ).innerHTML = `Wind direction: ${
+ weatherData.wind.deg
+ } deg`;
+ document.querySelector(
+ "#weather__data-wind-speed"
+ ).innerHTML = `Wind speed: ${
+ weatherData.wind.speed
+ } mph`;
+ document.querySelector(
+ "#weather__data-pressure"
+ ).innerHTML = `Pressure: ${
+ weatherData.main.pressure
+ } bar`;
+ document.querySelector(
+ "#weather__data-humidity"
+ ).innerHTML = `Humidity: ${weatherData.main.humidity}%`;
+ return fetch(createRequest("unsplash", conditions.innerHTML + " " + weatherData.name));
+ })
+ .then(function(imageResponse) {
+ return imageResponse.json();
+ })
+ .then(function(imageData) {
+ imagesCollection = imageData;
+ mainImage.innerHTML = displayImage(imageData, "full", 1);
+ creditUser.textContent = imageData.results[0].user.name;
+ thumbnails.innerHTML = displayImage(imageData, "thumb");
+ })
+ .catch(function(error) {
+ console.log(error);
+ });
+}
+
+function thumbToMain(e) {
+ e.preventDefault();
+ if (e.target.className === "thumbs__image") {
+ const fullImg = mainImage.querySelector("img");
+ imagesCollection.results.forEach(function(image) {
+ if (image.id === e.target.parentNode.id) {
+ creditUser.textContent = image.user.name;
+ creditUser.setAttribute("href", image.user.links.html);
+ creditUser.setAttribute("target", "_blank");
+ setBgColor(image.color);
+ }
+ });
+ return (fullImg.src = e.target.parentNode.getAttribute("href"));
+ }
+}
+
+form.addEventListener("submit", submitForm);
+thumbnails.addEventListener("click", thumbToMain);
diff --git a/assets/styles.css b/assets/styles.css
index a2bc26b..35d417c 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -38,7 +38,7 @@
overflow: hidden;
position: relative;
- margin: 20px 0;
+ margin: 20px 0 0;
}
.photo::before {
@@ -78,9 +78,9 @@
/* Thumbs
------------------------------------------------------------------------------*/
-.thumbs {
+.thumbs ul {
display: flex;
-
+ list-style-type: none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
@@ -91,9 +91,17 @@
background: rgba(0, 0, 0, 0.25);
}
+.thumbs ul li {
+ overflow: hidden;
+}
+
+.thumbs ul li:hover {
+ cursor: pointer;
+}
+
.thumbs__link {
flex: 0 0 auto;
-
+ display: block;
animation: 0.25s forwards fade-in;
width: var(--thumb-w);
@@ -103,6 +111,11 @@
background: rgba(0, 0, 0, 0.5);
}
+.thumbs__link img {
+ width: 100%;
+ max-width: 100%;
+}
+
.thumbs__link.active,
.thumbs__link:hover,
.thumbs__link:focus {
@@ -210,6 +223,25 @@
color: #fff;
}
+/* Weather data */
+.weather__data {
+ width: 240px;
+ background-color: #f1f1f1;
+ padding: 20px;
+ position: absolute;
+ right: 20px;
+ top: 54px;
+ z-index: 999;
+}
+.location-name {
+ text-align: center;
+ font-size: 2em;
+ margin-top: 1px;
+ padding-top: 0px;
+}
+.weather__data-heading h1 {
+ margin: 0;
+}
/*----------------------------------------------------------------------------*/
/* Mediaquery overrides */
/*----------------------------------------------------------------------------*/
@@ -218,7 +250,7 @@
font-weight: 100;
}
- .thumbs {
+ .thumbs ul {
justify-content: center;
}
diff --git a/index.html b/index.html
index 664d55a..78b3ab9 100644
--- a/index.html
+++ b/index.html
@@ -21,8 +21,18 @@
-
+
+
+
+