🌱 API 🌿

🌱 Plant Wall Posts 🌿

Explore posts about plants and learn detailed information about each.

Resumen General del API

Versión español

El archivo contiene código JavaScript que simula un sistema de publicaciones paginadas utilizando una API para obtener imágenes aleatorias. Este sistema muestra tarjetas con información simulada, permite la interacción con botones de "like" y "dislike", y muestra detalles en un modal al hacer clic en una tarjeta. También incluye navegación entre páginas y muestra mensajes interactivos para mejorar la experiencia del usuario.

Desarrollado con ❤️ por Jose

API General Summary

English version

The file contains JavaScript code that simulates a paginated post system using an API to fetch random images. This system displays cards with simulated information, allows interaction with "like" and "dislike" buttons, and shows details in a modal when a card is clicked. It also includes navigation between pages and displays interactive messages to enhance the user experience.

Developed with ❤️ by Jose

Versión español

Cumplimiento de estándares de JavaScript (ECMAScript (ES) 6)

1. Uso de funciones modernas y semánticas

Descripción: El código utiliza const y let para declarar variables, una práctica moderna introducida en ES6. Estas declaraciones son más seguras y previenen errores relacionados con variables globales.

2. Buenas prácticas de DOM

Descripción: Se utiliza document.createDocumentFragment para manipular elementos de manera eficiente y reducir el número de operaciones directas en el DOM, lo que mejora el rendimiento. Además, los eventos están desacoplados del HTML utilizando addEventListener, una práctica recomendada para mantener el código modular.

3. Seguridad

Descripción: El código incluye una función de sanitización para evitar inyecciones de HTML o ataques XSS (Cross-Site Scripting). Esto asegura que cualquier entrada de usuario sea transformada en texto seguro antes de ser renderizada en el DOM.

4. Uso de APIs actualizadas

Descripción: Métodos modernos como toLocaleDateString (para formatear fechas de manera local) y addEventListener (para manejar eventos) están en línea con las prácticas actuales y ofrecen mejor compatibilidad y flexibilidad.

Conclusión

Resultado: El código cumple con los estándares de JavaScript 2024, adoptando prácticas modernas, optimizaciones de rendimiento y medidas de seguridad esenciales. Además, está diseñado para ser modular y mantener una buena legibilidad.

Explicación detallada del código JS (API)

1. Definición de constantes y variables

const PLANT_IMAGE_API =
                                          "https://picsum.photos/300/200";

Esta constante almacena la URL base de un servicio que genera imágenes aleatorias con dimensiones específicas (300x200 píxeles). Se utiliza para representar imágenes de plantas.

const POSTS_PER_PAGE = 9;

Especifica cuántas publicaciones se deben mostrar por página. Aquí, el valor es 9.

const TOTAL_POSTS = 30;

Determina el número total de publicaciones disponibles en el sistema. En este caso, hay 30 publicaciones simuladas.

let currentPage = 1;

Variable que rastrea la página actualmente visible. Comienza con un valor de 1.

2. Selección de elementos del DOM

const postsContainer =
                                          document.querySelector("#posts-container");

Selecciona el elemento contenedor donde se insertarán las publicaciones generadas dinámicamente.

const previousPageBtn =
                                          document.querySelector("#previous-page");

Obtiene el botón de "Página Anterior" que se usará para navegar entre páginas.

const nextPageBtn =
                                          document.querySelector("#next-page");

Obtiene el botón de "Página Siguiente", que permite avanzar en la paginación.

3. Función de sanitización


                                          function sanitize(input) {

                                            const div =
                                          document.createElement("div");

                                            div.textContent =
                                          input;

                                            return div.innerHTML;

                                          }

Sanitiza el contenido de entrada (texto proporcionado) para evitar inyecciones de HTML o ataques XSS. Utiliza un elemento temporal `div` para convertir cualquier entrada en texto puro.

4. Generar publicaciones

function generatePosts(page) { ...
                                          }

Esta función genera dinámicamente tarjetas de publicaciones en la página actual. Los pasos clave incluyen:

Calcular el rango de publicaciones a mostrar según la página actual.
Crear elementos DOM (`div`) para cada publicación con detalles como título, usuario, fecha, y botones de interacción.
Sanitizar el contenido dinámico antes de insertarlo en el DOM.
Actualizar los botones de navegación según la página actual.

5. Actualizar botones de navegación


                                          function updateNavigationButtons()
                                          {

                                            const totalPages =
                                          Math.ceil(TOTAL_POSTS /
                                          POSTS_PER_PAGE);

                                            previousPageBtn.disabled =
                                          currentPage === 1;

                                            nextPageBtn.disabled =
                                          currentPage === totalPages;

                                          }

Desactiva los botones "Anterior" y "Siguiente" si se encuentran en los límites del rango de páginas. Esto asegura que los usuarios no puedan navegar fuera de los límites.

6. Mostrar detalles en un modal

function showDetails(postId) { ...
                                          }

Muestra los detalles de una publicación seleccionada dentro de un modal de Bootstrap. Actualiza dinámicamente los elementos del modal con información específica de la publicación seleccionada.

7. Manejo de interacciones

function handleInteraction(event,
                                          action, postId) { ... }

Administra las interacciones del usuario con los botones "Me gusta" y "No me gusta". Resalta el botón seleccionado y muestra un mensaje con la acción realizada.

8. Eventos e inicialización

previousPageBtn.addEventListener("click",
                                          ...);

Asigna eventos a los botones de navegación para cambiar la página visible y actualizar las publicaciones mostradas.

generatePosts(currentPage);

Inicializa el contenido de la página generando publicaciones para la primera página.

Desarrollado con ❤️ por Jose

English version

JavaScript (ECMAScript (ES) 6) standards compliance

1. Use of modern and semantic functions

Description: The code uses const and let to declare variables, a modern practice introduced in ES6. These declarations are safer and prevent errors related to global variables.

2. Good DOM practices

Description: The code uses document.createDocumentFragment to efficiently manipulate elements and minimize direct DOM operations, improving performance. Additionally, events are decoupled from the HTML using addEventListener, a recommended practice for maintaining modular code.

3. Security

Description: The code includes a sanitization function to prevent HTML injection or XSS (Cross-Site Scripting) attacks. This ensures that any user input is converted into safe text before being rendered in the DOM.

4. Use of updated APIs

Description: Modern methods like toLocaleDateString (to format dates locally) and addEventListener (for handling events) align with current best practices, offering better compatibility and flexibility.

Conclusion

Result: The code complies with JavaScript 2024 standards, adopting modern practices, performance optimizations, and essential security measures. Additionally, it is designed to be modular and maintain good readability.

Detailed explanation of the JS code (API)

1. Defining constants and variables

const PLANT_IMAGE_API =
                                          "https://picsum.photos/300/200";

This constant stores the base URL of a service that generates random images with specific dimensions (300x200 pixels). It is used to represent plant images.

const POSTS_PER_PAGE = 9;

Specifies how many posts should be displayed per page. Here, the value is 9.

const TOTAL_POSTS = 30;

Determines the total number of posts available in the system. In this case, there are 30 simulated posts.

let currentPage = 1;

A variable that tracks the currently visible page. It starts with a value of 1.

2. Selecting DOM elements

const postsContainer =
                                          document.querySelector("#posts-container");

Selects the container element where the dynamically generated posts will be inserted.

const previousPageBtn =
                                          document.querySelector("#previous-page");

Gets the "Previous Page" button, which will be used to navigate between pages.

const nextPageBtn =
                                          document.querySelector("#next-page");

Gets the "Next Page" button, which allows advancing in pagination.

3. Sanitization function


                                          function sanitize(input) {

                                            const div =
                                          document.createElement("div");

                                            div.textContent =
                                          input;

                                            return div.innerHTML;

                                          }

Sanitizes the input content (provided text) to prevent HTML injection or XSS attacks. A temporary `div` element is used to convert any input into plain text.

4. Generating posts

function generatePosts(page) { ...
                                          }

This function dynamically generates cards for posts on the current page. Key steps include:

Calculating the range of posts to display based on the current page.
Creating DOM elements (`div`) for each post, with details like title, user, date, "Like", and "Dislike" buttons.
Sanitizing dynamic content before inserting it into the DOM.
Updating navigation buttons based on the current page.

5. Updating navigation buttons


                                          function updateNavigationButtons()
                                          {

                                            const totalPages =
                                          Math.ceil(TOTAL_POSTS /
                                          POSTS_PER_PAGE);

                                            previousPageBtn.disabled =
                                          currentPage === 1;

                                            nextPageBtn.disabled =
                                          currentPage === totalPages;

                                          }

Disables the "Previous" and "Next" buttons if they are at the boundaries of the page range. This ensures users cannot navigate beyond limits.

6. Displaying details in a modal

function showDetails(postId) { ...
                                          }

Displays details of a selected post within a Bootstrap modal. Dynamically updates modal elements with specific post information.

7. Handling interactions

function handleInteraction(event,
                                          action, postId) { ... }

Manages user interactions with the "Like" and "Dislike" buttons. Highlights the selected button and displays a message with the performed action.

8. Navigation events

previousPageBtn.addEventListener("click",
                                          ...);

Assigns events to navigation buttons to change the visible page and update the displayed posts.

generatePosts(currentPage);

Initializes the page content by generating posts for the first page.

Developed with ❤️ by Jose