Tripleten web_project_around_es

Proyecto de práctica en JavaScript moderno con refactorización modular.

Descripción

Aplicación web que permite:

• Editar información de perfil.
• Crear, eliminar y dar like a tarjetas.
• Visualizar imágenes en popup.
• Validar formularios con mensajes de error y control del botón Guardar.

El proyecto mantiene la lógica original, pero organiza el código en módulos ES y clases para mejorar mantenimiento y legibilidad.

Estructura de scripts

• components/index.js

  • Punto de entrada.
  • Renderiza tarjetas iniciales.
  • Inicializa validadores.
  • Exporta add() para crear tarjetas.

• components/Card.js

  • Clase Card.
  • Genera tarjetas.
  • Maneja likes, borrado y click en imagen.

• components/FormValidator.js

  • Clase FormValidator.
  • Valida formularios.
  • Muestra/oculta errores.
  • Habilita/deshabilita botón submit.
  • Exporta reset para limpiar validación.

• components/utils.js

  • Manejo de popups.
  • Apertura/cierre de modales.
  • Popup de imagen.
  • Eventos globales (Escape, overlay).

API

• Base URL: https://around-api.es.tripleten-services.com/v1
• Headers por defecto:
  • authorization: d649468b-cef3-486b-a8f6-7895db0f1670
  • Content-Type: application/json

Endpoints y métodos expuestos por components/Api.js:

• GET /cards — getInitialCards(): obtener tarjetas iniciales.
• GET /users/me — getUserInfo(): obtener información del usuario.
• PATCH /users/me — setUserInfo({ name, about }): actualizar nombre y about.
• POST /cards — setNewCard({ name, link }): crear nueva tarjeta.
• DELETE /cards/:cardId — deleteCard(cardId): borrar una tarjeta.
• PUT /cards/:cardId/likes — addLike(cardId): añadir like.
• DELETE /cards/:cardId/likes — removeLike(cardId): quitar like.
• PATCH /users/me/avatar — updateAvatar({ avatar }): actualizar avatar (body: { avatar }).

Nota: Para cambiar el token o la URL, editar la instancia en components/Api.js.

Autor

Velvett Montserrat Gutiérrez Castillo - gutierrezvelvett@gmail.com GitHub: https://github.com/Velvett-93