Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jonathan-Brandt
Jonathan-Brandt authored Oct 30, 2024
1 parent 86a49b3 commit c8230a9
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 35 deletions.
28 changes: 27 additions & 1 deletion blocks/Modal.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
justify-content: center;
}

.modal__opened {
.modal_opened {
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.6s;
Expand Down Expand Up @@ -86,6 +86,31 @@
margin: 0 0 29px 0;
}

.modal__error {
font-size: 12px;
line-height: 14.52px;
color: #ff0000;
opacity: 0;
position: absolute;
top: 148px;
bottom: 13px;
left: 36px;
}

.modal__error_bottom {
top: 205px;
}

.modal__error_visible {
width: 358px;
opacity: 1;
transition: visibility 0s 0.6s, opacity 0.6s;
}

.modal__input_type_error {
border-bottom: 1px solid rgb(255, 0, 0);
}

.modal__input:last-of-type {
margin: 0;
}
Expand All @@ -100,6 +125,7 @@
border-style: none;
overflow: hidden;
margin: 48px 0 0 0;
font-size: 18px;
}

.modal__button:hover {
Expand Down
49 changes: 38 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,51 +42,77 @@ <h1 class="profile__title" id="profile__title">Jacques Cousteau</h1>
<p class="footer__copyright">&copy; Jonathan W Brandt 2024</p>
</footer>
</div>
<!--Edit Modal-->
<!--Profile Modal-->
<div class="modal" id="profile-edit-modal">
<div class="modal__container">
<button class="modal__close" id="profile-modal-close-button"></button>
<p class="modal__header">Edit Profile</p>
<form class="modal__form" id="modal-edit-form">
<input
class="modal__input modal__input_type_name"
id="modal-title"
id="profile-name"
placeholder="Name"
type="text"
name="title"
maxlength="40"
minlength="2"
required
/>
<span class="modal__error" id="profile-name-error"
>Please fill out this field</span
>
<input
class="modal__input"
id="modal-description"
id="profile-description"
placeholder="Description"
type="text"
name="description"
maxlength="400"
minlength="2"
required
/>
<button class="modal__button" id="save-button">Save</button>
<span
class="modal__error modal__error_bottom"
id="profile-description-error"
>Please fill out this field</span
>
<button class="modal__button" id="profile-save-button">Save</button>
</form>
</div>
</div>
<!--Add Modal-->
<!--Card Modal-->
<div class="modal" id="add-card-modal">
<div class="modal__container">
<button class="modal__close" id="card-modal-close-button"></button>
<p class="modal__header">New Place</p>
<form class="modal__form" id="add-card-form">
<input
class="modal__input modal__input_type_title"
id="modal-title"
class="modal__input modal-title modal__input_type_title"
placeholder="Title"
type="text"
name="title"
maxlength="30"
minlength="1"
required
id="place-name"
/>
<span class="modal__error" id="place-name-error"
>Please fill out this field</span
>
<input
class="modal__input modal__input_type_url"
id="modal-description"
class="modal__input modal__input_type_url modal-description"
placeholder="Image URL"
type="text"
type="url"
name="url"
required
id="webaddress-url"
/>
<button class="modal__button" id="save-button">Save</button>
<span
class="modal__error modal__error_bottom"
id="webaddress-url-error"
>Please enter a web address</span
>
<button class="modal__button" id="new-card-save-button">Save</button>
</form>
</div>
</div>
Expand All @@ -113,5 +139,6 @@ <h2 class="card__description-title"></h2>
</li>
</template>
<script src="./scripts/index.js"></script>
<script src="./scripts/validation.js"></script>
</body>
</html>
41 changes: 18 additions & 23 deletions scripts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const initialCards = [
const cardListElement = document.querySelector(".cards__list");
const cardTemplate =
document.querySelector("#card-template").content.firstElementChild;
const modal = document.querySelector(".modal");
const closeButtons = document.querySelectorAll(".modal__close");

/*Profile*/

Expand All @@ -45,8 +45,8 @@ const profileModalCloseButton = document.querySelector(
);
const profileTitle = document.querySelector("#profile__title");
const profileDescription = document.querySelector(".profile__description");
const profileTitleInput = document.querySelector("#modal-title");
const profileDescriptionInput = document.querySelector("#modal-description");
const profileTitleInput = document.querySelector("#profile-name");
const profileDescriptionInput = document.querySelector("#profile-description");
const profileEditForm = profileEditModal.querySelector("#modal-edit-form");

/*Cards*/
Expand All @@ -56,6 +56,7 @@ const addNewCardButton = document.querySelector(".profile__add-button");
const cardModalCloseButton = document.querySelector("#card-modal-close-button");
const cardTitleInput = addCardModal.querySelector(".modal__input_type_title");
const cardUrlInput = addCardModal.querySelector(".modal__input_type_url");
const newCardEditForm = addCardModal.querySelector("#add-card-form");

/*Preview*/

Expand All @@ -70,8 +71,12 @@ const previewModalCaption = previewModal.querySelector(".modal__caption");
/* Functions */
/* -------------------------------------------------------------------------- */

function closePopUp(modal) {
modal.classList.remove("modal__opened");
function closePopUp(popup) {
popup.classList.remove("modal_opened");
}

function openPopup(popup) {
popup.classList.add("modal_opened");
}

function getCardElement(data) {
Expand All @@ -90,7 +95,7 @@ function getCardElement(data) {
});

cardImageElement.addEventListener("click", () => {
previewModal.classList.add("modal__opened");
openPopup(previewModal);
previewModalImage.src = data.link;
previewModalImage.alt = data.name;
previewModalCaption.textContent = data.name;
Expand Down Expand Up @@ -122,6 +127,7 @@ function handleAddCardSubmit(e) {
const name = cardTitleInput.value;
const link = cardUrlInput.value;
renderCard({ name, link }, cardListElement);
e.target.reset({ name, link });
closePopUp(addCardModal);
}

Expand All @@ -141,29 +147,20 @@ function handlePreviewClose(e) {
profileEditButton.addEventListener("click", () => {
profileTitleInput.value = profileTitle.textContent;
profileDescriptionInput.value = profileDescription.textContent;
profileEditModal.classList.add("modal__opened");
});

profileModalCloseButton.addEventListener("click", () => {
closePopUp(profileEditModal);
openPopup(profileEditModal);
});

profileEditForm.addEventListener("submit", handleProfileEditSubmit);

addCardModal.addEventListener("submit", handleAddCardSubmit);

previewModal.addEventListener("click", handlePreviewClose);
newCardEditForm.addEventListener("submit", handleAddCardSubmit);

addNewCardButton.addEventListener("click", () => {
addCardModal.classList.add("modal__opened");
openPopup(addCardModal);
});

cardModalCloseButton.addEventListener("click", () => {
closePopUp(addCardModal);
});

previewModalCloseButton.addEventListener("click", () => {
closePopUp(previewModal);
closeButtons.forEach((button) => {
const popup = button.closest(".modal");
button.addEventListener("click", () => closePopUp(popup));
});

/* -------------------------------------------------------------------------- */
Expand All @@ -174,5 +171,3 @@ initialCards.forEach((cardData) => {
const cardElement = getCardElement(cardData);
cardListElement.append(cardElement);
});

// To whom ever reviews this, please let me know how I can improve my Java script to be more concise :)
53 changes: 53 additions & 0 deletions scripts/validation.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
function showInputError(formEl, inputEl, { inputErrorClass, errorClass }) {
const errorMessageEl = formEl.querySelector("#" + inputEl.id + "-error");
inputEl.classList.add(inputErrorClass);
errorMessageEl.textContent = inputEl.validationMessage;
errorMessageEl.classList.add(errorClass);
}

function hideInputError(formEl, inputEl, { inputErrorClass, errorClass }) {
const errorMessageEl = formEl.querySelector("#" + inputEl.id + "-error");
inputEl.classList.add(inputErrorClass);
errorMessageEl.textContent = "";
errorMessageEl.classList.remove(errorClass);
}

function checkInputValidity(formEl, inputEl, options) {
if (!inputEl.validity.valid) {
showInputError(formEl, inputEl, options);
} else {
hideInputError(formEl, inputEl, options);
}
}

function setEventListeners(formEl, options) {
const { inputSelector } = options;
const inputEls = [...formEl.querySelectorAll(inputSelector)];
inputEls.forEach((inputEl) => {
inputEl.addEventListener("input", (e) => {
checkInputValidity(formEl, inputEl, options);
});
});
}

function enableValidation(options) {
const formEls = [...document.querySelectorAll(options.formSelector)];
formEls.forEach((formEl) => {
formEl.addEventListener("submit", (e) => {
e.preventDefault();
});

setEventListeners(formEl, options);
});
}

const config = {
formSelector: ".modal__form",
inputSelector: ".modal__input",
submitButtonSelector: ".modal__button",
inactiveButtonClass: "modal__button_disabled",
inputErrorClass: "modal__input_type_error",
errorClass: "modal__error_visible",
};

enableValidation(config);

0 comments on commit c8230a9

Please sign in to comment.