notifications learned in classes is added

pablo-sch · pablo-sch · commit 3246eb6f8703 · 2025-04-15T15:36:38.000+02:00
diff --git a/index.html b/index.html
@@ -5,8 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="src/styles/loader.css">
+    <link rel="stylesheet" href="src/styles/notifications.css">
+
 </head>
 <body>
+    <div class="notifications"></div>
     <div class="loader hidden"></div> <!-- by defaul "loader" is hidden -->
     <div class="posts-container"></div>
     <script type="module" src="src/js/main.js"></script>
diff --git a/src/js/components/loader/loaderController.js b/src/js/components/loader/loaderController.js
@@ -1,16 +1,17 @@
 
-// the "loader" in loaderController(loader) is the class '.loader' from index.html"
-export function loaderController(loader) { // 'loader' comes from ShowPostsController.js
+// the "loader" in loaderController(loader) is the class '.loader' from index.html".
+export function loaderController(container) { // 'container' is ".loader" and comes from ShowPostsController.js.
 
   const show = () => {
 
-    // <div class="loader hidden -> X"></div> 
-    loader.classList.remove("hidden");
+    // <div class="loader -> -hidden</div> 
+    // "classList" is a property of DOM elements.
+    container.classList.remove("hidden");
   }
   const hide = () => {
 
-    // <div class="loader + hidden"></div> 
-    loader.classList.add("hidden");
+    // <div class="loader -> +hidden"></div> 
+    container.classList.add("hidden");
   }
 
   return {
diff --git a/src/js/components/notifications/notificationsController.js b/src/js/components/notifications/notificationsController.js
@@ -0,0 +1,35 @@
+import { buildNotification } from "./notificationsView.js";
+
+export function notificationsController(container){ // container is ".notifications"
+  
+    // Internal function.
+  const removeNotification = (newNotification) => {
+    newNotification.remove();
+  }
+
+  // This method receives a message and type (error / success), if it does not receive type by default it will be "error".
+  const showNotification = (message, type = 'error') => {
+
+    const newNotification = document.createElement('div');
+
+    newNotification.classList.add('notification') // <-- Here we add the "notification" class so "notification.css" will detect it.
+    newNotification.classList.add(type) // <-- Here we add the class of the container we pass to "type".
+    newNotification.innerHTML = buildNotification(message, type) // <-- If "type" is not added, the default will be “error”.
+
+    container.appendChild(newNotification) // <-- Here we insert our HTML ready to use.
+
+    const closeButton = newNotification.querySelector("button"); // <-- It will select only the button element of the container that we pass it.
+
+    closeButton.addEventListener("click", () => {
+      removeNotification(newNotification);
+    });
+
+    setTimeout(() => {
+      removeNotification(newNotification)
+    }, 5000);
+  }
+
+  return {
+    showNotification
+  }
+}
diff --git a/src/js/components/notifications/notificationsView.js b/src/js/components/notifications/notificationsView.js
@@ -0,0 +1,7 @@
+export const buildNotification = (message) => {
+    return `
+        <p>${message}</p>
+        <button>X</button>
+      `
+  }
+  
diff --git a/src/js/main.js b/src/js/main.js
@@ -1,15 +1,19 @@
 import { loaderController } from "./components/loader/loaderController.js";
+import { notificationsController } from "./components/notifications/notificationsController.js";
 import { showPostsController } from "./modules/show-posts/showPostsController.js";
 
 
 // Get the DOM nodes we need to interact with.
 document.addEventListener("DOMContentLoaded", () => {
 
-    // Here I go to the DOM and select the nodes I need to manage in my code.
-    const container = document.querySelector(".posts-container")
-    const loader = document.querySelector(".loader")
+    // Here I go to the DOM and select the nodes I need to manage in my code and I manage them in my controllers.
+    const container = document.querySelector(".posts-container") // ".posts-container" is a Node
+    const loader = document.querySelector(".loader") // ".loader" is a Node
+    const notifications = document.querySelector(".notifications")
 
-    const { show, hide } = loaderController(loader)
+
+    const { show, hide } = loaderController(loader);
+    const { showNotification } = notificationsController(notifications)
 
     /*
      'main.js' needs to know when posts start and finish loading, 
@@ -18,19 +22,19 @@ document.addEventListener("DOMContentLoaded", () => {
      For that reason, we use 'CustomEvent' in 'showPostsController.js'.
 
      Here, we listen to those custom events ('load-posts-started' and 'load-posts-finished') 
-     on the container element. When triggered, we call 'show()' to display the loader, 
+     on the "container" element. When triggered, we call 'show()' to display the loader, 
      and 'hide()' to remove it once loading is complete.
     */
     container.addEventListener('load-posts-started', () => {
-        show()
+        show();
     })
     container.addEventListener('load-posts-finished', () => {
-        hide()
-        /*showNotification('Posts Loaded')*/
+        hide();
+        showNotification('Posts Loaded' , 'success') // <-- Here we add type as “success”.
     })
     container.addEventListener('load-tweets-error', (event) => {
-        /* const errorMesage = event.detail;
-        showNotification(errorMesage) */
+        const errorMessage = event.detail; // <-- Here we are passing the error obtained from "showPostsController.js".
+        showNotification(errorMessage) // <-- Here we do not add the type “success” so it will be “error”.
     })
 
     // Then this next code happens in showPostsController.js
diff --git a/src/js/modules/show-posts/showPostsModel.js b/src/js/modules/show-posts/showPostsModel.js
@@ -12,10 +12,6 @@ export async function getPosts() {
        the error will have a better context so you have a better answer for detecting problems with BD. */
 
        // here "error" would return a 'status code'.
-
-       /* the error should not be sent to the file driver for it to handle, but directly send the error itself. */
-
-
        
       throw new Error("It was not possible to get the posts. Please try again later.") // this error is sended to showPostsController.js
     }
diff --git a/src/styles/notifications.css b/src/styles/notifications.css
@@ -0,0 +1,15 @@
+.notification {
+    border: solid 1px;
+    padding: 1rem;
+  }
+  
+  .notification.success {
+    background-color: lightblue;
+    border-color: rgb(0, 172, 230);
+  }
+  
+  .notification.error {
+    background-color: lightcoral;
+    border-color: rgb(242, 8, 8);
+  }
+  

Original file line number	Diff line number	Diff line change
`@@ -12,10 +12,6 @@ export async function getPosts() {`
`12`	`12`	`the error will have a better context so you have a better answer for detecting problems with BD. */`
`13`	`13`
`14`	`14`	`// here "error" would return a 'status code'.`
`15`		`-`
`16`		`- /* the error should not be sent to the file driver for it to handle, but directly send the error itself. */`
`17`		`-`
`18`		`-`
`19`	`15`
`20`	`16`	`throw new Error("It was not possible to get the posts. Please try again later.") // this error is sended to showPostsController.js`
`21`	`17`	`}`