change empty page

index.html

@@ -26,7 +26,7 @@
         <h1 class="header-title">Les petits plats</h1>
       </header>
       <div class="search">
-        <form id="searchMain" action="" id="form">
+        <form action="" id="form">
           <input
             id="searchBar"
             class="searchInput"

sass/layout/_container.scss

@@ -90,3 +90,10 @@
   line-height: 14px;
   letter-spacing: 0em;
 }
+.emptyPage {
+  grid-column-start: 2;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  margin-top: 200px;
+}

sass/layout/_nav.scss

@@ -1,8 +1,12 @@
 .search {
   width: 100%;
 }
-form {
+#form {
   outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
 }
 #searchBar {
   height: 69px;
@@ -15,12 +19,7 @@ form {
     outline: none;
   }
 }
-#searchMain {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
+
 .searchIcon {
   position: absolute;
   top: 50%;

src/buildCooking.js

@@ -113,6 +113,8 @@ function createPage(recipes2) {
   return vnode;
 }
 function createEmptyPage() {
-  const vnode = m("div", { className: "main-wrapper" }, [""]);
+  const vnode = m("div", { className: "main-wrapper" }, [
+    m("div", { className: "emptyPage" }, ["Aucun résultat n'a été trouvé"]),
+  ]);
   return vnode;
 }

src/globalFunctions.js

@@ -143,6 +143,11 @@ function updateDomWithTags() {
     sortedArray = searchMainInput(sortedArray, input.value.toLowerCase());
   }
   sortedArray = triTagAll(sortedArray);
-  let newVnode = createPage(sortedArray);
-  patch(page, newVnode);
+  if (sortedArray.length === 0) {
+    let emptyPage = createEmptyPage();
+    patch(page, emptyPage);
+  } else {
+    let newVnode = createPage(sortedArray);
+    patch(page, newVnode);
+  }
 }

src/searchMain.js

@@ -9,19 +9,20 @@ const tags = {
 };
 let page;
 let sortedArray = Array.from(recipes);
-function initPage() {
-  const vnode = createPage(sortedArray);
-  page = createElement(vnode);
-  document.querySelector(".body").insertAdjacentElement("beforeend", page);
-}
-initPage();
 // Selectionne l'input ingredient
 const ingredientInput = document.getElementById("ingredientInput");
 const appareilInput = document.getElementById("appareilInput");
 const ustensilsInput = document.getElementById("ustensilsInput");
 // Selectionne tous les inputs
 const inputsTag = document.querySelectorAll(".tagInput");
 
+function initPage() {
+  const vnode = createPage(sortedArray);
+  page = createElement(vnode);
+  document.querySelector(".body").insertAdjacentElement("beforeend", page);
+}
+initPage();
+
 function simpleResearch(value) {
   if (
     !(
@@ -44,13 +45,18 @@ input.addEventListener("input", (e) => {
   // alors va essayer de matcher avec
   sortedArray = Array.from(recipes);
   page = document.querySelector(".main-wrapper");
+  if (document.querySelector(".emptyPage")) {
+    return;
+  }
+
   if (e.target.value.length >= 3) {
     sortedArray = simpleResearch(e.target.value);
     if (sortedArray.length > 0) {
       let vnode = createPage(sortedArray);
       patch(page, vnode);
     } else {
-      patch(page, createEmptyPage());
+      let emptyPage = createEmptyPage();
+      patch(page, emptyPage);
     }
   } else {
     sortedArray = triTagAll(sortedArray);