Release Lesson 9, task 1

gwynolanga · Aug 24, 2022 · 44e92b9 · 44e92b9
1 parent 7241a29
commit 44e92b9
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -10,5 +10,8 @@
   <h2>Урок 7</h2>
   <div><a href="lessons/lesson-7/tasks/task-1/index.html">Задание 1</a></div>
   <div><a href="lessons/lesson-7/tasks/task-2/index.html">Задание 2</a></div>
+
+  <h2>Урок 9</h2>
+  <div><a href="lessons/lesson-9/tasks/task-1/index.html">Задание 1</a></div>
 </body>
 </html>
diff --git a/lessons/lesson-9/tasks/task-1/index.html b/lessons/lesson-9/tasks/task-1/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta content="dark light" name="color-scheme">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="main.css">
+  <title>Задание 1</title>
+</head>
+<body>
+  <h2>Урок 9 / Задание 1</h2>
+  <h4>Сделайте интерфейс для поиска и отображения gif с помощью <a href="https://developers.giphy.com/docs/api/">giphy api</a></h4>
+  <p>
+    <b>Важно:</b> Для работы с API понадобится ключ для авторизации, инструкция по его получению находится
+    <a href="https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key">тут</a>
+  </p>
+  <p>Функциональные требования:</p>
+  <ol>
+    <li>Доступно поле ввода в которое можно вводить поисковый запрос</li>
+    <li>Поиск осуществляется по мере набора текста в поле</li>
+    <li>Запрос на бэкенд отправляется не чаще, чем раз в 500 мс</li>
+    <li>Верстка может быть любой</li>
+  </ol>
+  <p>Технические требования:</p>
+  <ol>
+    <li>Функция для поиска переиспользуемая, ее должно быть легко использовать в другом месте</li>
+    <li>Можно использовать fetch или XHR</li>
+    <li>Решение должно использовать промисы или async/await</li>
+    <li>
+      Реализуйте простой кэш на стороне клиента. Он будет проверять есть ли у нас результат для введенного запроса
+      и возвращать его из кэша, время жизни для записей ограничивать не нужно
+    </li>
+  </ol>
+  <h4>Результат задания</h4>
+  <div class="search-block">
+    <label for="search">Поиск gif картинок:</label>
+    <input name="search" type="text" id="search" autofocus>
+  </div>
+  <div class="results"></div>
+  <h5><a href="../../../../index.html">На главную</a></h5>
+</body>
+<script src="main.js"></script>
+</html>
diff --git a/lessons/lesson-9/tasks/task-1/main.css b/lessons/lesson-9/tasks/task-1/main.css
@@ -0,0 +1,3 @@
+.search-block {
+  margin: 1em auto 1em auto
+}
diff --git a/lessons/lesson-9/tasks/task-1/main.js b/lessons/lesson-9/tasks/task-1/main.js
@@ -0,0 +1,40 @@
+let queryTimeoutID = undefined
+let queryCache = []
+
+function giphyQuery(query) {
+	let apiKey = 'DFBb9yBSLVVoSGcwHfvilQhRqFIiNKbv'
+	let giphyUrl = `https://api.giphy.com/v1/gifs/search?q=${query}&api_key=${apiKey}`
+	let cacheItem = queryCache.find((item) => item.query === query)
+
+	if (cacheItem) {
+		return Promise.resolve(cacheItem.results)
+	} else {
+		return fetch(giphyUrl)
+			.then((response) => response.json())
+			.then((json) => json.data)
+			.then((results) => {
+				queryCache.push({ query: query, results: results })
+				return results
+			})
+	}
+}
+
+function updatePage(tag, results) {
+	tag.textContent = ''
+	results.forEach((gif) => {
+		let item = document.createElement('img')
+		item.setAttribute('src', gif.images.fixed_height_small.url)
+		tag.append(item)
+	})
+
+	return results
+}
+
+document.querySelector('input#search').addEventListener('input', (event) => {
+	clearTimeout(queryTimeoutID)
+
+	let gifResults = document.querySelector('.results')
+	queryTimeoutID = setTimeout((query) => {
+		giphyQuery(query).then((results) => updatePage(gifResults, results))
+	}, 500, event.target.value)
+})