MarinkaMartynova · MarinkaMartynova · Dec 28, 2023 · Dec 27, 2023
diff --git a/Homework_4/dog.js b/Homework_4/dog.js
@@ -0,0 +1,31 @@
+"use strict";
+
+/* Необязательная задача
+
+Необходимо реализовать отрисовку 10 картинок собак из API https://dog.ceo/dog-api/ с интервалом в 3 секунды.
+*/
+
+// Получение изображений собак с API и отображение их на странице
+const dogImages = [];
+
+async function fetchDogImages() {
+  for (let i = 0; i < 10; i++) {
+    const response = await fetch('https://dog.ceo/api/breeds/image/random');
+    const data = await response.json();
+    dogImages.push(data.message);
+  }
+  displayDogImages();
+  console.log(dogImages); // Отображение списка изображений собак в консоли
+}
+
+let currentImageIndex = 0;
+
+function displayDogImages() {
+  const slider = document.getElementById('dogImage');
+  slider.src = dogImages[currentImageIndex];
+  currentImageIndex = (currentImageIndex + 1) % 10;
+  setTimeout(displayDogImages, 3000);
+}
+
+fetchDogImages();
+
diff --git a/Homework_4/index.html b/Homework_4/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>User List</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body >
+
+    <h1>User List</h1>
+    <ul id="userList"></ul>
+
+    <h1>Dog Image</h1>
+    <img class="slider" id="dogImage" alt="Dog Image">
+
+    <script src="script.js" type="module"></script>
+    <script src="dog.js" type="module"></script>   
+</body>
+</html>
diff --git a/Homework_4/script.js b/Homework_4/script.js
@@ -0,0 +1,72 @@
+"use strict";
+
+/* Задание 1 
+
+Необходимо получить список всех пользователей с помощью бесплатного API 
+(https://jsonplaceholder.typicode.com/users) 
+и отобразить их на странице. 
+Пользователь должен иметь возможность удалить любого пользователя из списка.
+*/
+
+const url = 'https://jsonplaceholder.typicode.com/users';
+
+async function getUsersFromAPI() {
+    try {
+        const response = await fetch(url);
+        const data = await response.json();      
+        // Сохранение данных в локальную базу данных
+        localStorage.setItem("users", JSON.stringify(data));
+        // Отображение пользователей
+        displayUsers(data);
+
+    } catch (error) {
+        console.log("Произошла ошибка при получении   данных:", error);
+    }
+}
+
+// Функция для отображения пользователей на странице
+function displayUsers(users) {
+    const userList = document.getElementById('userList');
+    userList.innerHTML = '';
+
+    users.forEach(user => {
+        const userItem = document.createElement("li");
+        userItem.textContent = `${user.id} - ${user.name}`;
+
+        const deleteUserButton = document.createElement   ("button");
+        deleteUserButton.textContent = "Удалить";
+        deleteUserButton.addEventListener("click", () => {
+        deleteUser(user.id);
+        });
+
+        userItem.appendChild(deleteUserButton);
+        userList.appendChild(userItem);
+    });
+}
+
+// Функция для удаления пользователя из локальной базы данных
+function deleteUserFromLocalDB(userId) {
+    const users = JSON.parse(localStorage.getItem("users"));
+    const updatedUsers = users.filter(user => user.id !== userId);
+    localStorage.setItem("users", JSON.stringify(updatedUsers));
+  }
+
+
+// Функция для удаления пользователя
+function deleteUser(userId) {
+    deleteUserFromLocalDB(userId);  
+    // Обновление списка пользователей на странице
+    const userItem = document.querySelector(`li[data-id="${userId}"]`);
+    userItem.remove();  
+    // Сохранение обновленной локальной базы данных
+    const updatedUsers = JSON.parse(localStorage.getItem("users"));
+    localStorage.setItem("users", JSON.stringify (updatedUsers));
+}
+
+getUsersFromAPI();
+
+// Получение данных из локального хранилища
+const localUsers = JSON.parse(localStorage.getItem("users"));
+console.log(localUsers);
+
+
diff --git a/Homework_4/style.css b/Homework_4/style.css
@@ -0,0 +1,33 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+  padding: 5px;
+}
+
+ul {
+  list-style: none;
+}
+
+.slider {
+  max-width: 500px;
+  overflow: hidden;
+  position: relative;
+}
+
+.slider img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.slider img.active {
+  opacity: 1;
+}/*# sourceMappingURL=style.css.map */
diff --git a/Homework_4/style.css.map b/Homework_4/style.css.map
diff --git a/Homework_4/style.scss b/Homework_4/style.scss
@@ -0,0 +1,32 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  text-decoration: none;
+  padding: 5px;
+}
+
+ul {
+  list-style: none;
+}
+
+.slider {
+  max-width: 500px;
+  overflow: hidden;
+  position: relative;
+}
+
+.slider img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.slider img.active {
+  opacity: 1;
+}