Notifix

package.json

@@ -26,6 +26,7 @@
     "sass": "^1.32.8"
   },
   "dependencies": {
-    "axios": "^0.27.2"
+    "axios": "^0.27.2",
+    "notiflix": "^3.2.5"
   }
 }

src/js/fetch-by-name.js

 import axios from 'axios';
-
+import notiflix from './notiflix';
 let filmToFind;
 
 const refs = {
@@ -16,7 +16,10 @@ function onInput(event) {
 
 async function onBtn(event) {
   event.preventDefault();
+  MovieClear()
+  notiflix.onLoadingleAdd()
   const movies = await fetchSearch(filmToFind);
+  notiflix.onLoadingRemove()
 }
 
 async function fetchSearch(filmToFind) {
@@ -30,3 +33,6 @@ async function fetchSearch(filmToFind) {
   const movies = response.data;
   return movies;
 }
+function MovieClear() {
+  refs.container.innerHTML = '';
+}

src/js/notiflix.js

+import Notiflix from 'notiflix';
+const notiflixParams = {
+  position: 'center-top',
+  timeout: 1500,
+};
+
+class Notification {
+  constructor(notiflixParams) {
+    this.options = notiflixParams;
+  }
+
+  onAddToWatched() {
+    Notiflix.Notify.success('Added to Watched', this.options);
+  }
+
+  onDeleteWatched() {
+    Notiflix.Notify.warning('Deleted from Watched', this.options);
+  }
+
+  onAddToQueue() {
+    Notiflix.Notify.success('Added to Queue', this.options);
+  }
+
+  onDeleteQueue() {
+    Notiflix.Notify.warning('Deleted from Queue', this.options);
+  }
+
+  onLoadingleAdd() {
+    Notiflix.Loading.arrows('Please wait ...', this.options);
+  }
+  onLoadingRemove() {
+    Notiflix.Loading.remove();
+  }
+}
+
+export default new Notification(notiflixParams);