ksugaevskaya · ksugaevskaya · Sep 25, 2024 · Sep 28, 2024 · Sep 28, 2024 · Sep 29, 2024
diff --git a/js30-2.2-image-gallery/assets/close-circle-svgrepo-com.svg b/js30-2.2-image-gallery/assets/close-circle-svgrepo-com.svg
diff --git a/js30-2.2-image-gallery/assets/photo-camera-svgrepo-com.svg b/js30-2.2-image-gallery/assets/photo-camera-svgrepo-com.svg
diff --git a/js30-2.2-image-gallery/assets/rss-logo.svg b/js30-2.2-image-gallery/assets/rss-logo.svg
diff --git a/js30-2.2-image-gallery/assets/search-svgrepo-com.svg b/js30-2.2-image-gallery/assets/search-svgrepo-com.svg
diff --git a/js30-2.2-image-gallery/image-gallery.js b/js30-2.2-image-gallery/image-gallery.js
@@ -0,0 +1,56 @@
+const search = document.getElementById("search");
+const searchImage = document.getElementById("search-image");
+const images = document.getElementById("images");
+const closeButton = document.getElementById("close-button");
+
+const onPageLoad = async () => {
+  const res = await fetch(
+    `https://api.unsplash.com/search/photos?query=cats&per_page=30&orientation=landscape&client_id=GKpeWXKOcZeTtb61qbk3764RQKrD13PX8CcQnzDZO-k`
+  );
+  const data = await res.json();
+  let i = 0;
+  let string = "";
+  while (i < data.results.length) {
+    string = `${string}<img class="image-grid-item" src="${data.results[i].urls.regular}" alt="${data.results[i].description}">`;
+    data.results[i].urls.full;
+    i++;
+  }
+
+  images.innerHTML = string;
+  console.log("Lupa clicked!");
+};
+
+onPageLoad();
+
+const onSearchClicked = async () => {
+  console.log(search.value);
+  const res = await fetch(
+    `https://api.unsplash.com/search/photos?query=${search.value}&per_page=30&orientation=landscape&client_id=GKpeWXKOcZeTtb61qbk3764RQKrD13PX8CcQnzDZO-k`
+  );
+  const data = await res.json();
+  let i = 0;
+  let string = "";
+  while (i < data.results.length) {
+    string = `${string}<img class="image-grid-item" src="${data.results[i].urls.regular}" alt="${data.results[i].description}">`;
+    data.results[i].urls.full;
+    i++;
+  }
+
+  images.innerHTML = string;
+  console.log("Lupa clicked!");
+};
+
+const onEnterClicked = (event) => {
+  if (event.key === "Enter") {
+    onSearchClicked();
+  }
+};
+
+const onCloseButtonClicked = () => {
+  onPageLoad();
+  search.value = "";
+};
+
+searchImage.addEventListener("click", onSearchClicked);
+search.addEventListener("keydown", onEnterClicked);
+closeButton.addEventListener("click", onCloseButtonClicked);
diff --git a/js30-2.2-image-gallery/index.html b/js30-2.2-image-gallery/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>JS image gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+    <script src="./image-gallery.js" defer>  </script>
+    <script src="./score.js"></script>
+</head>
+
+
+<body>
+    <header>
+        <div class="header">
+            <div class="header-container">
+                <img class="header-image" src="./assets/photo-camera-svgrepo-com.svg" alt="camera">
+                <span class="header-text"> Unsplash API</span>
+            </div>
+            <div class="search-container">
+                <input id="search" class="header-search" type="text" autocomplete="off" placeholder="Search..."
+                    autofocus>
+                <svg id="close-button" class="close-button" stroke="#292D32" width="800px" height="800px"
+                    viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
+                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                    <path d="M9.16998 14.83L14.83 9.17004" stroke-width="1.5" stroke-linecap="round"
+                        stroke-linejoin="round" />
+                    <path d="M14.83 14.83L9.16998 9.17004" stroke-width="1.5" stroke-linecap="round"
+                        stroke-linejoin="round" />
+                </svg>
+                <svg id="search-image" class="search-icon" fill="#ffffff" height="800px" width="800px" version="1.1"
+                    id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                    viewBox="0 0 502.173 502.173" xml:space="preserve">
+                    <g>
+                        <g>
+                            <g>
+                                <path d="M494.336,443.646L316.402,265.713c20.399-31.421,30.023-68.955,27.189-106.632
+				C340.507,118.096,322.783,79.5,293.684,50.4C261.167,17.884,217.984,0,172.023,0c-0.222,0-0.445,0.001-0.668,0.001
+				C125.149,0.176,81.837,18.409,49.398,51.342c-66.308,67.316-65.691,176.257,1.375,242.85
+				c29.112,28.907,67.655,46.482,108.528,49.489c37.579,2.762,75.008-6.867,106.343-27.21l177.933,177.932
+				c5.18,5.18,11.984,7.77,18.788,7.77s13.608-2.59,18.789-7.769l13.182-13.182C504.695,470.862,504.695,454.006,494.336,443.646z
+				 M480.193,467.079l-13.182,13.182c-2.563,2.563-6.73,2.561-9.292,0L273.914,296.456c-1.936-1.937-4.497-2.929-7.074-2.929
+				c-2.044,0-4.098,0.624-5.858,1.898c-60.538,43.788-143.018,37.3-196.118-15.425C5.592,221.146,5.046,124.867,63.646,65.377
+				c28.67-29.107,66.949-45.222,107.784-45.376c0.199,0,0.392-0.001,0.591-0.001c40.617,0,78.785,15.807,107.52,44.542
+				c53.108,53.108,59.759,135.751,15.814,196.509c-2.878,3.979-2.441,9.459,1.032,12.932l183.806,183.805
+				C482.755,460.35,482.755,464.517,480.193,467.079z" />
+                                <path d="M259.633,84.449c-48.317-48.316-126.935-48.316-175.253,0c-23.406,23.406-36.296,54.526-36.296,87.627
+				c0,33.102,12.89,64.221,36.296,87.627S138.906,296,172.007,296c33.102,0,64.222-12.891,87.627-36.297
+				C307.951,211.386,307.951,132.767,259.633,84.449z M245.492,245.561C225.863,265.189,199.766,276,172.007,276
+				c-27.758,0-53.856-10.811-73.484-30.44c-19.628-19.628-30.438-45.726-30.438-73.484s10.809-53.855,30.438-73.484
+				c20.262-20.263,46.868-30.39,73.484-30.39c26.61,0,53.227,10.133,73.484,30.39C286.011,139.112,286.011,205.042,245.492,245.561z
+				" />
+                                <path d="M111.017,153.935c1.569-5.296-1.452-10.861-6.747-12.43c-5.294-1.569-10.86,1.451-12.429,6.746
+				c-8.73,29.459-0.668,61.244,21.04,82.952c1.952,1.952,4.512,2.929,7.071,2.929s5.118-0.977,7.071-2.928
+				c3.905-3.906,3.905-10.238,0-14.143C110.506,200.544,104.372,176.355,111.017,153.935z" />
+                                <path d="M141.469,94.214c-10.748,4.211-20.367,10.514-28.588,18.735c-3.905,3.906-3.905,10.238,0,14.143
+				c1.952,1.952,4.512,2.929,7.071,2.929s5.118-0.977,7.07-2.929c6.26-6.26,13.575-11.057,21.741-14.255
+				c5.143-2.015,7.678-7.816,5.664-12.959C152.413,94.735,146.611,92.202,141.469,94.214z" />
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+    </header>
+
+    <main>
+        <div id="images" class="image-grid">
+            <img class="image-grid-item"
+                src="https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixid=M3wxODE4ODF8MHwxfHNlYXJjaHwzfHxjYXR8ZW58MHx8fHwxNzI3MjYwNzU2fDA&ixlib=rb-4.0.3&w=1366&h=768">
+
+            <img class="image-grid-item"
+                src="https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixid=M3wxODE4ODF8MHwxfHNlYXJjaHwzfHxjYXR8ZW58MHx8fHwxNzI3MjYwNzU2fDA&ixlib=rb-4.0.3&w=1366&h=768">
+
+            <img class="image-grid-item"
+                src="https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixid=M3wxODE4ODF8MHwxfHNlYXJjaHwzfHxjYXR8ZW58MHx8fHwxNzI3MjYwNzU2fDA&ixlib=rb-4.0.3&w=1366&h=768">
+
+            <img class="image-grid-item"
+                src="https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixid=M3wxODE4ODF8MHwxfHNlYXJjaHwzfHxjYXR8ZW58MHx8fHwxNzI3MjYwNzU2fDA&ixlib=rb-4.0.3&w=1366&h=768">
+
+            <img class="image-grid-item"
+                src="https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixid=M3wxODE4ODF8MHwxfHNlYXJjaHwzfHxjYXR8ZW58MHx8fHwxNzI3MjYwNzU2fDA&ixlib=rb-4.0.3&w=1366&h=768">
+
+            <img class="image-grid-item"
+                src="https://images.unsplash.com/photo-1500259571355-332da5cb07aa?ixid=M3wxODE4ODF8MHwxfHNlYXJjaHwzfHxjYXR8ZW58MHx8fHwxNzI3MjYwNzU2fDA&ixlib=rb-4.0.3&w=1366&h=768">
+        </div>
+    </main>
+
+    <footer>
+        <div class="footer">
+            <a class="gh-link" href="https://github.com/ksugaevskaya" target="_blank"> Ksenia's Github </a>
+            <span class="footer-text"> 2024 </span>
+            <a class="rs-logo" href="https://rs.school/courses/javascript-preschool-ru" target="_blank"><img
+                    src="./assets/rss-logo.svg"></a>
+        </div>
+    </footer>
+</body>
diff --git a/js30-2.2-image-gallery/score.js b/js30-2.2-image-gallery/score.js
@@ -0,0 +1,20 @@
+console.log(
+  ` Вёрстка +10:
+- на странице есть несколько фото и строка поиска +5
+- в футере приложения есть ссылка на гитхаб автора приложения, год создания приложения, логотип курса со ссылкой на курс +5
+
+- При загрузке приложения на странице отображаются полученные от API изображения +10
+
+- Если в поле поиска ввести слово и отправить поисковый запрос, на странице отобразятся изображения соответствующей тематики, если такие данные предоставляет API +10
+
+- Поиск +30:
+
+-при открытии приложения курсор находится в поле ввода +5
+- есть placeholder +5
+- автозаполнение поля ввода отключено (нет выпадающего списка с предыдущими запросами) +5
+- поисковый запрос можно отправить нажатием клавиши Enter +5
+- после отправки поискового запроса и отображения результатов поиска, поисковый запрос продолжает отображаться в поле ввода +5
+- в поле ввода есть крестик, при клике по которому поисковый запрос из поля ввода удаляется и отображается placeholder +5 
+
+Оценка: 60`
+);
diff --git a/js30-2.2-image-gallery/styles.css b/js30-2.2-image-gallery/styles.css
@@ -0,0 +1,106 @@
+.footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  border-top: 5px solid rgb(248, 245, 238);
+}
+
+.rs-logo {
+  width: 50px;
+}
+
+.footer-text {
+  color: white;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 400;
+}
+
+.gh-link {
+  color: #ffb749;
+  text-decoration: none;
+}
+
+body {
+  background-color: black;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 15px 20px 15px;
+  border-bottom: 5px solid rgb(248, 245, 238);
+}
+
+.header-image {
+  width: 50px;
+  height: 50px;
+}
+
+.header-text {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 24px;
+  font-weight: 400;
+  color: white;
+}
+
+.header-search {
+  width: 100%;
+}
+
+.search-container {
+  display: flex;
+  flex-direction: row;
+  width: 50%;
+  gap: 10px;
+}
+.search-icon {
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.search-icon:hover {
+  fill: #ffb749;
+}
+
+.header-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+}
+
+.image-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 50px;
+  justify-content: center;
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.image-grid-item {
+  width: 380px;
+  height: 214px;
+  object-fit: cover;
+}
+
+.close-button {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 65px;
+  margin-top: 5px;
+  margin-right: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+.close-button:hover {
+  stroke: #e59800;
+}