✔️ Сборка #9

htmlacademy-univer-javascript-1 · Jan 6, 2025 · 08dfad5 · 08dfad5
1 parent 6fbc513
commit 08dfad5
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 40 deletions.
diff --git a/9/js/data-error.js b/9/js/data-error.js
@@ -1,15 +1,15 @@
 const ALERT_SHOW_TIME = 5000;
 const showAlert = (message) => {
-  const alertContainer = document.createElement('div');
-  alertContainer.style.zIndex = '100';
-  alertContainer.style.position = 'absolute';
-  alertContainer.style.left = '0';
-  alertContainer.style.top = '0';
-  alertContainer.style.right = '0';
-  alertContainer.style.padding = '10px 3px';
-  alertContainer.style.fontSize = '30px';
-  alertContainer.style.textAlign = 'center';
-  alertContainer.style.backgroundColor = 'red';
+  const alertContainer = document.createElement("div");
+  alertContainer.style.zIndex = "100";
+  alertContainer.style.position = "absolute";
+  alertContainer.style.left = "0";
+  alertContainer.style.top = "0";
+  alertContainer.style.right = "0";
+  alertContainer.style.padding = "10px 3px";
+  alertContainer.style.fontSize = "30px";
+  alertContainer.style.textAlign = "center";
+  alertContainer.style.backgroundColor = "red";
 
   alertContainer.textContent = message;
 

diff --git a/9/js/form-filling.js b/9/js/form-filling.js
@@ -1,6 +1,5 @@
 import {isEscapeKey} from"./util.js";
 import {sendData} from "./interact-with-data.js";
-import {showAlert} from "./data-error.js";
 const imgInput = document.querySelector(".img-upload__input");
 const body = document.body;
 const imgOverlay = document.querySelector(".img-upload__overlay");
@@ -13,24 +12,33 @@ const pristine = new Pristine(postForm, {
 });
 const regexp = /^#[^\s#]+$/i;
 
-imgInput.addEventListener("change", (evt) => {
-  evt.preventDefault();
-  imgOverlay.classList.remove("hidden");
-  body.classList.add("modal-open");
-  pristine.validate();
-  closeFormClick();
-  // eslint-disable-next-line no-shadow
+const sendDataFromForm = () => {
   postForm.addEventListener("submit",(evt) => {
     evt.preventDefault();
     formButton.disabled = true;
     if(pristine.validate()){
-      const formData = new FormData(evt.target);
-      sendData(showAlert,formData,openSuccess)();
+      sendData(
+        openError,
+        new FormData(evt.target),
+        () => {
+          openSuccess();
+          postForm.reset();
+        })();
     }else {
       openError();
     }
     formButton.disabled = false;
   });
+};
+
+
+imgInput.addEventListener("change", (evt) => {
+  evt.preventDefault();
+  imgOverlay.classList.remove("hidden");
+  body.classList.add("modal-open");
+  pristine.validate();
+  closeFormClick();
+  formButton.disabled = false;
 });
 
 function validateHashtags (value) {
@@ -94,6 +102,7 @@ function openSuccess (){
   document.body.append(successElement);
   hastags.value = "";
   postText.value = "";
+  imgInput.value = "";
 
   successButton.addEventListener("click", closeSuccess);
   document.addEventListener("keydown", closeSuccessEscape);
@@ -162,17 +171,20 @@ function closeForm(){
   imgOverlay.classList.add("hidden");
   body.classList.remove("modal-open");
   postForm.reset();
-  document.removeEventListener(closeFormClick);
+  closeImg.removeEventListener("click", closeForm);
+  document.removeEventListener("keydown", closeFormEscape);
 }
 
 function closeFormClick (){
   closeImg.addEventListener("click",closeForm);
-  document.addEventListener("keydown", (evt) => {
-    if (isEscapeKey(evt)) {
-      evt.preventDefault();
-      closeForm();
-    }
-  });
+  document.addEventListener("keydown", closeFormEscape);
 }
 
+function closeFormEscape(evt) {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    closeForm();
+  }
+}
 
+export {sendDataFromForm};
diff --git a/9/js/interact-with-data.js b/9/js/interact-with-data.js
@@ -1,3 +1,5 @@
+import {renderPosts} from"./posts-rendering.js";
+import {showAlert} from "./data-error.js";
 const getData = (onSuccess, onError) => () =>
   fetch(
     "https://29.javascript.htmlacademy.pro/kekstagram/data",
@@ -33,9 +35,9 @@ const sendData = (onError,body,onSuccess) => () =>
       if (!response.ok) {
         throw new Error("Не удалось отправить форму. Попробуйте ещё раз");
       }
-      onSuccess();
+      return onSuccess();
     })
-    .catch(() => {
-      onError("Не удалось отправить форму. Попробуйте ещё раз");
-    });
-export{getData,sendData};
+    .catch(onError);
+
+const getPostsFromServer = getData(renderPosts, showAlert);
+export{getPostsFromServer,sendData};
diff --git a/9/js/main.js b/9/js/main.js
@@ -1,10 +1,6 @@
-import {renderPosts} from"./posts-rendering.js";
-import {showAlert} from "./data-error.js";
-import "./form-filling.js";
 import {loadPhoto} from "./photo-load.js";
-import {getData} from "./interact-with-data.js";
+import {getPostsFromServer} from "./interact-with-data.js";
+import {sendDataFromForm} from "./form-filling.js";
 loadPhoto();
-getData(renderPosts, showAlert)();
-
-//const sendData = postData(console.log, console.error);
-//sendData();
+getPostsFromServer();
+sendDataFromForm();