diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..7d4b276 --- /dev/null +++ b/css/style.css @@ -0,0 +1,255 @@ +.container.p-3 { + border-radius: 10px; + border-color: #4F5665; +} + +.logo.col-md-1 { + min-width: 100px; + max-height: 38px; + margin-top: 5px; +} + +.tabs { + display: flex; + justify-content: center; +} + +.my_dogs { + text-decoration: none; + color: #4F5665; + min-width: 100px; + max-height: 24px; + margin-top: 0px; +} + +.create_dogs { + text-decoration: none; + color: #4F5665; + min-width: 100px; + max-height: 24px; + margin-top: 0px; +} + +.form-control { + display: flex; + justify-content: right; + max-width: 450px; + min-width: 100px; + max-height: 24px; +} + +h3.mb-3 { + text-align: center; +} + +.horizontal_block { + border: none; + background-color: #4F5665; + color: #4F5665; + height: 2px; +} + +form#add_form.bg-light { + border-right: 2px solid #4F5665; + height: 100%; +} + +#search_label.form-label { + text-align: left; + margin-left: 15px; + max-width: 150px; +} + +.switch { + margin-left: 25px; + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +.switch input { + display: none; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + transition: .4s; +} + +.slider:before { + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + +#count_label.form-label { + text-align: left; + margin-left: 15px; +} + +#count_button.btn.btn-primary { + margin-left: 65px; + width: 150px; +} + +.count_result_label { + margin-left: 15px; +} + +.first_dog_item { + min-height: 80px; + min-width: 135px; + max-height: 130px; + max-width: 185px; +} + +.dog_title { + margin-left: 10px; +} + +.dog_description { + margin-left: 10px; + font-size: 12px; +} + +.edit-remove-buttons { + display: flex; + justify-content: space-between; +} + +.edit-button { + color: #FFFFFF; + background-color: #2196F3; + border-color: #2196F3; + border-radius: 10px; + width: 75px; + margin-left: 10px; +} + +.remove-button { + color: #FFFFFF; + background-color: #F53855; + border-color: #F53855; + border-radius: 10px; + width: 85px; +} + +.first_dog { + border: 2px solid #4F5665; + border-radius: 10px; + background: #FFFFFF; + width: 195px; + height: 280px; + list-style-type: none; +} + +.item-card { + max-width: 420px; +} + +.item-container__image { + min-height: 200px; + max-width: 420px; + cursor: pointer; +} + +.delete-section { + color: white; + padding: 20px; + border: 1px solid rgb(255, 53, 53); + border-radius: 16px; + background: rgba(255, 53, 53, 0.3); + min-height: 400px; + display: grid; + place-items: center; + transition: background-color 0.3s ease-in-out; +} + +.delete-section.selected { + background: rgba(255, 53, 53, 0.5); +} + +.delete-section__icon { + width: 40px; +} + +.edit-window { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 20px; + border: 1px solid #ccc; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); + z-index: 1000; +} + +.edit-window h3 { + margin-top: 0; +} +.container.p-3 { + border-radius: 10px; + border-color: #4F5665; +} + +.logo.col-md-1 { + min-width: 100px; + max-height: 38px; + margin-top: 5px; +} + +.tabs { + display: flex; + justify-content: center; +} + +.my_dogs { + text-decoration: none; + color: #4F5665; + min-width: 100px; + max-height: 24px; + margin-top: 0; +} + +.create_dogs { + text-decoration: none; + color: #4F5665; + min-width: 100px; + max-height: 24px; + margin-top: 0; +} +.edit-window { + display: block; +} diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..6768587 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/GoldenRetriever.jpeg b/img/GoldenRetriever.jpeg new file mode 100644 index 0000000..7804323 Binary files /dev/null and b/img/GoldenRetriever.jpeg differ diff --git a/img/LabradorRetriever.jpeg b/img/LabradorRetriever.jpeg new file mode 100644 index 0000000..4c78f39 Binary files /dev/null and b/img/LabradorRetriever.jpeg differ diff --git a/img/PesPatron.jpeg b/img/PesPatron.jpeg new file mode 100644 index 0000000..306ec7a Binary files /dev/null and b/img/PesPatron.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ea3b5c0 --- /dev/null +++ b/index.html @@ -0,0 +1,114 @@ + + + + + + My Dogs + + + + + + + + + + + + + +
+
+
+
+

Manage Dogs

+
+ + +
+
+
+
+
+ +
+
+ +
+
+ + 0 +
+
+
Create Dog
+
+ +
+
+
+
+
+
+ + + +
+
+ +
+ + + +
+
+ + + diff --git a/js/dom_util.js b/js/dom_util.js new file mode 100644 index 0000000..73adb8e --- /dev/null +++ b/js/dom_util.js @@ -0,0 +1,82 @@ +export const dogs = [ + { + title: "GoldenRetriever", + description: "A friendly and intelligent dog breed", + price: "1000", + }, + { + title: "LabradorRetriever", + description: "One of the most popular dog breeds", + price: "800", + }, + { + title: "PesPatron", + description: "A versatile and highly trainable breed", + price: "900", + }, +]; + +export const renderItemsList = (dogArray) => { + const itemsContainer = document.getElementById("items_container"); + itemsContainer.innerHTML = ''; + + dogArray.forEach((dog) => { + const listItem = addItemToPage(dog); + itemsContainer.appendChild(listItem); + }); +}; + +export const clearInputs = () => { + const searchInput = document.getElementById("search_input"); + searchInput.value = ""; +}; + +export const addItemToPage = (dog) => { + const listItem = document.createElement("li"); + listItem.classList.add("first_dog", "col-md-2.5", "mt-2"); + listItem.innerHTML = ` +
+ ${dog.title} +
${dog.title}
+
${dog.description}
+
${dog.price} $
+
+ +
+
+ `; + return listItem; +}; + +export function createEditForm(dog, onSave) { + const editForm = document.createElement("div"); + editForm.classList.add("edit-form"); + editForm.innerHTML = ` +

Edit Dog

+ + + + + + + + `; + + const submitEditButton = editForm.querySelector("#submit-edit"); + submitEditButton.addEventListener("click", () => { + const editedTitle = editForm.querySelector("#edit-title").value; + const editedDescription = editForm.querySelector("#edit-description").value; + const editedPrice = editForm.querySelector("#edit-price").value; + + const updatedDog = { + title: editedTitle, + description: editedDescription, + price: editedPrice, + }; + + onSave(updatedDog); + editForm.remove(); + }); + + return editForm; +} diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..4732007 --- /dev/null +++ b/js/index.js @@ -0,0 +1,187 @@ +import { + renderItemsList, + clearInputs, + dogs, +} from "./dom_util.js" + +const searchButton = document.getElementById("search_button"); +const clearButton = document.getElementById("clear_find_button"); +const findInput = document.getElementById("search_input"); +const sortSwitch = document.getElementById("sort_switch"); +const countButton = document.getElementById("count_button"); +const totalPriceLabel = document.getElementById("total_price"); +const submitButton = document.getElementById("submit_button"); + +let descendingSort = false; + +searchButton.addEventListener("click", () => { + const searchTerm = findInput.value.toLowerCase(); + const foundDogs = dogs.filter((dog) => { + const dogTitle = dog.title.toLowerCase(); + return dogTitle.includes(searchTerm); + }); + const sortedDogs = sortSwitch.checked + ? sortDogsByPrice(foundDogs) + : foundDogs; + + renderItemsList(sortedDogs); +}); + +clearButton.addEventListener("click", () => { + clearInputs(); + renderItemsList(dogs); +}); + +function calculateTotalPrice() { + const displayedDogs = document.querySelectorAll(".first_dog"); + let total = 0; + displayedDogs.forEach((dog) => { + const dogPriceElement = dog.querySelector(".dog_price"); + if (dogPriceElement) { + const dogPriceText = dogPriceElement.textContent.trim(); + const dogPrice = parseFloat(dogPriceText.replace("$", "")); + if (!isNaN(dogPrice)) { + total += dogPrice; + } + } + }); + return total; +} + +countButton.addEventListener("click", () => { + const total = calculateTotalPrice(); + totalPriceLabel.textContent = total + "$"; +}); + +sortSwitch.addEventListener("change", () => { + descendingSort = sortSwitch.checked; + const displayedDogs = document.querySelectorAll(".first_dog"); + + const displayedDogsData = Array.from(displayedDogs).map((dogElement) => { + const dogTitle = dogElement.querySelector(".dog_title")?.textContent.trim(); + const dogDescription = dogElement.querySelector(".dog_description")?.textContent.trim(); + const dogPriceElement = dogElement.querySelector(".dog_price"); + const dogPriceText = dogPriceElement ? dogPriceElement.textContent.trim() : "0"; + const dogPrice = parseFloat(dogPriceText.replace("$", "")); + + return { + title: dogTitle || "", + description: dogDescription || "", + price: dogPrice || 0, + }; + }); + + const sortedDogs = displayedDogsData.slice().sort((a, b) => { + const priceA = a.price; + const priceB = b.price; + return descendingSort ? priceB - priceA : priceA - priceB; + }); + renderItemsList(sortedDogs); +}); + +submitButton.addEventListener("click", () => { + const titleInput = document.getElementById("dog-select"); + const descriptionInput = document.getElementById("description_input"); + const expensesInput = document.getElementById("expenses_input"); + + const title = titleInput.value; + const description = descriptionInput.value; + const price = expensesInput.value; + + if (title && description && price >= 1) { + const newDog = { + title: title, + description: description, + price: price, + }; + + dogs.push(newDog); + + renderItemsList(dogs); + + titleInput.value = ""; + descriptionInput.value = ""; + expensesInput.value = ""; + + } else { + alert("Please fill in all fields and ensure that the price is greater than or equal to 1."); + } +}); + + +const itemsContainer = document.getElementById("items_container"); + +itemsContainer.addEventListener("click", (event) => { + if (event.target.classList.contains("edit-button")) { + const index = Array.from(itemsContainer.querySelectorAll(".edit-button")).indexOf(event.target); + const dogToEdit = dogs[index]; + + createEditWindow(dogToEdit, index); + } +}); + +function createEditWindow(dog, index) { + const editWindow = document.createElement("div"); + editWindow.classList.add("edit-window"); + editWindow.innerHTML = ` +

Edit Dog

+
+ +
+
+ + +
+
+ + +
+ + `; + + + const dogSelect = editWindow.querySelector("#edit-dog-select"); + dogSelect.value = dog.title; + + const itemsContainer = document.getElementById("items_container"); + itemsContainer.appendChild(editWindow); + + configureSubmitEditButton(editWindow, index); +} + +function configureSubmitEditButton(editWindow, index) { + const submitEditButton = editWindow.querySelector("#submit-edit"); + submitEditButton.addEventListener("click", () => { + const editedTitle = editWindow.querySelector("#edit-dog-select").value; + const editedDescription = editWindow.querySelector("#edit-description").value; + const editedPrice = editWindow.querySelector("#edit-price").value; + const priceInput = editWindow.querySelector("#edit-price"); + const priceValue = parseInt(priceInput.value); + if (priceValue < 1) { + alert("Price cannot be less than 1"); + } else if (isNaN(priceValue)) { + alert("Price must be a number"); + } else if (editedDescription.length < 1) { + alert("Description cannot be empty"); + } + else { + dogs[index].title = editedTitle; + dogs[index].description = editedDescription; + dogs[index].price = editedPrice; + + renderItemsList(dogs); + editWindow.remove(); + + } +} + ); +} + + +window.addEventListener("DOMContentLoaded", () => { + renderItemsList(stones); +});