Update main.js

Author: RaulMF40

main.js

@@ -371,6 +371,16 @@ const createFooter = () => {
 
 createFooter()
 
+// Función para mostrar un mensaje cuando no se encuentren productos
+const noProductsMessage = () => {
+  const message = document.createElement('p')
+  message.textContent =
+    'NO SE ENCONTRARÓN PRODUCTOS QUE COINCIDAN CON LA BÚSQUEDA.'
+  message.id = 'noProductsMsg'
+  cardsArticle$$.innerHTML = ''
+  cardsArticle$$.appendChild(message)
+}
+
 // Función para restablecer los filtros
 const resetFilters = () => {
   createProducts(products)
@@ -385,31 +395,41 @@ const filterBySelect = (e) => {
   const productByType = CopyProducts.filter((product) => {
     return product.type === selected
   })
-  createProducts(productByType)
+  if (productByType.length === 0) {
+    noProductsMessage()
+  } else {
+    createProducts(productByType)
+  }
 }
 
 // Función para filtrar por marca ingresada en el input
 const filterByBrandInput = () => {
   const CopyProducts = [...products]
   const selectedType = document.querySelector('#select').value
   const selectedBrand = document.querySelector('#brandInput').value
-
   if (selectedType !== '') {
     const productByType = CopyProducts.filter((product) => {
       return (
         product.type === selectedType &&
         (selectedBrand === '' || product.brand === selectedBrand)
       )
     })
-
-    cardsArticle$$.innerHTML = ''
-    createProducts(productByType)
+    if (productByType.length === 0) {
+      noProductsMessage()
+    } else {
+      cardsArticle$$.innerHTML = ''
+      createProducts(productByType)
+    }
   } else {
     const productByBrand = CopyProducts.filter((product) => {
       return product.brand === selectedBrand
     })
-    cardsArticle$$.innerHTML = ''
-    createProducts(productByBrand)
+    if (productByBrand.length === 0) {
+      noProductsMessage()
+    } else {
+      cardsArticle$$.innerHTML = ''
+      createProducts(productByBrand)
+    }
   }
 }
 
@@ -424,7 +444,6 @@ const filterByAll = () => {
   const CopyProducts = [...products]
   const selectedType = document.querySelector('#select').value
   const selectedBrand = document.querySelector('#brandInput').value
-
   if (selectedType !== '') {
     const productByPriceAndType = CopyProducts.filter((product) => {
       return (
@@ -433,18 +452,25 @@ const filterByAll = () => {
         (selectedBrand === '' || product.brand === selectedBrand)
       )
     })
-
-    cardsArticle$$.innerHTML = ''
-    createProducts(productByPriceAndType)
+    if (productByPriceAndType.length === 0) {
+      noProductsMessage()
+    } else {
+      cardsArticle$$.innerHTML = ''
+      createProducts(productByPriceAndType)
+    }
   } else {
     const productByPrice = CopyProducts.filter((product) => {
       return (
         product.price <= inputValue &&
         (selectedBrand === '' || product.brand === selectedBrand)
       )
     })
-    cardsArticle$$.innerHTML = ''
-    createProducts(productByPrice)
+    if (productByPrice.length === 0) {
+      noProductsMessage()
+    } else {
+      cardsArticle$$.innerHTML = ''
+      createProducts(productByPrice)
+    }
   }
 }
 
@@ -453,6 +479,7 @@ const selectOpt = document.querySelector('#select')
 const brandInput$$ = document.querySelector('#brandInput')
 const filterButton = document.querySelector('#priceFilter')
 const resetButton = document.querySelector('#resetButton')
+
 selectOpt.addEventListener('change', filterBySelect)
 brandInput$$.addEventListener('input', filterByBrandInput)
 filterButton.addEventListener('click', filterByAll)