Add files via upload

blocks/Modal.css

@@ -133,6 +133,15 @@
   transition: 0.3s;
 }
 
+.modal__button_disabled {
+  color: black;
+  background-color: white;
+  opacity: 0.2;
+  border-radius: 1px;
+  border-style: solid;
+  border-color: black;
+}
+
 @media screen and (max-width: 540px) {
   .modal {
   }

index.html

@@ -121,9 +121,9 @@ <h1 class="profile__title" id="profile__title">Jacques Cousteau</h1>
       <div class="modal__content modal__content_type_preview">
         <button
           class="modal__close modal__close_button_preview"
-          id="card-modal-close-button"
+          id="preview-modal-close-button"
         ></button>
-        <img class="modal__image" src="" alt="" />
+        <img class="modal__image" src="#" alt="#" />
         <p class="modal__caption"></p>
       </div>
     </div>
@@ -138,7 +138,6 @@ <h2 class="card__description-title"></h2>
         </div>
       </li>
     </template>
-    <script src="./scripts/index.js"></script>
-    <script src="./scripts/validation.js"></script>
+    <script src="./scripts/index.js" type="module"></script>
   </body>
 </html>

scripts/card.js

@@ -0,0 +1,44 @@
+export default class Card {
+  constructor({ name, link }, cardSelector) {
+    this._name = name;
+    this._link = link;
+    this._cardSelector = cardSelector;
+  }
+
+  _setEventListeners() {
+    this._cardElement
+      .querySelector(".card__like-button")
+      .addEventListener("click", () => {
+        this._handleLikeIcon();
+      });
+
+    this._cardElement
+      .querySelector(".card__delete-button")
+      .addEventListener("click", () => {
+        this._handleDeleteCard;
+      });
+  }
+
+  _handleDeleteCard() {
+    this._cardElement.remove();
+    this._cardElement = null;
+  }
+
+  _handleLikeIcon() {
+    this._cardElement
+      .querySelector(".card__like-button")
+      .classList.toggle("card__like-button_active");
+  }
+
+  getView() {
+    this._cardElement = document
+      .querySelector(this._cardSelector)
+      .content.querySelector(".card")
+      .cloneNode(true);
+
+    //get card
+    //set listeners
+    this._setEventListeners();
+    //return card
+  }
+}

scripts/formvalidator.js

@@ -0,0 +1,85 @@
+export default class FormValidator {
+  constructor(config, formElement) {
+    this._inputSelector = config.inputSelector;
+    this._submitButtonSelector = config.submitButtonSelector;
+    this._inactiveButtonClass = config.inactiveButtonClass;
+    this._inputErrorClass = config.inputErrorClass;
+    this._errorClass = config.errorClass;
+
+    this._formElement = formElement;
+  }
+
+  _showInputError(inputEl) {
+    const errorMessageEl = this._formElement.querySelector(
+      "#" + inputEl.id + "-error"
+    );
+    inputEl.classList.add(this._inputErrorClass);
+    errorMessageEl.textContent = inputEl.validationMessage;
+    errorMessageEl.classList.add(this._errorClass);
+  }
+
+  _hideInputError(inputEl) {
+    const errorMessageEl = this._formElement.querySelector(
+      "#" + inputEl.id + "-error"
+    );
+    inputEl.classList.remove(this._inputErrorClass);
+    errorMessageEl.textContent = "";
+    errorMessageEl.classList.remove(this._errorClass);
+  }
+
+  _checkInputValidity(inputElement) {
+    if (!inputElement.validity.valid) {
+      this._showInputError(inputElement);
+    } else {
+      this._hideInputError(inputElement);
+    }
+  }
+
+  _toggleButtonState(inputEls, submitButton) {
+    let foundInvalid = false;
+
+    inputEls.forEach((inputEl) => {
+      if (!inputEl.validity.valid) {
+        foundInvalid = true;
+      }
+    });
+
+    if (foundInvalid) {
+      submitButton.classList.add(this._inactiveButtonClass);
+      submitButton.disabled = true;
+    } else {
+      submitButton.classList.remove(this._inactiveButtonClass);
+      submitButton.disabled = false;
+    }
+  }
+
+  _setEventListeners() {
+    const inputEls = this._formElement.querySelectorAll(this._inputSelector);
+    const submitButton = this._formElement.querySelector(
+      this._submitButtonSelector
+    );
+    this._toggleButtonState(inputEls, submitButton);
+    inputEls.forEach((inputEl) => {
+      inputEl.addEventListener("input", (e) => {
+        this._checkInputValidity(inputEl);
+        this._toggleButtonState(inputEls, submitButton);
+      });
+    });
+  }
+
+  enableValidation() {
+    this._formElement.addEventListener("submit", (evt) => {
+      evt.preventDefault();
+    });
+
+    this._setEventListeners();
+  }
+}
+
+const formValidationconfig = {
+  inputSelector: ".modal__input",
+  submitButtonSelector: ".modal__button",
+  inactiveButtonClass: "modal__button_disabled",
+  inputErrorClass: "modal__input_type_error",
+  errorClass: "modal__error_visible",
+};

scripts/index.js

@@ -1,3 +1,15 @@
+import Card from "./card.js";
+import FormValidator from "./formvalidator.js";
+
+const config = {
+  formSelector: ".modal__form",
+  inputSelector: ".modal__input",
+  submitButtonSelector: ".modal__button",
+  inactiveButtonClass: "modal__button_disabled",
+  inputErrorClass: "modal__input_type_error",
+  errorClass: "modal__error_visible",
+};
+
 const initialCards = [
   {
     name: "Yosemite Valley",
@@ -25,6 +37,14 @@ const initialCards = [
   },
 ];
 
+const cardData = {
+  name: "Yosemite Valley",
+  link: "https://practicum-content.s3.us-west-1.amazonaws.com/software-engineer/around-project/yosemite.jpg",
+};
+
+const card = new Card(cardData, "#card-template");
+card.getView();
+
 /* -------------------------------------------------------------------------- */
 /*                                  Elements                                  */
 /* -------------------------------------------------------------------------- */
@@ -62,21 +82,32 @@ const newCardEditForm = addCardModal.querySelector("#add-card-form");
 
 const previewModal = document.querySelector("#preview-modal");
 const previewModalCloseButton = document.querySelector(
-  "#card-modal-close-button"
+  "#preview-modal-close-button"
 );
 const previewModalImage = previewModal.querySelector(".modal__image");
 const previewModalCaption = previewModal.querySelector(".modal__caption");
 
+/*Form Validators*/
+const newCardFormValidator = new FormValidator(config, newCardEditForm);
+newCardFormValidator.enableValidation();
+
+const profileFormValidator = new FormValidator(config, profileEditForm);
+profileFormValidator.enableValidation();
+
 /* -------------------------------------------------------------------------- */
 /*                                  Functions                                 */
 /* -------------------------------------------------------------------------- */
 
 function closePopUp(popup) {
   popup.classList.remove("modal_opened");
+  popup.removeEventListener("mousedown", handleCloseOverlay);
+  document.removeEventListener("keydown", handleCloseEsc);
 }
 
 function openPopup(popup) {
   popup.classList.add("modal_opened");
+  popup.addEventListener("mousedown", handleCloseOverlay);
+  document.addEventListener("keydown", handleCloseEsc);
 }
 
 function getCardElement(data) {
@@ -127,7 +158,7 @@ function handleAddCardSubmit(e) {
   const name = cardTitleInput.value;
   const link = cardUrlInput.value;
   renderCard({ name, link }, cardListElement);
-  e.target.reset({ name, link });
+  e.target.reset();
   closePopUp(addCardModal);
 }
 
@@ -140,6 +171,19 @@ function handlePreviewClose(e) {
   closePopUp(previewModal);
 }
 
+function handleCloseOverlay(e) {
+  if (e.target.classList.contains("modal_opened")) {
+    closePopUp(e.target);
+  }
+}
+
+function handleCloseEsc(e) {
+  if (e.key === "Escape") {
+    const modal = document.querySelector(".modal_opened");
+    closePopUp(modal);
+  }
+}
+
 /* -------------------------------------------------------------------------- */
 /*                                Event Lisenters                               */
 /* -------------------------------------------------------------------------- */

scripts/validation.js

@@ -7,7 +7,7 @@ function showInputError(formEl, inputEl, { inputErrorClass, errorClass }) {
 
 function hideInputError(formEl, inputEl, { inputErrorClass, errorClass }) {
   const errorMessageEl = formEl.querySelector("#" + inputEl.id + "-error");
-  inputEl.classList.add(inputErrorClass);
+  inputEl.classList.remove(inputErrorClass);
   errorMessageEl.textContent = "";
   errorMessageEl.classList.remove(errorClass);
 }
@@ -20,12 +20,33 @@ function checkInputValidity(formEl, inputEl, options) {
   }
 }
 
+function toggleButtonState(inputEls, submitButton, options) {
+  let foundInvalid = false;
+  let { inactiveButtonClass } = options;
+  inputEls.forEach((inputEl) => {
+    if (!inputEl.validity.valid) {
+      foundInvalid = true;
+    }
+  });
+
+  if (foundInvalid) {
+    submitButton.classList.add(inactiveButtonClass);
+    submitButton.disabled = true;
+  } else {
+    submitButton.classList.remove(inactiveButtonClass);
+    submitButton.disabled = false;
+  }
+}
+
 function setEventListeners(formEl, options) {
   const { inputSelector } = options;
   const inputEls = [...formEl.querySelectorAll(inputSelector)];
+  const submitButton = formEl.querySelector(config.submitButtonSelector);
+  toggleButtonState(inputEls, submitButton, options);
   inputEls.forEach((inputEl) => {
     inputEl.addEventListener("input", (e) => {
       checkInputValidity(formEl, inputEl, options);
+      toggleButtonState(inputEls, submitButton, options);
     });
   });
 }